The slideshow works perfect with firefox but not chrome. In chrome, what happens is that 1.whenever you start the slideshow by clicking on any of the thumbs, you cannot exit out of the slideshow (the “x” closing icon on the top-right corner doesn’t respond). and 2. I adjusted the z-index so that the navigation menu is hidden behind the slides, but for some reason in chrome it doesn’t work. again, all of this WORKS PERFECT in firefox.
if you open the page in firefox and chrome you will see the difference. The slideshow is under “artwork” (click on “artwork” and you will be directed there). You will find my website here: http://ninetieschild.github.io/my-site/
the navigation menu is #navbox in the code and you will see its z-index is adjusted to 500 in the main.css file, line 515. the full-size images in the slideshow are #slideshow img in the code and you will see the z-index is adjusted to 1000 in the index file line 44. here is the “x” icon defined and the function to close the slideshow with the “x” closing icon :
/ create HTML markup for lightbox window
var lightbox =
'<div id="slideshow" >' +
'<p title="close" id="lightboxX35Close">x</p>' +
'<div class="nav">' +
'<a class="prev slide-nav" title="Preview" id="lightboxX35Prev"><</a>' +
'<a class="next slide-nav" title="Next;" id="lightboxX35Next">></a>' +
'</div>' +
'</div>';
$('body').on('click', '#lightboxX35Close', function() {
$('#slideshow').remove();});
you will find this in the lightbox35.js file.
I realize the way to solve this is using breakpoints but I really haven’t a clue as to where to start checking. Any guidance/advice would be appreciated. Thanks a lot.
The problem is caused by the z-index and width of your #navbox it is overlapping your #slideshow and making it impossible to click on the close button.
So fix that by putting the slider at a higher z-index than the nav or hiding the nav when the slider is triggered and your issue should be solved.
Good Luck.
Hello and thanks for your reply. As mentioned in my post, the z-index of #slideshow img(=1000) is HIGHER than that of the navigation (#navbox=500). See my original post. Will you please tell me what made you think the slideshow was lower in index?
maybe I’m missing something.
How come the navigation doesn’t overlap the slideshow in Firefox but it does in Chrome?
Thanks.
If you inspect the slideshow in chrome it has no z-index value applied to it, also put your css in a css file and not in your js.
That’s incorrect. div#navbox does have a z-index value applied to it.
You can see this in Chrome if you click on “elements”, then highlight
div id=“navbox”, then click on “styles”. you will see the z-index value
is 500, as appears in the main.css file. If you unclick this value, the
navigation menu disappears behind the image. But the problem is, no
matter what value I try to give it, even 1, it will always go over the
images, even if I give the images a z-index of 7000! And if I give it a
z-value of 0, the nav menu would not work at all. Any ideas?
I said slideshow has no z-index not navbox, so if you want slideshow above navbox the slideshow needs to have a higher z-index than navbox.
It’w working now fine in chrome, the nav is no longer on top of the slider. Looks like your toggling the z-index of the navbox now from 10 to 0 when you open the slider images.
Thanks for the chrome inspector tips 
that was incorrect, both the slideshow and navbox had z-index values, which you could see with chrome developer tools.
it’s working fine now because i’ve finally figured out how to fix it 
i did it by adding some javascript code to the lightbox file, manipulating the z-index of the navbox (but not with toggle). i still don’t understand, however, why this was necessary as the z-index values for both elements were appropriately different, and firefox interpreted them correctly, so if you have any ideas, i’d be curious to hear.
thanks for trying to help!
