When the user clicks on the image, open it at full size

Question

When the user clicks on the image, open it at full size

Navigation

#1 by (1 votes)

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 that when the user clicks on <a> somehow open a window (colorbox, lightbox?) with the image in full size. I've never done it at hand, so I'm asking.

javascript html

asked by anonymous 12.03.2015 / 22:20

1 answer

MessageBox with autoclose How to export data to eBay? [PHP / JSON]

score 1 · Answer 1

I recommend the blueimp Gallery plugin, you can download it and within the zip there will be some examples, it's okay simple, you link to css and js (jquery is necessary), then you have a basic script to load the plugin on the page and then just use the html structure that the site gives you the images ... It has a plugin documentation session ... Any questions, put here ...

I changed to jquery in a project of mine, I believe it can help you ... Replacing the id link by a link class in 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);
                });          
            });
        });