Strange behavior jQuery Fancybox

For a photo gallery I am using jQuery Fancybox, but something strange is happening. When you land on that particular page you will see all photos from the gallery. On the right hand side is a menu with different categories. Like I said when you land on the page all photos will show and Fancybox is working perfectly, but when you click on one of the categories (e.a. Restaurant, Eten) Fancybox isn’t working any longer, instead the photo opens in a new page. You can see what I mean here.

Does anyone know why this is happening?

Thank you in advance!

Hi,

You are loading new content into that section that fancybox doesn’t know about so you will need to re-initialise the fancybox every time you load new content I think :slight_smile:

See post 41 here for a possible solution.

Maybe try calling it again after the animation here:


<script type="text/javascript">
$(document).ready(function() {
$(".menu").on("click", "a", function (e) {
    var $targetDiv = $('.content');
    var $targetDiv2 = $('.gallery');
				$targetDiv.css({
							'height': $targetDiv.height(),
							'opacity': '0'
				});
    $targetDiv2.load(this.href, function () {
        var newheight = $targetDiv2.height();
        $targetDiv.animate({
            height: newheight,
												opacity:1
        }, 1000, "linear", function () {
            $targetDiv.css({
                height: 'auto'
            });
	[B]$(".fancybox").fancybox();
[/B]        });
    });
    e.preventDefault();
});
  $(".fancybox").fancybox();  
});
</script>


Hi Paul. Thank you for the response and the link to the article. I tried what you suggested but that isn’t working. I have been reading articles for the last few hours but most of them are referring to the usual AJAX calls ajax({ }) where I use .load method. I found one article though that came quite near to my situation as you can see here. but that didn’t do the trick either. What would you suggest?

Thank you in advance!

Hi,

You seemed to have changed your gallery page so I can’t really test any more as you don’t have any content being added dynamically. I’m sure the solution I posted would have been on the right track.

Have you abandoned the idea or just changed the page for now?

I’ve just created a very rough example linking to a lot of your files here:

http://www.pmob.co.uk/temp/gallery-test/donboe.htm

Strangely enough it seems to work without any fixes so I will need to see what you had before to find out why it didn’t work for you.

Let me know when you have viewed the demo to check and I will remove it from my server.

Hi Paul. I am very sorry for the inconvenience! I needed to show something to the client so I temporary took out the menu. I just put it back the way it was! For me there is no difference still/ What I notice though is that when I look at your page source I see the entire jquery.fancybox plugin while looking at my page source I just see the link to the plugin. Also when changing the content from the gallery in my page the css of the gallery is gone! Please have a look again!

Hi,

You aren’t inserting the correct html in that example.

In the main page the list are like this:


<li><span><a href="gallery/photos/restaurant001.jpg" data-fancybox-group="gallery" class="fancybox"><img src="gallery/thumbnails/restaurant001.jpg"></a></span></li>

However in the newly loaded html you only have this:


<li><a href="gallery/photos/food001.jpg"><img src="gallery/thumbnails/food001.jpg"></a></li>

You must have the same html with the same elements and classes etc but just different image paths.

I understand what you eman but this is just created by a query. I have no idea why this is happening ?

No it isn’t :slight_smile:

You are just loading this html file:


        <li><a href='gallery/photos/restaurant001.jpg'><img src='gallery/thumbnails/restaurant001.jpg'></a></li><li><a href='gallery/photos/restaurant002.jpg'><img src='gallery/thumbnails/restaurant002.jpg'></a></li><li><a href='gallery/photos/restaurant003.jpg'><img src='gallery/thumbnails/restaurant003.jpg'></a></li><li><a href='gallery/photos/restaurant004.jpg'><img src='gallery/thumbnails/restaurant004.jpg'></a></li><li><a href='gallery/photos/restaurant005.jpg'><img src='gallery/thumbnails/restaurant005.jpg'></a></li><li><a href='gallery/photos/restaurant006.jpg'><img src='gallery/thumbnails/restaurant006.jpg'></a></li><li><a href='gallery/photos/restaurant007.jpg'><img src='gallery/thumbnails/restaurant007.jpg'></a></li><li><a href='gallery/photos/restaurant008.jpg'><img src='gallery/thumbnails/restaurant008.jpg'></a></li><li><a href='gallery/photos/restaurant009.jpg'><img src='gallery/thumbnails/restaurant009.jpg'></a></li>

It’s just html for a series of list items (unless you have generated that dynamically from somewhere else).

Notwithstanding the above , the file just needs to be in the same format as the normal page (and as in my example).

Hi Paul sorry for my late response… That gallery was driving me crazy so I left it for a day and made a fresh start this morning. I started completely from scratch and now it’s working. I don’t see what I have done differently from the first approach. Thank you for all your input and help