Randomizing a jQuery slideshow

MultiformeIngegno

  • Posts: 1,337
Randomizing a jQuery slideshow
« on September 28th, 2011, 07:05 PM »
Hi everybody! I found out this script for jQuery that allows to have a nice slideshow with different captions for each slide.
Here's my demo, 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!!!!

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Randomizing a jQuery slideshow
« Reply #1, on September 29th, 2011, 12:03 AM »
It works for me, but I wouldn't know about the random aspect of your item list..?

MultiformeIngegno

  • Posts: 1,337
Re: Randomizing a jQuery slideshow
« Reply #2, 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?)..?

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Randomizing a jQuery slideshow
« Reply #3, on September 29th, 2011, 12:04 PM »
What I'm saying is that I'm not seeing any randomization code in your HTML source...

MultiformeIngegno

  • Posts: 1,337
Re: Randomizing a jQuery slideshow
« Reply #4, 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?

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Randomizing a jQuery slideshow
« Reply #5, 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:

MultiformeIngegno

  • Posts: 1,337
Re: Randomizing a jQuery slideshow
« Reply #6, 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. 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..).

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Randomizing a jQuery slideshow
« Reply #7, 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?

MultiformeIngegno

  • Posts: 1,337

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Randomizing a jQuery slideshow
« Reply #9, 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...

MultiformeIngegno

  • Posts: 1,337
Re: Randomizing a jQuery slideshow
« Reply #10, 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...). :(

Nao

  • Dadman with a boy
  • Posts: 16,079

MultiformeIngegno

  • Posts: 1,337
Re: Randomizing a jQuery slideshow
« Reply #13, on October 1st, 2011, 12:37 AM »Last edited on October 1st, 2011, 12:46 AM by MultiformeIngegno
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(0count($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(0count($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(0count($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(0count($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(0count($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(0count($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! :whistle:

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

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Randomizing a jQuery slideshow
« Reply #14, 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...