This project is read-only.

How to implement a click event

May 5, 2012 at 5:13 PM
Edited May 6, 2012 at 12:26 AM

Hi!

I am very new to javascript and in real I am a Linux kernel driver developer and C++ programmer. But I could integrate your very nice plugin into my homepage. I have now a working slide show. THANKS!

I want to implement a big picture view, if you click on the current shown picture like "fancyBox" does it. Here you can have a look what I mean "http://fancyapps.com/fancybox/#examples". Scroll down to Examples and click on the 2nd picture (light flower). To be more precise, I want to have both, the gallery with the small thumbs, changing the big picture above them and then if you click the image the current image shall be displayed much bigger to be able to see more details.

I tried to combine "fancybox" with "ad-gallery", but I couldn't make it work and I guess this is the wrong way. It is better to add this feature to "ad-gallery" to a click event on the current big picture. But I have no glue how to do this. Now you come into play ;-)

Any hints to implement this or maybe plans to implements such a feature into "ad-gallery" soon?

THX, Jasmin

May 6, 2012 at 8:47 AM

Hi,

I probably won't be including something like this into AD Gallery. Since it would be pretty hard for me to predict what people want the gallery to do when you click on the big image, it's better to integrate AD Gallery with another plugin that does just what you need. It should be pretty simple to do so. Here is some code that listens on the click event on the big image, and alerts the url of the current visible image.

$(".ad-image-wrapper").click(function() {
  alert($(this).find("img").attr("src"));
});

May 6, 2012 at 5:23 PM

THX for the suggestion.

I was able to implement the click event in my slide show. But now the next and prev buttons
show me the alert, an not only the picture, if I click on it.

This is clear, because the alert is bound to ad-image-wrapper, which is the parent of ad-prev/next.
I tried to define a new area (ad-picture-click) between ad-prev/next, but this did not work. I guess
because I would need it to bind in initNextAndPrev to ad-image-wrapper.

I don't want to change your code, so I ask is there a simple way to extend initNextAndPrev or can
I use a hook function to do it. Or is there a better way to implement this?

I guess the best would be a hook function from AD Gallery, which gets executed, if someone clicks
the image and a default hook which does nothing. Moreover, it could be so intelligent, that the
mouse changes to "clickable" style only, if the hook is defined. If I could write JavaScript, I would try
to implement it and send a patch, but I speak only C/C++ ;-)

May 7, 2012 at 6:18 AM

Hi,

Try this instead:

$(".ad-image").live("click", function() {
  alert($(this).find("img").attr("src"));
});
The difference is that it only listens to the click events on the image, but it uses jQuerys live method since the ad-image element is destroyed and recreated each time a new image is displayed.

May 8, 2012 at 5:13 PM

THX, this worked!

Now I can try to connect it to fancybox, I guess.
Any suggestions how I can change the mouse cursor on the image, so that the people know it is clickable?

May 8, 2012 at 5:58 PM

This CSS should do the trick:

.ad-image { cursor: pointer; }

May 8, 2012 at 8:54 PM
Edited May 8, 2012 at 8:55 PM

PERFECT, now I have the cursor!

The .live method is deprecated in jQuery 1.7+. So I used this:

$(document).on("click", ".ad-image", function() {
   alert($(this).find("img").attr("src"));
});

Now I need a lot of time with integrating fancybox.

!!! THANK YOU VERY MUCH FOR YOUR PLUGIN !!!

May 9, 2012 at 8:10 AM

Didn't know about the deprecation of live, good to know!

Thanks for your feedback, glad to hear it worked out for you.

May 10, 2012 at 11:22 PM
Edited May 10, 2012 at 11:23 PM

If someone is interested to combine a picture gallery made with Ad Gallery via the click event with fancyBox to
open a big picture, here is the code:

<script type="text/javascript" src="/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/jquery.ad-gallery.min.1.2.5.js"></script>

<link rel="stylesheet" href="/jquery.fancybox.2.0.6.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="/jquery.fancybox.2.0.6.pack.js?v=2.0.6"></script>

<script type="text/javascript">
  /* ad galery init */
  $(function() {
    var galleries = $('.ad-gallery').adGallery();
  });

  /* open fancy box with a click to the picture */
  $(document).ready(function(){
    /* for jQuery 1.7+ live is no longer supported */
    $(document).on("click", ".ad-image", function() {
      $.fancybox.open({
        href : $(this).find("img").attr("src"),
        closeBtn: false,
        closeClick : true,
        openEffect : 'elastic',
        openSpeed  : 150,
        closeEffect : 'elastic',
        closeSpeed  : 150,
        helpers : {
          overlay : null
        }
      });
    });
  });
</script>

fancyBox can be loaded here: http://fancyapps.com/fancybox

Here is the result: http://jasmin.anw.at/tauchen/projekte/druck_kammer_bilder_1.html
(Sorry, currently the English version is not ready)

May 12, 2012 at 9:25 AM

Thanks for the code! I stole it and added it to the documentation here as an example of how to you can integrate AD Gallery with Fancybox.