Fancybox + Anythingslider image duplicate

[icy]

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






Client


Super Jellyfish




















$(".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	: {}

}





});

[Mottie]

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

[icy]

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

[Author]

Posts