Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to make these actions flexible (Jquery)

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #45492
    Anonymous
    Inactive

    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/

    #138555
    CrocoDillon
    Participant

    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’));
    });

    #138599
    Anonymous
    Inactive

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

    #138650
    Anonymous
    Inactive

    It works perfectly. thank you.

    #138651
    CrocoDillon
    Participant

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

    #138664
    Anonymous
    Inactive

    @CrocoDillon Thanks i got it working. But can i also add youtube embed videos instead of the image for some panels?

    #138691
    CrocoDillon
    Participant

    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 -_-‘

    #138692
    CrocoDillon
    Participant

    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…

    #138697
    Anonymous
    Inactive

    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.

    #138699
    CrocoDillon
    Participant

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

    #138721
    Anonymous
    Inactive

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

    #139642
    Anonymous
    Inactive

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.