Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Fancybox + Anythingslider image duplicate

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #38861
    icy
    Member

    Hi guys,this is my first post on CSS trick hope I have posted this in the right place.

    I am in the process of rebuilding my website, using Anythingslider + Fancybox for my portfolio section but its currently duplicating same image twice. You can see what I mean here, scroll down to the folio section and click on the first image:

    http://francisthedesigner.com/dev/

    When I took it out of the Anythingslider the fancybox work as it should without duplicating image which confuses me, also I am not too sure which bit of the code is generating “#&panel1-1&panel2-1” to the end of the URL. As you can tell I am no good at solving javascript issues but I am very keen to solve this issue.. Any help would be appreciated.

    Here’s the HTML/JS code if it helps









    • Description


      An extract of my showreel about Go Up Communications’s works for fashion industry.




      Role


      Art Direction, Graphic Design, HTML5, CSS, Javascript, WP












    $(".fancybox").fancybox({
    prevEffect : 'true',
    nextEffect : 'true',

    closeBtn : true,
    arrows : true,
    nextClick : true,

    helpers: {
    title : {
    type : 'outside'
    },
    overlay : {
    speedIn : 500,
    opacity : 0.95
    },
    thumbs : {
    width: 75,
    height: 50
    },
    title : {
    type : 'inside'
    },
    //buttons : {}
    }


    });

    #105944
    Mottie
    Member

    The problem is because AnythingSlider clones the first and last slide to allow for a smooth transition between the last-to-first and first-to-last slides.

    To fix this problem just change your fancybox selector to avoid the cloned slides:

    $("#slider li:not(.cloned) .fancybox").fancybox({

    Very nice site by the way! I just have a suggestion, since the hash tags seem out of place. Check out this demo on how to use AnythingSlider’s callbacks to change the hash tag. Then you can do other things with the hash tag to better point people to specific sections of your site :)

    #106020
    icy
    Member

    Magic! Thanks Mottie, you solved my last problems, the website will be going live in the next couple days. Cheers for that man :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.