Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Davis Rousseau
6,670 PointselevateZoom Gallery add more than one
Trying to add more than one gallery on one page. I'm using elevateZoom plugin http://codepen.io/davisrousseaudesign/pen/LEbdLO
4 Answers
Iain Simmons
Treehouse Moderator 32,305 PointsHere's a CodePen with a bunch of modifications that you can make to improve this
Sorry, I might have gone a little overboard and changed a whole bunch of things... I've commented where I've made a change to try and explain why, but it might be quite different to the code you have.
Ryan Field
Courses Plus Student 21,242 PointsHi, Davis! It looks like you've got this solved on your codepen! Awesome work! :)
Davis Rousseau
6,670 PointsAt Ryan it doesn't work exactly how I want it to work. Try pushing on the thumbnails.
Iain Simmons
Treehouse Moderator 32,305 PointsIt seems to be working in the CodePen you've shared, with the only bugs/issues being that you're hiding all elements with the class of fullarticle within both of the click event handlers, and your second set of .fullarticle divs have IDs of #articlep4, #articlep5 and #articlep6, but your script is looking for #articlep1, #articlep2 and #articlep3.
So if you click on one of the #gallery_10 links, it will hide any .fullarticle divs within #gallery_09, and will look for the '#articlep' + (i+1) element.
You can either change out the second lot of .fullarticle divs to use a different class (makes styling a headache), wrap another div around each group of .fullarticle divs so you can get just the children of that div, or change the ID prefix so you can use the Attribute Contains Prefix Selector to get the right ones (like $('[id|="advanced"]')for #advanced-1, #advanced-2, #advanced-3).
Oh and you also have two divs in there with the ID of article1.
Davis Rousseau
6,670 PointsAt Iain I went the different class route. Not the best solution.I can't seem to figure out the other solution. Thanks