SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

    See post 41 here for a possible solution.

    Maybe try calling it again after the animation here:

    Code:
    <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'
                });
    	$(".fancybox").fancybox();
            });
        });
        e.preventDefault();
    });
      $(".fancybox").fancybox();  
    });
    </script>

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    In the main page the list are like this:
    Code:
    <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:
    Code:
    <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.

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand what you eman but this is just created by a query. I have no idea why this is happening ?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by donboe View Post
    I understand what you eman but this is just created by a query.
    No it isn't

    You are just loading this html file:


    Code:
            <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).

  10. #10
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •