When the user clicks on the image, open in larger size

Asked

Viewed 2,287 times

1

I have the following HTML:

<li class="editable" name="Galeria">
  <a href="./imagens/galeria.jpg" rel="">
    <img class="mudar" src="./imagens/galeria.jpg" title="" alt="" />
  </a>
</li>

For example, I would like when the user clicked on <a> somehow open a window (colorbox, lightbox?) with the full size image. I’ve never done this by hand, so I’m asking you.

javascript html

  • You need a zoom gallery or want to learn how to make one?

  • I need something like colorbox. It might be some plugin ready. Everything I did in colorbox with in Wordpress. I never had to install one in hand.

1 answer

1

I recommend you the responsive plugin blueimp Gallery, you can download it and inside the zip there will be some examples, it is quite simple, you link the css and js (jquery is necessary), then have a basic script to load the plugin on the page and then just use the html structure that the site gives you of the images... Have a documentation session of the plugin... Any questions, posted here...

I switched to jquery in a project of mine, I believe I can help you... Replacing id link with a link class in the html structure...

$(function(){
            $('.link').each(function(){
                $(this).click(function(event){
                    event = event || window.event;
                    var target = event.target || event.srcElement,
                        link = target.src ? target.parentNode : target,
                        options = {index: link, event: event},
                        links = this.getElementsByTagName('a');
                    blueimp.Gallery(links, options);
                });          
            });
        });

  • Ball show dude, there’s only one problem, in this gallery I structured in ul and li because of another plugin I’m using, and I already use one id in ul, is there any getElementById equivalent for classes?

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.