Thread

Hello
First, I’m not sure this is a EE issue – but I thinks so 🙄

I’m using Channel Images to create a image gallery, together with Fancybox. But my problem is that the large image is opened in a new page / tab instead of a lightbox.

I’m trying the single image example, and in the head I have this code:

(script)src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
<link rel="stylesheet" href="{site_url}fancybox/jquery.fancybox.css" type="text/css" media="screen" />
(script)src="{site_url}fancybox/jquery.fancybox.pack.js">

In the body this:

{exp:channel:entries channel="bildbank"}
      <h3>{title}</h3>
<p>      {exp:channel_images:images entry_id="{entry_id}" limit="8" paginate="bottom"}<br />
       <a class="fancybox" href="{image:url:large}" title="{image:title}" id="{image:id}">{image:url:small}</p>

<p>       [removed]<br />
         $(document).ready(function() {<br />
            $('.fancybox').fancybox();<br />
        });<br />
       [removed]<br />
      {/exp:channel_images:images}<br />
    {/exp:channel:entries}

My guess is that it is something wrong with javascript hook(?) – have tried multiple different things with no luck. If I do the same on a bare bone html page (no ee code) it works.

The page can be viewed here: http://arthbilder.se/index.php/bildbank/kategori/makro

Any tips is helpful.

Best regards, Magnus

Take the js hook out of the entries loop and put it in the footer of the site, right before the </body> tag and see if that solves it.

Hello
I did not helped to move the js hook. But I think I read somewhere that multiple calls to a Jquery lib could be problematic. The site is built on Zurb Foundation, so buy removing this line:

(script src="{site_url}javascripts/foundation/jquery.js")(/script)

Everything worked :=)

Regards, Magnus