search

malsup / cycle2

2nd gen cycling
899 stars 236 forks source link

Images disappear using shuffle and page load CSS settings #337

Open maozen opened 10 years ago

maozen commented 10 years ago

I'm using two slideshow in my page and i'm trying to use your FAQ suggestion to avoid that all images are shown during page loading.

But in the first slide show after the first image transition i can see only the image that is in transition and when the transition is completed the image disappear.

After all images are cycled even the image in transition disappear and nothing is showed.

After all images are cycled everything disappear and nothing in showed in the slideshow using shuffle.

The second slideshow is working correctly.

I've tested it with firefox,chrome and IE

you can check the page at the following link :

http://www.yakiniku.it/index-c.htm

I've defined two different rule in CSS

FIRST slideshow

slideshow img { display: none }

slideshow img.first { display: block }

SECOND slideshow

slide-scritte img { display: none }

slide-scritte img.prima { display: block }

and this are the slideshows declaration

FIRST slideshow instructions

            <div id="slideshow" class="cycle-slideshow" 
                data-cycle-fx=shuffle
                data-cycle-shuffle-right="-50"
                data-cycle-shuffle-top="-40"
                data-cycle-reverse=true
                data-cycle-pause-on-hover="true"
                data-cycle-speed="1000"
                data-cycle-timeout="2000"
                data-cycle-center-horz=true
                data-cycle-center-vert=true
                data-index=1>
                    <img src="/images/minislide/img_01.jpg" width="265" height="199" class="first"/>
                    <img src="/images/minislide/img_02.jpg" width="265" height="199" />
                    <img src="/images/minislide/img_03.jpg" width="265" height="199"/>
                    <img src="/images/minislide/img_04.jpg" width="265" height="199"/>
                    <img src="/images/minislide/img_05.jpg" width="265" height="199"/>
                    <img src="/images/minislide/img_06.jpg" width="265" height="199"/>
                    <img src="/images/minislide/img_07.jpg" width="265" height="199"/>
                    <img src="/images/minislide/img_08.jpg" width="265" height="199"/>
                    <img src="/images/minislide/img_09.jpg" width="265" height="199"/>
                    <img src="/images/minislide/img_10.jpg" width="265" height="199"/>
                    <img src="/images/minislide/img_11.jpg" width="265" height="199"/>
                    <img src="/images/minislide/img_11.jpg" width="265" height="199"/>
                    <img src="/images/minislide/img_13.jpg" width="265" height="199"/>
                    <img src="/images/minislide/img_14.jpg" width="265" height="199"/>
            </div>

SECOND slideshow instructions

      <div id="slide-scritte" class="cycle-slideshow" 
                data-cycle-center-horz=true
                data-cycle-center-vert=true
                data-index=2>
                    <img src="/images/minislide/slide2.png" width="600" height="60" class="prima"/>
                    <img src="/images/minislide/slide1.png" width="600" height="60" />
                    <img src="/images/minislide/slide3.png" width="600" height="60" />
      </div>
maozen commented 10 years ago

I've done some further test the problem is on the shuffle. Taking out the shuffle everything works fine.

CaptainSimmo commented 10 years ago

I think I'm having the same problem.

I'm trying to run 2 sideshows on the same page where one of them uses the shuffle plugin. This causes the shuffled slideshow to disappear after the first cycle of the images completes.

Here's a very simple example using 4 images. Once they've all been displayed the shuffled slideshow disappears, (the css file is a copy from the one used on the Cycle2 demo pages).

Test page http://www.soskan.org.uk/testcycle2.html