Grow your CSS skills. Land your dream job.

How to make these actions flexible (Jquery)

  • # June 12, 2013 at 10:08 pm

    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

    You 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

    @CrocoDillon This is what i have exactly and it’s not working.

    HTML

    JQUERY
    $(‘#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

    It works perfectly. thank you.

    # June 13, 2013 at 6:25 pm

    The `data-src` attributes need to be on the thumbnails. Check my previous comment HTML part.

    # June 13, 2013 at 9:07 pm

    @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

    Uhmm… 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

    Trying 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

    I 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

    Yeah that’s what I did right? With the innerHTML stuff of the last comment.

    # June 14, 2013 at 12:11 pm

    I did that too but for some reason it’s not displaying

    # June 20, 2013 at 2:43 pm

    @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?

    # June 20, 2013 at 7:54 pm

    I’ll have a look tomorrow, just got home from cinema. Did you manage to get video working?

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".