I am attempting to cycle through sections with the class of "work" with this script. By cycle, I mean only have one section appear at a time, and then have the next section appear when a next or previous button is pushed. Each section contains several elements like h1, p, and a div with figures inside. The cycling is working, but I am using a jquery plugin called "imGrid" (to display images as a grid) within each section that is being cycled through. The images open correctly on the first section, but each section after that, the photos do not open correctly when clicked on. I know that this is because the sections are hidden with display:none;
$('button.next').click(function() {
var visibleBox = $('.container2 .work:visible');
visibleBox.hide(1);
var nextToShow = $(visibleBox).next('.work:hidden');
if (nextToShow.length > 0) {
nextToShow.fadeIn(700);
} else {
$('.container2 .work:hidden:first').fadeIn(700);
}
});
My website can be found here, so you can see exactly the problem: http://www.unf.edu/~n00804716/my-site/ind-work.html#
Examine how the images within the first section titled "Tarantino Series" open correctly when clicked on. Then press the next button and attempt to click on an image in the grid. The image does not open correctly.