I am learning jQuery and I want to implement an image randomizer.
I have a list of images that need to be displayed. I want them to be displayed randomly.
This is what I have implemented, but it sill has not satisfied me:
/** Initialisierung*/
function showFotos() {
// Nummern der Bilder im Verzeichnis 'images'
start_nr = 1;
end_nr = 5;
// Bilder eventuell vorladen
for (i=start_nr; i<=end_nr; i++ ) {
preload_img = new Image();
preload_img.src = 'images/' + i + '.jpg';
}
// #show-1, #show-2, #show-3 bekommen einen zunächst 'leeren' img-tag mit den Dimensionen der Bilder zugefügt
$('#show-1').append('<img src="" width="250" height="250" />');
// Diese Function wird einmalig aufgerufen und somit Start-Bilder initialisiert
randomize();
}
// Random Funktion -> kleinster, grösster Wert
function randomXToY(minVal,maxVal,floatVal) {
var randVal = minVal+(Math.random()*(maxVal-minVal));
return typeof floatVal=='undefined'?Math.round(randVal):randVal. toFixed(floatVal);
}
// die 'Slotmachine'
function randomize() {
// die fünf Slots
for (i=1; i<=5; i++ ) {
// Zufallszahl
num = randomXToY(start_nr, end_nr);
// Zufallszahl = Bildnummer
$('#show-' + i + ' img').attr('src', 'images/' + num + '.jpg');
}
This is what I want:
When I click on "continue", the next image will be displayed.
When I click on back, the further image will be displayed.
How can I do it?
UPDATE!!!! I solved the problem!!!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
#items {
position : relative;
width : 400px;
height : 200px;
top : 20px;
left : 20px;
}
.item {
position : absolute;
border : 1px solid #ccc;
width : 398px;
height : 198px;
display :none;
text-align : right;
font-size : 40px;
}
.first{
display : block;
}
#controls {
margin-top : 30px;
}
li {
display : inline-block;
padding : 5px;
border : 1px solid #ccc;
background-color : #eee;
cursor : pointer;
}
#play {
display : none;
}
.first#item1 {
background-image: url(D:/images/images1.jpg);
background-repeat: no-repeat;
width : 398px;
height : 198px;
}
.item#item2 {
background-image: url(D:/images/images2.jpg);
background-repeat: no-repeat;
width : 398px;
height : 198px;
}
.item#item3 {
background-image: url(D:/images/images2.jpg);
background-repeat: no-repeat;
width : 398px;
height : 198px;
}
.item#item4{
background-image: url(D:/images/images4.jpg);
background-repeat: no-repeat;
width : 398px;
height : 198px;
}
.item#item5{
background-image: url(D:/images/images5.jpg);
background-repeat: no-repeat;
width : 398px;
height : 198px;
}
</style>
<script>
$(function() {
//To store timeout id
var timeoutId;
var slideImage = function( step ) {
if ( step == undefined ) step = 1;
//Clear timeout if any
clearTimeout ( timeoutId );
//Get current image's index
var indx = $('.item:visible').index('.item');
//If step == 0, we don't need to do any fadein our fadeout
if ( step != 0 ) {
//Fadeout this item
$('.item:visible').fadeOut();
}
//Increment for next item
indx = indx + step ;
//Check bounds for next item
if ( indx >= $('.item').length ) {
indx = 0;
} else if ( indx < 0 ) {
indx = $('.item').length - 1;
}
//If step == 0, we don't need to do any fadein our fadeout
if ( step != 0 ) {
//Fadein next item
$('.item:eq(' + indx + ')').fadeIn();
}
//Set Itmeout
timeoutId = setTimeout ( slideImage, 5000 );
};
//Start sliding
slideImage(0);
//When clicked on prev
$('#prev').click(function() {
//slideImage with step = -1
slideImage ( -1 );
});
//When clicked on next
$('#next').click(function() {
//slideImage with step = 1
slideImage ( 1 );
});
//When clicked on Pause
$('#pause').click(function() {
//Clear timeout
clearTimeout ( timeoutId );
//Hide Pause and show Play
$(this).hide();
$('#play').show();
});
//When clicked on Play
$('#play').click(function() {
//Start slide image
slideImage(0);
//Hide Play and show Pause
$(this).hide();
$('#pause').show();
});
});
</script>
</head>
<body>
<div id='items'>
<div id= 'item1' class='item first'>item 1</div>
<div id= 'item2' class='item'>item2</div>
<div id= 'item3' class='item'>item3</div>
<div id= 'item4' class='item'>item4</div>
<div id= 'item5' class='item'>item5</div>
</div>
<ul id='controls'>
<li id='prev'> << Zurueck</li>
<li id='next'>Weiter >> </li>
</ul>
</body>
</html>
It works very good but not with fire fox...I don't know why...
