Wedge

Public area => The Pub => Off-topic => Topic started by: MultiformeIngegno on September 28th, 2011, 07:05 PM

Title: Randomizing a jQuery slideshow
Post by: MultiformeIngegno on September 28th, 2011, 07:05 PM

Hi everybody! I found out this(http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited) script for jQuery that allows to have a nice slideshow with different captions for each slide.
Here's my demo(http://"http://lorenzoraffio.com/slideshow2/"), everything works fine except the "random" slides (with their captions though, not mixed!!) function...

In the comments a user says:

Quote

Make a random number, and then address a list item with li:eq(X) as seen here:

$('ul.slideshow li:eq('+randNum+')').addClass('show');

By the way, that line also fixes a bug if you don't start with a li that has class="show" (which you wouldn't if you are randomly starting). If that class isn't added to the one that you randomly start with, it will keep "popping up" between fades on the other list items, until the slide show gets around to the second display of the image when it applies
current.animate({opacity: 0.0}, 500).removeClass('show');

So I added these lines (as author also said):

Quote

//Generate a random number
var randNum = Math.floor(Math.random() * $('ul.slideshow li').length);
 
//Randomly pick up a slide
$('ul.slideshow li:eq('+randNum+')').addClass('show');

But it didn't work... Captions and slides get mixed and it's a mess..

May I ask your help..?
Thanks!!!!

Title: Re: Randomizing a jQuery slideshow
Post by: Nao on September 29th, 2011, 12:03 AM

It works for me, but I wouldn't know about the random aspect of your item list..?

Title: Re: Randomizing a jQuery slideshow
Post by: MultiformeIngegno on September 29th, 2011, 11:11 AM

What does work for you? The "normal" slideshow, or also the "randomization" thing? If the latter could you please post the code (maybe I added the rand code in the wrong place?)..?

Title: Re: Randomizing a jQuery slideshow
Post by: Nao on September 29th, 2011, 12:04 PM

What I'm saying is that I'm not seeing any randomization code in your HTML source...

Title: Re: Randomizing a jQuery slideshow
Post by: MultiformeIngegno on September 29th, 2011, 12:21 PM

Uh.. I thought I just needed those 2 lines (randNum) in the script... what should I add in the HTML?

Title: Re: Randomizing a jQuery slideshow
Post by: Nao on September 29th, 2011, 01:01 PM

Where in the script did you put them...? Seriously, you didn't put anything into your script.

Noob! :niark:

Title: Re: Randomizing a jQuery slideshow
Post by: MultiformeIngegno on September 29th, 2011, 01:11 PM

No, no! :P
The demo link was just the "normal" (working) version.. not the one with the "randomization" code in... Here it is(http://lorenzoraffio.com/slideshow2/index2.html). As you can see... it's a mess... :P

Posted: September 29th, 2011, 01:08 PM

Captions aren't the ones related to their images and at some point they disappear (but slides remains..).

Title: Re: Randomizing a jQuery slideshow
Post by: Nao on September 29th, 2011, 01:56 PM

Did you try removing the class="show" from the HTML code on the first item...? Because at this point it has two show classes, doesn't it?

Title: Re: Randomizing a jQuery slideshow
Post by: MultiformeIngegno on September 29th, 2011, 09:48 PM

Quote from Nao on September 29th, 2011, 01:56 PM

Did you try removing the class="show" from the HTML code on the first item...? Because at this point it has two show classes, doesn't it?

Tried but it's the same(http://lorenzoraffio.com/slideshow2/index2.html).. :(

Title: Re: Randomizing a jQuery slideshow
Post by: Nao on September 29th, 2011, 09:55 PM

Make sure to call gallery(); after you addClass('show') at the end of your first function. Otherwise it won't take the show class into account, I suppose...

Title: Re: Randomizing a jQuery slideshow
Post by: MultiformeIngegno on September 29th, 2011, 10:22 PM

Quote from Nao on September 29th, 2011, 09:55 PM

Make sure to call gallery(); after you addClass('show') at the end of your first function. Otherwise it won't take the show class into account, I suppose...

Uhm.. it's a bit better (slides are ok) but the problem now is with captions (they disappear, at the beginning or at some point...). :(

Title: Re: Randomizing a jQuery slideshow
Post by: Nao on September 29th, 2011, 10:35 PM

Sorry, I have no time to go further into this... :-/

Title: Re: Randomizing a jQuery slideshow
Post by: MultiformeIngegno on September 30th, 2011, 12:34 AM

Don't worry! Thanks!!! :)

Title: Re: Randomizing a jQuery slideshow
Post by: MultiformeIngegno on October 1st, 2011, 12:37 AM

I finally got it working. It's the dirtiest way EVER.
I used another similar slideshow script (s3Slider).

This goes in <head>:

Code: [Select]

<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 6000
        });
        $('#slider1').s3Slider({
            timeOut: 4000
        });
        $('#slider2').s3Slider({
            timeOut: 4000
        });
    });
</script>

Among with this: http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/s3slider.js
... and a stylesheet: http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/s3slider.css

Here comes the dirtiest hack.. where I need my images I added:

Code: [Select]

<div id="slider">
                    <ul id="sliderContent">

<?php
$header = array(
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_magna.jpg', 'CAPTION AULA MAGNA', 'right'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/portone.jpg', 'CAPTION PORTONE', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/labchimica.jpg', 'CAPTION LAB CHIMICA', 'top'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_informatica.jpg', 'CAPTION INFORMATICA', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/atrio.jpg', 'CAPTION ATRIO', 'top'),
);

$rand = rand(0, count($header) - 1);
echo '<li class="sliderImage"><img src="', $header[$rand][0], '" width="', HEADER_IMAGE_WIDTH, '" height="', HEADER_IMAGE_HEIGHT, '" alt="" /><span class="', $header[$rand][2], '">', $header[$rand][1], '</span></li>';

$header2 = array(
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_magna.jpg', 'CAPTION AULA MAGNA', 'right'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/portone.jpg', 'CAPTION PORTONE', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/labchimica.jpg', 'CAPTION LAB CHIMICA', 'top'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_informatica.jpg', 'CAPTION INFORMATICA', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/atrio.jpg', 'CAPTION ATRIO', 'top'),
);

$rand = rand(0, count($header2) - 1);
echo '<li class="sliderImage"><img src="', $header2[$rand][0], '" width="', HEADER_IMAGE_WIDTH, '" height="', HEADER_IMAGE_HEIGHT, '" alt="" /><span class="', $header2[$rand][2], '">', $header2[$rand][1], '</span></li>';


$header3 = array(
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_magna.jpg', 'CAPTION AULA MAGNA', 'right'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/portone.jpg', 'CAPTION PORTONE', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/labchimica.jpg', 'CAPTION LAB CHIMICA', 'top'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_informatica.jpg', 'CAPTION INFORMATICA', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/atrio.jpg', 'CAPTION ATRIO', 'top'),
);

$rand = rand(0, count($header3) - 1);
echo '<li class="sliderImage"><img src="', $header3[$rand][0], '" width="', HEADER_IMAGE_WIDTH, '" height="', HEADER_IMAGE_HEIGHT, '" alt="" /><span class="', $header3[$rand][2], '">', $header3[$rand][1], '</span></li>';


$header4 = array(
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_magna.jpg', 'CAPTION AULA MAGNA', 'right'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/portone.jpg', 'CAPTION PORTONE', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/labchimica.jpg', 'CAPTION LAB CHIMICA', 'top'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_informatica.jpg', 'CAPTION INFORMATICA', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/atrio.jpg', 'CAPTION ATRIO', 'top'),
);

$rand = rand(0, count($header4) - 1);
echo '<li class="sliderImage"><img src="', $header4[$rand][0], '" width="', HEADER_IMAGE_WIDTH, '" height="', HEADER_IMAGE_HEIGHT, '" alt="" /><span class="', $header4[$rand][2], '">', $header4[$rand][1], '</span></li>';


$header5 = array(
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_magna.jpg', 'CAPTION AULA MAGNA', 'right'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/portone.jpg', 'CAPTION PORTONE', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/labchimica.jpg', 'CAPTION LAB CHIMICA', 'top'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_informatica.jpg', 'CAPTION INFORMATICA', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/atrio.jpg', 'CAPTION ATRIO', 'top'),
);

$rand = rand(0, count($header5) - 1);
echo '<li class="sliderImage"><img src="', $header5[$rand][0], '" width="', HEADER_IMAGE_WIDTH, '" height="', HEADER_IMAGE_HEIGHT, '" alt="" /><span class="', $header5[$rand][2], '">', $header5[$rand][1], '</span></li>';


$header6 = array(
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_magna.jpg', 'CAPTION AULA MAGNA', 'right'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/portone.jpg', 'CAPTION PORTONE', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/labchimica.jpg', 'CAPTION LAB CHIMICA', 'top'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_informatica.jpg', 'CAPTION INFORMATICA', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/atrio.jpg', 'CAPTION ATRIO', 'top'),
);

$rand = rand(0, count($header5) - 1);
echo '<li class="sliderImage"><img src="', $header6[$rand][0], '" width="', HEADER_IMAGE_WIDTH, '" height="', HEADER_IMAGE_HEIGHT, '" alt="" /><span class="', $header6[$rand][2], '">', $header6[$rand][1], '</span></li>';
?>
                        <li class="sliderImage">
                        </li>
                    </ul>
                </div>


AND IT WORKS(http://virgilio.lorenzoraffio.com)! :whistle:

Is there another method instead of having this shitty code..? :P
Any help ( let's leave Nao is peace! :) ) is really appreciated! ;)

Title: Re: Randomizing a jQuery slideshow
Post by: Nao on October 1st, 2011, 01:35 AM

You should be showing your pics in order after the first randomization. I noticed several pics being faded out only to show up again next...

Title: Re: Randomizing a jQuery slideshow
Post by: MultiformeIngegno on October 1st, 2011, 01:54 AM

Quote from Nao on October 1st, 2011, 01:35 AM

You should be showing your pics in order after the first randomization. I noticed several pics being faded out only to show up again next...

Uhm.. but what should be the order if I don't know what the 1st random image will be?

This is the code (1st image is random, then the "normal" order):

Code: [Select]

<div id="slider">
                    <ul id="sliderContent">

<?php
$header = array(
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_magna.jpg', 'CAPTION AULA MAGNA', 'right'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/portone.jpg', 'CAPTION PORTONE', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/labchimica.jpg', 'CAPTION LAB CHIMICA', 'top'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/aula_informatica.jpg', 'CAPTION INFORMATICA', 'bottom'),
   array('http://virgilio.lorenzoraffio.com/wp-content/themes/virgilio/images/header/atrio.jpg', 'CAPTION ATRIO', 'top'),
);

$rand = rand(0, count($header) - 1);
echo '<li class="sliderImage"><img src="', $header[$rand][0], '" width="', HEADER_IMAGE_WIDTH, '" height="', HEADER_IMAGE_HEIGHT, '" alt="" /><span class="', $header[$rand][2], '">', $header[$rand][1], '</span></li>'; ?>


                        <li class="sliderImage">
                            <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/header/aula_magna.jpg" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                            <span class="right"><strong>L'aula magna</strong><br />CAPTION AULA MAGNA</span>
                        </li>
                        <li class="sliderImage">
                            <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/header/portone.jpg" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                            <span class="bottom"><strong>Il portone</strong><br />CAPTION PORTONE</span>
                        </li>
                        <li class="sliderImage">
                            <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/header/aula_informatica.jpg" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                            <span class="top"><strong>Laboratorio di Chimica</strong><br />CAPTION LAB CHIMICA</span>
                        </li>
                        <li class="sliderImage">
                            <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/labfisica.jpg" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                            <span class="top"><strong>Laboratorio di Fisica</strong><br />CAPTION INFORMATICA</span>
                        </li>
                        <li class="sliderImage">
                            <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/header/atrio.jpg" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                            <span class="top"><strong>Atrio</strong><br />CAPTION ATRIO</span>
                        </li>

                        <li class="sliderImage">
                        </li>
                    </ul>
                </div>

If the 1st (random) image is "Aula magna", the non-random list have still "Aula magna" as the 1st item.. So I'll have again the same slides one after the other..