Closed ekeystn closed 9 years ago
o-l-e
commented
12 years ago this really interesting, would love to know how to do this myself. Would be nice to combine a simple modal with FlexSlider.
Having a nightmare getting all kinds of lightbox plugins to work with media queries and responsive layouts. How does this work for you with your setup?
ekeystn
commented
12 years ago Well, except for the problem mentioned above, it works great. I just can't get it to to clear our the first link's rel so that it will start at the correct slide when the next link is clicked. I am using the reveal plugin for the modal window from the foundation framework. It does really well in responsive layouts.
Liaz
commented
12 years ago Hello snickerprissy !
Did you make any progresse on that question ? because I have exactly the same problem here, using flexslider in a modal window, the startAt option is not taken in account. For me not even at the first click. Any help would be very welcome :)
THx ++
PS : I initialize the flexslider after the click and the reveal of the window, if not I have a weird bug with all my slide overlapping and it doesn't work at all then.
ekeystn
commented
11 years ago Here is what I figured out to make this work for me:
$(document).ready(function(){
var raw_slider = $('#staffSlider').html(); //store unaltered version of HTML
$('.close-reveal-modal').click(function(){ //clicking to close the modal window
function getPathFromUrl(url) {
return url.split("?")[0];
}
$('#staffSlider').remove(); //remove slider in order to reset
$('#staffSlideContainer').append('');
$('#staffSlider').html(raw_slider); //reset slider by inserting original html
});
$('.slide-anchor').each(function(){
$(this).click(function(){
sIndex = 0;
sIndex = parseInt(this.rel, 10); //gets the number stored in the rel attribute of link and passes it as starting slide when modal is opened
$('#staffReveal').reveal();
$('#staffSlider').flexslider ({
startAt: sIndex,
manualControls: '.profileNav li a',
controlsContainer: '#staffReveal',
smoothHeight: true,
directionNav: false,
slideshow: false,
animation: 'slide',
namespace: 'staff-',
selector: '.profiles > li'
});
});
});
});
I am using the Flexslider in a modal window. On my page I have several different links and each link corresponds with a slide in the slider. I am using the links' 'rel' attribute to store the slide number that the slider should start each time the modal window pops up based on the link selected.
It is working correctly, but only on the first time I click a link. After the first time, the slider no longer starts at the correct slide. I am guessing it keeping the first clicked link's rel attribute?
Is there a way to reset or re-initiate the slider for each link click?