- This topic is empty.
-
AuthorPosts
-
June 12, 2013 at 10:08 pm #45492AnonymousInactive
I’m creating an image gallery and want to be able to add new images and perform the same actions which is revealing the full image. I want the user to simply add more image tiles and the full image on the HTML file and the function where the full photo is revealed is automatic with the jQuery and is applied to the newly added images without even touchig the jquery. Something that’s kinda like this where every tile has the same animation and when new tiles are added, the animation still applies to those. http://codepen.io/unasAquila/pen/zbkgx
And here is what i’m trying to do with every image tile which is reveling the larger image that corresponds to the image tile clicked.
http://reallycoolstuff.net/PROJECTS/official/June 13, 2013 at 3:41 am #138555CrocoDillonParticipantYou can make a global click listener like this:
$(‘#gallery_section’).on(‘click’, ‘.gallery_content’, function() {
// do stuff
});then you can add more content even after document load. I’d go with some easier way to parse the data you need, instead of _one, _two etc (for example use `data-src` attribute). You don’t need all the images in the `#image_container`, you can just change the src attribute.
HTML:
`
`
jQuery:
$(‘#gallery_section’).on(‘click’, ‘.gallery_content’, function() {
$(‘#image_container > img’).attr(‘src’, $(this).data(‘src’));
});June 13, 2013 at 10:57 am #138599AnonymousInactive@CrocoDillon This is what i have exactly and it’s not working.
HTML
Videos & Images GalleryJQUERY
$(‘#gallery_section’).on(‘click’, ‘.gallery_content’, function() {
$(‘#image_container > img’).attr(‘src’, $(this).data(‘src’));
});$(“.gallery_content”).click(function() {
$(“#image_container”).slideDown();
});Sorry but i’m having trouble showing the code. I updates the site with your code so you can see it there.
June 13, 2013 at 6:18 pm #138650AnonymousInactiveIt works perfectly. thank you.
June 13, 2013 at 6:25 pm #138651CrocoDillonParticipantThe `data-src` attributes need to be on the thumbnails. Check my previous comment HTML part.
June 13, 2013 at 9:07 pm #138664AnonymousInactive@CrocoDillon Thanks i got it working. But can i also add youtube embed videos instead of the image for some panels?
June 14, 2013 at 6:12 am #138691CrocoDillonParticipantUhmm… yeah maybe. Maybe go back to having all the images, videos, and what else already in your image_container and just use the index of the clicked element to show that index in the image_container. Alternatively: http://www.codepen.io/anon/full/ApHDn
Wtf? Only works in FF -_-‘
June 14, 2013 at 6:28 am #138692CrocoDillonParticipantTrying something like:
`var imageContainer = document.getElementById(‘image_container’);
$(‘#gallery_section’).on(‘click’, ‘.gallery_content’, function() {
if ($(this).data(‘type’) == ‘video’)
imageContainer.innerHTML =
‘‘;
else
imageContainer.innerHTML = ‘‘;
});`which works for images but not for youtube vids…
June 14, 2013 at 7:27 am #138697AnonymousInactiveI need t have it work for videos too :P i thought that simply pasting the embed code in the image container frame would work.
June 14, 2013 at 8:01 am #138699CrocoDillonParticipantYeah that’s what I did right? With the innerHTML stuff of the last comment.
June 14, 2013 at 12:11 pm #138721AnonymousInactiveI did that too but for some reason it’s not displaying
June 20, 2013 at 2:43 pm #139642AnonymousInactive@crocoDillon Is the a way to add text that goes along with the images being clicked and switch automatically when new ones are added along with their corresponding text using your code?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.