jQuery conflict ?

A fact is that google analytics plugin loads a non-wp-standard jquery library, so now you have 2 different jquery libraries loaded and that is asking for probllems…

Although i see no js errors happen, try to de-activate other plugins.

btw: there are even more things going wrong than you showed in tjhe screenshots.

Hi,
Can i have a custom class for the selected thumbnail in “slideshow”?
I want to add a border to the current/selected thumbnail in theslideshow.
Thanks

Hi

First of all, OpaJaap, thanks for pointing me in the right direction, will investigate.

@nada Abou Dehn – yes, you can just add the element to your stylesheet with the :hover selector, alternativelly you could use jQuery to achieve the same result, i would also add box-sizing: border-box; ( incl its vendor prefixes ) to ensure the image size doesnt change when adding the border.

Good luck

Can i have a custom class for the selected thumbnail in “slideshow”?

Will be implemented in 5.0.7

Thank you @ronnieinspain , I have added the below to my stylesheet but I want to add the border to the selected image.(not the hovered)
.thumbnail-frame:selected{
border-bottom:1px solid red;
}
and below is the generated HTml

<div style="height: 100px; width: 1462px; margin-left: -707px;" id="wppa-filmstrip-1">
			<style type="text/css">#wppa-container-1 .thumbnail-frame { width: 100px; height: 100px; margin-left: 4px; margin-top: 2px; margin-bottom: 2px; }</style>
				<div class="thumbnail-frame" id="film_wppatnf_1_1"><img ondblclick="wppaGoto(1, 0)" onclick="wppaGoto(1, 0)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style=" border-width: 0px; width:100px; height:80px; margin-top: 0px; opacity:0.6; filter:alpha(opacity=60); cursor:pointer;" title="" alt="b1.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/1.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_2_1"><img ondblclick="wppaGoto(1, 1)" onclick="wppaGoto(1, 1)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style=" border-width: 0px; width:100px; height:80px; margin-top: 0px; opacity:0.6; filter:alpha(opacity=60); cursor:pointer;" title="" alt="b2.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/2.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_3_1"><img ondblclick="wppaGoto(1, 2)" onclick="wppaGoto(1, 2)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style=" border-width: 0px; width:100px; height:80px; margin-top: 0px; opacity:0.6; filter:alpha(opacity=60); cursor:pointer;" title="" alt="b3.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/3.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_4_1"><img ondblclick="wppaGoto(1, 3)" onclick="wppaGoto(1, 3)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style=" border-width: 0px; width:100px; height:80px; margin-top: 0px; opacity:0.6; filter:alpha(opacity=60); cursor:pointer;" title="" alt="b4.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/4.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_5_1"><img ondblclick="wppaGoto(1, 4)" onclick="wppaGoto(1, 4)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style=" border-width: 0px; width:100px; height:80px; margin-top: 0px; opacity:0.6; filter:alpha(opacity=60); cursor:pointer;" title="" alt="b5.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/5.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_6_1"><img ondblclick="wppaGoto(1, 5)" onclick="wppaGoto(1, 5)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style=" border-width: 0px; width:100px; height:80px; margin-top: 0px; opacity:0.6; filter:alpha(opacity=60); cursor:pointer;" title="" alt="b6.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/6.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_7_1"><img ondblclick="wppaGoto(1, 6)" onclick="wppaGoto(1, 6)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style="border-width: 0px; width: 100px; height: 80px; margin-top: 0px; opacity: 0.6; cursor: pointer;" title="" alt="b7.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/7.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_8_1"><img ondblclick="wppaGoto(1, 7)" onclick="wppaGoto(1, 7)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style="border-width: 0px; width: 100px; height: 80px; margin-top: 0px; opacity: 0.6; cursor: pointer;" title="" alt="b8.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/8.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_9_1"><img ondblclick="wppaGoto(1, 8)" onclick="wppaGoto(1, 8)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style="border-width: 0px; width: 100px; height: 80px; margin-top: 0px; opacity: 0.6; cursor: pointer;" title="" alt="b9.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/9.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_10_1"><img ondblclick="wppaGoto(1, 9)" onclick="wppaGoto(1, 9)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style=" border-width: 0px; width:100px; height:80px; margin-top: 0px; opacity:0.6; filter:alpha(opacity=60); cursor:pointer;" title="" alt="b10.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/10.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_11_1"><img ondblclick="wppaGoto(1, 10)" onclick="wppaGoto(1, 10)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style=" border-width: 0px; width:100px; height:80px; margin-top: 0px; opacity:0.6; filter:alpha(opacity=60); cursor:pointer;" title="" alt="b11.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/11.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_12_1"><img ondblclick="wppaGoto(1, 11)" onclick="wppaGoto(1, 11)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style=" border-width: 0px; width:100px; height:80px; margin-top: 0px; opacity:0.6; filter:alpha(opacity=60); cursor:pointer;" title="" alt="b12.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/12.jpg"></div>
				<div class="thumbnail-frame" id="film_wppatnf_13_1"><img ondblclick="wppaGoto(1, 12)" onclick="wppaGoto(1, 12)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style=" border-width: 0px; width:100px; height:80px; margin-top: 0px; opacity:0.6; filter:alpha(opacity=60); cursor:pointer;" title="" alt="b13.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/13.jpg"></div>
				<div style="width: 100px; height: 100px; margin-left: 4px; margin-top: 2px; margin-bottom: 2px;" class="thumbnail-frame" id="film_wppatnf_14_1"><img ondblclick="wppaGoto(1, 13)" onclick="wppaGoto(1, 13)" onmouseover="jQuery(this).fadeTo(400, 1.0);" onmouseout="jQuery(this).fadeTo(400, 0.6)" style=" border-width: 0px; width:100px; height:80px; margin-top: 0px; opacity:0.6; filter:alpha(opacity=60); cursor:pointer;" title="" alt="b14.jpg" src="https://localhost/art21/wp-content/uploads/wppa/thumbs/14.jpg"></div>
			<!-- hier 2 -->
		</div>

[Please use the code buttons – your code here may have been corrupted]

@nada Abou Dehn

remember :selected is a jQuery expression to identify selected option groups and tickboxes, not a CSS selector.

I’m not 100% sure which selected image you want to add a border to, if it is the one currently being displayed in the slideshow, this has an id of ‘theimg0-1’ and could be targeted trough #theimg0-1 {…} in your stylesheet.

If however you wish to give the border to the image in the ‘filmstrip’ below the main image (which by your code appears to be the case) it becomes a bit more difficult; you cannot use the css :active selector as there is no link; i haven’t tried it as i am no jQuery expert but i would try something along these lines:

Through jQuery
1. Wrap each image inside div class thumbnail-frame with a link.
2. Make sure this link doesn’t work like a link by using return false;

In CSS
4. Add a :active selector for the link we just created giving it the border you want.

Hope this helps

Ronald

Yes, it is a bit more difficult, that is why i made it and said before: it is implemented in the next version ( tomorrow ).

Have a preview here: https://beta.opajaap.nl/landing-auto/?locale=en_US&wppa-album=59&wppa-slide&wppa-occur=1&wppa-photo=1483

The required css change is only:

.wppa-filmthumb-active {
	border: 1px solid black !important;
}

and will be ‘pre-fab’d’ in the new css file.

@opajaap

Great to see a plugin with such good support!

As per your suggestion, i have ensured there is only one jquery library loaded; i have deregisterd the WP script and added the google one as such:

function load_jquery_from_google() {

	if (!is_admin()) {

		// deregister WP jquery default script
		wp_deregister_script('jquery');

		// load googleapi jquery script through Content Delivery Network
		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js', false, '2.0.0', true);
		// enque the script
		wp_enqueue_script('jquery');

		// load the required libraries which are dependent on jquery
		wp_enqueue_script('fancybox', get_stylesheet_directory_uri() . '/js/fancybox/jquery.fancybox.pack.js', array('jquery'), '1.0', true);
	}
}
add_action('init', 'load_jquery_from_google');

furthermore, i have added $.noConflict(); above all my own jquery code and changed it from using $(… to jQuery( , all my own jQuery is working fine but unfortunately the problems i’m having with the gallery are still the same … in fact, nothing has changed at all!

Have you any other suggestion? Alvast bedankt !

I only believe in a wppa+ problem when you load the wp default jQuery and NOT the google’s one…

Thanks for your help, i have now gone back to using only wp jQuery and deactivated all plugins one by one; the only one that made any difference was Lazy Load; now on the page listing all galleries the ‘loading’ image doesn’t stay as before; apart from that the film strip still doesn’t show and the hover function on individual images in the gallery isn’t displaying correctly.

I’ve been through the source code and no other jquery library is being uploaded. I’m running out of ideas.

Thank you very much for your prompt reply and actions.
I have upgraded and so happy with the result ??
however, i still have one small issue.
The filmstrip div with id wppa-filmstrip-1 has inline styles
element.style {
height: 100px;
margin-left: 229px;
width: 1462px;
}
which is causing the thumbnails to be centerd.
I tried to overwrite this in my stylesheet
#wppa-filmstrip-1{
margin-left:1px !important;}
The styles are ok but the next/previous buttons became non functional.

@nada Abou Dehn:
Can you supply me a link?

https://www.art21lagos.com/new/?p=199

Thank you

The wppa-filmstrip-1 style you added is useless as it is changed automaticly by a js routine.

The next/previous page arrows are there, ( except the previous when it is at position 1 when there is no previous ), next/previous single item arrows you have manually removed by:

#prev-film-arrow-1-1 {
    display: none !important;
}

and

#next-film-arrow-1-1 {
    display: none !important;
}

in your themes style.css

yes i dont need the next/previous ones.
just need to move the thumbs and the first thumb to be left aligned.
Thanks a lot