I am using the image gallery slider with arrow navigator skin 19 and thumbnail navigator skin 7. However the issue can also be observed in the default image gallery demo here: JSSOR slider: Image Gallery Demo.
What happens is the following.
Desktop: When the mouse enters the thumbnail navigator the slideshow pauses and the hover image t01.png is being shown alongside the arrow navigators.
When the mouse is then left at that position the slideshow still pauses.
Now when the mouse leaves the slider or clicks on a new thumbnail then the hover image correctly moves to the next clicked slide and subsequently if the mouse leaves the slider container the slideshow continues with the hover image shown at the correct slide.
Mobile: However this behaviour is different on Firefox and Chrome latest version for Android. I am testing on a Samsung S4 however I think this can also be observed on other devices.
What happens here is that when a thumbnail image has been tapped, the slider moves to the correct slide and the arrow navigators show up.
However now when letting the slideshow to continue further the highlighted thumbnail stays highlighted and the arrows keep showing.
This leads to the hover image cycling through the thumbnail gallery highlighted instead of only highlighting the thumbnail that is currently being shown in the slider.
In the thumbnail navigator skin 7 I commented out the following since otherwise the highlighted border will keep showing.
/* if the mouse stays on the clicked image the hover colour will not fade to white
this leads to the hover colour staying like this on mobile devices since
the device, once clicked on the thumbnail gallery beliefs that the finger
is still resting on the thumbnail and therefore keeps the thumbnail hover colour
making it cycle through the thumbnail gallery
.jssort07 .pav:hover .o
{
border-color: #0099FF; (light blue)
} */
Commenting that selector did help in the way that the once tapped thumbnail does not keep the light blue colour and cycles through the slideshow with it but it simply keeps the white border like the thumbnail navigator 7 should be.
I would like the thumbnail gallery behave in the way that once a thumbnail is tapped the highlight border or highlight image moves to that thumbnail and when the slideshow is then being left to continue it should correctly only highlight the currently shown slide and not let the old, previously tapped slide keep being highlighted.
Ideally also the arrow navigators should, once tapped on the thumbnail and once the slide has moved to the tapped thumbnail either also stop being highlighted or be shown at all times, before and after a tap on the thumbnail.
I think what is happening here is that somehow once tapped on the thumbnail gallery the event it not stopped on the smartphone, making the arrow navigators continue to show (that is not that bad) but also keep the highlight image or highlight border colour on the tapped thumbnail while continuing with the slideshow. This leads to two highlighted thumbnails in the end. One indicating the right position of the currently shown slide and the other one cycling through the thumbnail gallery.
If you (JSSOR author) have a smartphone you can observe this behaviour on the default Image Gallery demo as well. If you could update the image gallery demo to change this behaviour this would be great. Otherwise if you could let me know how I can stop this from happening that would also be really really nice. Apart from this little quirk it works really nice and fast on the mobile.
Thank you for any help.
EDIT : I forgot to mention that when after the initial first on the thumbnail gallery I tap anywhere outside the slider container the highlight image or highlight border of the first tapped thumbnail stops being highlighted and the arrow navigators also stop showing. So it clearly has to do something with tapping inside the slider container. I hope all this info can help you find a way to get rid of this behaviour.
EDIT 2 : OK, with your answer I managed to get the exact behaviour for mobile that I wanted. However I also changed the transition states a bit.
What was happening is that once a thumbnail is tapped the white border would light up shortly, then the white border would go dark again while the thumbnail travelled/cycled to the tapped thumbnail and THEN it would light up again. I also managed to change for the opacity change this this was also happening with the opacity while the thumbnail travelled to the tapped item, it would light up, go dark while waiting for the item to be at the correct selection and then light up again.
Below is my html with inline css still. I believe this might also help other users coming across this behaviour on mobile/desktop.
<!-- ThumbnailNavigator Skin Begin -->
<div u="thumbnavigator" class="jssort07" style="position: absolute; width: 800px; height: 100px; left:0px; bottom: 0px;">
<!-- Thumbnail Item Skin Begin -->
<style>
/* jssor slider thumbnail navigator skin 07 css */
/*
.jssort07 .p (normal)
.jssort07 .p:hover (normal mouseover)
.jssort07 .pav (active)
.jssort07 .pav:hover (active mouseover)
.jssort07 .pdn (mousedown)
*/
.jssort07 .i
{
position:absolute;
top: 0px;
left: 0px;
width: 72px;
height: 72px;
filter: alpha(opacity=60);
opacity: .6;
}
.jssort07 .p:hover .i, .jssort07 .pav .i
{
filter: alpha(opacity=100);
opacity: 1;
}
.jssort07 .o
{
position: absolute;
top:0px;
left:0px;
width:72px;
height:72px;
border: 2px solid #000;
transition: border-color .6s;
-moz-transition: border-color .6s;
-webkit-transition: border-color .6s;
-o-transition: border-color .6s;
}
* html .jssort07 .o
{
/* ie quirks mode adjust */
width /**/: 72px;
height /**/: 72px;
}
.jssort07 .pav .o, .jssort07 .p:active .o
{
border-color: #fff;
}
/* looking at the demo and my project I don't really need the light blue condition, neither for mobile nor desktop
.jssort07 .pav:hover .o
{
border-color: #0099FF; (light blue)
}*/
.jssort07 .p:active .o
{
border-color: #fff;
filter: alpha(opacity=100);
opacity: 1;
/* transition: none;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none; */
}
</style>
<div u="slides" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
<div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">
<div u="thumbnailtemplate" class="i" style="position:absolute;"></div>
<div class="o">
</div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- ThumbnailNavigator Skin End -->
Last not least I want to thank you for your quick and thorough help. Great work. Once the site is online I will try and send you a link somehow so you can check it out.
Thank you ;)
EDIT 3 : Due to the mouse over/out behaviour on mobile being different from desktop (naturally) I am still not getting the exact behaviour I like to see on mobile.
After a few tests I come to realize that when I am happy with the behaviour on mobile it does not look good on desktop and if I am happy with the desktop behaviour it does not work properly on mobile.
Due to this I am thinking to either start using Modernizr to check for mobile browser and assign different active states for mobile browsers as opposed to desktop browsers, or I might try and get this working with a few lines of jQUery. Basically active and hover states are getting mixed or kind of double used for mobile and desktop if you know what I mean.
Though perhaps all this can be avoided with the .i, .o and .p classes I wonder? Can you please let me know what these classes are for in the Thumbnail navigator skin? If I could style the active and hover states differently for mobile and desktop with those classes that would be really really nice!
From this question jssor: undocumented t3 d3 properties - how to I found some information here: Slider with Caption (jQuery code) but unfortunately I cannot seem to find information on the .i, .o and .p classes.
Thank you for your help.
For mobile device, the mouse over/out behavior is different from desktop. Please use :active instead of :hover for mobile device.
So, please replace all ':hover' with ':active' in the thumbnail navigator skin css.
Re Edit 3:
Given a thumbnail prototype and a thumbnail source as below,
<!-- prototype -->
<div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">
<div u="thumbnailtemplate" class="i" style="position:absolute;"></div>
<div class="o">
</div>
</div>
<!-- thumbnail source -->
<img u="thumb" src="../img/alila/thumb-12.jpg" />
Eventually, it will generate thumbnail item as follows,
<div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">
<img src="../img/alila/thumb-12.jpg" class="i" style="position:absolute;"/>
<div class="o">
</div>
</div>
Now you can see how the class 'p', 'i' and 'o' apply to the thumbnail item.