I use Fancybox and Scrolling Carousel.
Try to make : click $(.subject) into Fancybox > show $(.content) > $(.content) scroll use scrollingCarousel.

I did test works fine separate.

But if I put them together (Demo1).
Why the $(.content) won't load scrollingCarousel?
(but if reload $(.content) page, then scrollingCarousel work.)

So I try to wrote in Fancybox callback (Demo2) afterLoad,beforeLoad,beforeShow... I did test too, still does't work.

(I've test other carousel plugin, same problem.)

Demo 1 jsfiddle

 $(".subject").fancybox({});
 $('.content').scrollingCarousel({});

Demo 2

 $(".subject").fancybox({
     afterLoad: function(){
        $('.content').scrollingCarousel({});
     }
 });

HTML:

<div class="subject">
    <div>
        <a class="subjectlist"rel="1" href="#1">
            <img class="" src=".jpg">
        </a>
    </div>
</div>
<div class="content" id="1">
    <div><img class="" src=".jpg"></div>
    <div><img class="" src=".jpg"></div>
    <div><img class="" src=".jpg"></div>
</div>​

CSS

.content{
    display:none;
    width: 200px;
    height: 200px;
}
.content img{
    width: 200px;
    height: 200px;
}​

Any advice or help would be greatly appreciated.

I use Fancybox and Scrolling Carousel.
Try to make : click $(.subject) into Fancybox > show $(.content) > $(.content) scroll use scrollingCarousel.

I did test works fine separate.

But if I put them together (Demo1).
Why the $(.content) won't load scrollingCarousel?
(but if reload $(.content) page, then scrollingCarousel work.)

So I try to wrote in Fancybox callback (Demo2) afterLoad,beforeLoad,beforeShow... I did test too, still does't work.

(I've test other carousel plugin, same problem.)

Demo 1 jsfiddle

 $(".subject").fancybox({});
 $('.content').scrollingCarousel({});

Demo 2

 $(".subject").fancybox({
     afterLoad: function(){
        $('.content').scrollingCarousel({});
     }
 });

HTML:

<div class="subject">
    <div>
        <a class="subjectlist"rel="1" href="#1">
            <img class="" src="http://farm7.staticflickr./6106/6347065961_bb73745e70_m.jpg">
        </a>
    </div>
</div>
<div class="content" id="1">
    <div><img class="" src="http://farm8.staticflickr./7171/6417719753_374653e28c_b.jpg"></div>
    <div><img class="" src="http://farm7.staticflickr./6106/6347065961_bb73745e70_b.jpg"></div>
    <div><img class="" src="http://farm7.staticflickr./6106/6347065961_bb73745e70_m.jpg"></div>
</div>​

CSS

.content{
    display:none;
    width: 200px;
    height: 200px;
}
.content img{
    width: 200px;
    height: 200px;
}​

Any advice or help would be greatly appreciated.

• javascript
• jquery
• fancybox

• jQuery is only half the problem... where is relevant HTML code? I think Demo 1 is the way to go and you probably have something wrong with your HTML or selectors. – Sparky Commented Nov 9, 2012 at 14:55
• 1 Thanks for reply, this is Demo1 looks like jsfiddle/6VH7w/2 – user1775888 Commented Nov 9, 2012 at 15:47

2 Answers 2

.content is hidden by your CSS with display: none, so you simply have to show it using .show() before invoking the scroller, otherwise it just stays hidden.

http://jsfiddle/6VH7w/3/

$(".subjectlist").fancybox({
    afterLoad: function() {
        $('.content').show().scrollingCarousel({
            scrollerAlignment: 'vertical'
        });
    }
});​

Hellow I made owl carousel 2 and fancybox, added fancybox css, mousewheel and js files. Then I made my items

<div class="owl-carousel owl-theme">
   <div class="item">
       <a class="fancybox" group="fancybox" href="imagen0.png"><img class="img-responsive img-thumbnail center-block" src="imagen0.png" title="SEJ" /></a>
   </div>
   <div class="item">
       <a class="fancybox" group="fancybox" href="imagen1.png"><img class="img-responsive img-thumbnail center-block" src="imagen1.png" title="titulos_imagen" /></a>
   </div>
</div>

I hope this help you.