...

View Full Version : How to implement slideshow with too many images



alitscha
07-25-2011, 01:46 PM
Hi everybody, I have written a javascript slideshow with pause-play-next-previous buttons, but the images are too many and users have to wait too long especially with slower connections - i wonder if anybody can suggest a way to implement the script with fast preloading of the first few images, increment preloading or a similar trick. I will copy my code below but i also copy first this link:

http://www.javascriptkit.com/script/script2/incrementslide.shtml

which is an example of increment loading slideshow working fine! my problem is i am quite new to javascript and i wouldnt know how to customize it in order to take away the link function, that i dont need, and add captions and buttons etc.

Any advice in one of the two directions (working on my own script below or customizing the linked one above) would be very very appreciated!
Also alternative ideas (i.e. some solutions using pure CSS) are welcome!
I do know some jquery plugin could do but i am trying to go more into the code, even though i still need a lot of advices and tutorials, the goal is solving this specific problem but also learning! Thx a lot in advance.

Here my code (just 2 images here in the list to make it shorter for you, the complete list is more than 50 pics!):


<script language="JavaScript">
<!--
var interval = 8000;
var random_display = 0;
var imageDir = "portraits/";
var imageNum = 0;

didascalieArray = new Array();
imageArray = new Array();
didascalieArray[imageNum] = "caption1";
imageArray[imageNum++] = new imageItem(imageDir +
"image1.jpg");
didascalieArray[imageNum] = "caption2";
imageArray[imageNum++] = new imageItem(imageDir +
"image2.jpg");


var totalImages = imageArray.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}

else {
imageNum = (imageNum+1) % totalImages;
}
var new_image = get_ImageItemLocation(imageArray

[imageNum]);

document.getElementById("didascalia").innerHTML =

didascalieArray[imageNum];
return(new_image);
}

function getPrevImage() {
if(imageNum-1 < 0) {
imageNum = totalImages-1;
}
else
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray

[imageNum]);
document.getElementById("didascalia").innerHTML =

didascalieArray[imageNum];
return(new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

function switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

// -->

</script>

alitscha
07-25-2011, 03:05 PM
Sciliano, this is actually a very clever solution!

Do you think it would be releatively easy to add play-pause-prev-next buttons + captions, and take away the xfader? I do have to add this features and I can try myself, but I am still not very self confindent about customizing existing code.

Thanks a lot :)

Sciliano
07-25-2011, 03:30 PM
alitscha:

On second thought, try another of my applicatons here (http://www.freewarefiles.com/Thumbnail-Slideshow-Creator_program_53870.html)

vwphillips
07-25-2011, 04:19 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
<!--
var interval = 1000;
var imageDir = "http://www.vicsjavascripts.org.uk/StdImages/";
var imageNum = 0;

didascalieArray = new Array();
imageArray = new Array();
didascalieArray[imageNum] = "caption1";
imageArray[imageNum++] = imageDir +"Egypt5.jpg";
didascalieArray[imageNum] = "caption2";
imageArray[imageNum++] = imageDir +"Egypt6.jpg";

imageNum=0 ;


function Auto(){
Auto.to=setTimeout(function(){ auto(); },100);
}

function auto(){
NextImage()
Auto.to=setTimeout(function(){ auto(); },interval);
}

function Pause(){
clearTimeout(Auto.to);
}

function NextImage() {
clearTimeout(Auto.to);
imageNum=++imageNum%imageArray.length;
if (typeof(imageArray[imageNum])=='object'){
document.getElementById('tom').src=imageArray[imageNum].src;
if(didascalieArray[imageNum]){
document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
}
LoadNextImage();
}
}

function LoadNextImage() {
clearTimeout(preload.to);
var nxt=imageNum+1;
nxt=nxt>=imageArray.length?0:nxt;
if (typeof(imageArray[nxt])=='string'){
var img=new Image();
img.src=imageArray[nxt];
preload(img,nxt);
}
}

function preload(img,nxt){
if (!img.complete||img.width<40){
preload.to=setTimeout(function(){ preload(img,nxt); },100);
}
else {
imageArray[nxt]=img;
}
}

// -->

</script>
</head>

<body onload="LoadNextImage(1);">
<img id="tom" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" onmouseover="Pause();" onmouseout="Auto();" />
<div id="didascalia" >Caption 1</div>

<input type="button" name="" value="Next" onmouseup="NextImage();"/>


</body>

</html>

alitscha
07-25-2011, 05:10 PM
@vwphilips: thanks, looks good! but it doesnt work anymore when i try to use my images (i did changed the dir name) - can you spot any mistake here?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
<!--
var interval = 1000;
var imageDir = "potraits/";
var imageNum = 0;

didascalieArray = new Array();
imageArray = new Array();
didascalieArray[imageNum] = "caption1";
imageArray[imageNum++] = imageDir +"01_st_rp.jpg";
didascalieArray[imageNum] = "caption2";
imageArray[imageNum++] = imageDir +"02_st_rp2.jpg";

imageNum=0 ;


function Auto(){
Auto.to=setTimeout(function(){ auto(); },100);
}

function auto(){
NextImage()
Auto.to=setTimeout(function(){ auto(); },interval);
}

function Pause(){
clearTimeout(Auto.to);
}

function NextImage() {
clearTimeout(Auto.to);
imageNum=++imageNum%imageArray.length;
if (typeof(imageArray[imageNum])=='object'){
document.getElementById('tom').src=imageArray[imageNum].src;
if(didascalieArray[imageNum]){
document.getElementById('didascalia').innerHTML=didascalieArray

[imageNum];
}
LoadNextImage();
}
}

function LoadNextImage() {
clearTimeout(preload.to);
var nxt=imageNum+1;
nxt=nxt>=imageArray.length?0:nxt;
if (typeof(imageArray[nxt])=='string'){
var img=new Image();
img.src=imageArray[nxt];
preload(img,nxt);
}
}

function preload(img,nxt){
if (!img.complete||img.width<40){
preload.to=setTimeout(function(){ preload(img,nxt); },100);
}
else {
imageArray[nxt]=img;
}
}

// -->

</script>
</head>

<body onload="LoadNextImage(1);">
<img id="slide1" src="portraits/01_stappert_rp.jpg" onmouseover="Auto();"

onmouseout="Auto();" />
<div id="didascalia">caption 1</div>

<input type="button" name="" value="Next" onmouseup="NextImage();"/>


</body>

</html>

@Sciliano: i still would like to try and fix the script i have, but otherwise your application looks like a good solution, thx!

vwphillips
07-25-2011, 05:26 PM
check the directory and image names(including upper/lower case charactors)

else post a link to your page

alitscha
07-28-2011, 07:29 PM
sorry if it took a while to answer, i checked file names and everything and now the script works perfectly. I am posting here the slightly modified version I am doing, i took away the onmouseover and out functions and i added the Auto function to body onload, so that the slideshow starts running as the page opens. Strangely the slideshow starts from the second image in the array, i made the trick starting the array with the last one, but i guess this is not such an elegant solution!

And then i will add a prev button near the next one, hope i can figure that out.

Thaks a lot for your help!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
<!--
var interval = 1000;
var imageDir = "portraits/";
var imageNum = 0;

didascalieArray = new Array();
imageArray = new Array();
didascalieArray[imageNum] = "caption4";
imageArray[imageNum++] = imageDir +"4.jpg";
didascalieArray[imageNum] = "caption1";
imageArray[imageNum++] = imageDir +"1.jpg";
didascalieArray[imageNum] = "caption2";
imageArray[imageNum++] = imageDir +"2.jpg";
didascalieArray[imageNum] = "caption3";
imageArray[imageNum++] = imageDir +"3.jpg";


imageNum=0 ;


function Auto(){
Auto.to=setTimeout(function(){ auto(); },100);
}

function auto(){
NextImage()
Auto.to=setTimeout(function(){ auto(); },interval);
}


function NextImage() {
clearTimeout(Auto.to);
imageNum=++imageNum%imageArray.length;
if (typeof(imageArray[imageNum])=='object'){
document.getElementById('tom').src=imageArray[imageNum].src;
if(didascalieArray[imageNum]){
document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
}
LoadNextImage();
}
}

function LoadNextImage() {
clearTimeout(preload.to);
var nxt=imageNum+1;
nxt=nxt>=imageArray.length?0:nxt;
if (typeof(imageArray[nxt])=='string'){
var img=new Image();
img.src=imageArray[nxt];
preload(img,nxt);
}
}

function preload(img,nxt){
if (!img.complete||img.width<40){
preload.to=setTimeout(function(){ preload(img,nxt); },100);
}
else {
imageArray[nxt]=img;
}
}

// -->

</script>
</head>

<body onload="LoadNextImage(); Auto()">
<img id="tom" src="portraits/1.jpg">
<div id="didascalia" >Caption 1</div>

<input type="button" name="" value="Next" onmouseup="NextImage();"/>


</body>

</html>

alitscha
07-28-2011, 07:59 PM
Hallo again! I managed the PrevImage function, i would have just a last thing to fix...I am copying that part of the script here below. it works well but gets stuck if i go back to the last image, and then next and prev are not working anymore...how can i make a cycle so that the slidewhow go back and forth in both directions? Hope the question is clear enough



function NextImage() {
clearTimeout(Auto.to);
imageNum=++imageNum%imageArray.length;
if (typeof(imageArray[imageNum])=='object'){
document.getElementById('tom').src=imageArray[imageNum].src;
if(didascalieArray[imageNum]){
document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
}
LoadNextImage();
}
}

function PrevImage() {
clearTimeout(Auto.to);
imageNum=--imageNum%imageArray.length;
if (typeof(imageArray[imageNum])=='object'){
document.getElementById('tom').src=imageArray[imageNum].src;
if(didascalieArray[imageNum]){
document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
}
LoadPrevImage();
}
}
function LoadPrevImage() {
clearTimeout(preload.to);
var nxt=imageNum-1;
nxt=nxt>=imageArray.length?0:nxt;
if (typeof(imageArray[nxt])=='string'){
var img=new Image();
img.src=imageArray[nxt];
preload(img,nxt);
}
}

function LoadNextImage() {
clearTimeout(preload.to);
var nxt=imageNum+1;
nxt=nxt>=imageArray.length?0:nxt;
if (typeof(imageArray[nxt])=='string'){
var img=new Image();
img.src=imageArray[nxt];
preload(img,nxt);
}
}

vwphillips
07-29-2011, 07:46 AM
the nature of the script only allows loading the next image going forward

the modification loads the current image on demand when going back



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
<!--
var interval = 1000;
var imageDir = "http://www.vicsjavascripts.org.uk/StdImages/";
var imageNum = 0;

didascalieArray = new Array();
imageArray = new Array();
didascalieArray[imageNum] = "caption1";
imageArray[imageNum++] = imageDir +"Egypt5.jpg";
didascalieArray[imageNum] = "caption2";
imageArray[imageNum++] = imageDir +"Egypt6.jpg";

imageNum=0 ;


function Auto(){
Auto.to=setTimeout(function(){ auto(); },100);
}

function auto(){
NextImage()
Auto.to=setTimeout(function(){ auto(); },interval);
}


function NextImage() {
clearTimeout(Auto.to);
imageNum=++imageNum%imageArray.length;
if (typeof(imageArray[imageNum])=='object'){
document.getElementById('tom').src=imageArray[imageNum].src;
if(didascalieArray[imageNum]){
document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
}
LoadNextImage();
}
}

function LoadNextImage(prev) {
clearTimeout(preload.to);
var nxt=imageNum+(prev?0:1);
nxt=nxt>=imageArray.length?0:nxt;
if (typeof(imageArray[nxt])=='string'){
var img=new Image();
img.src=imageArray[nxt];
preload(img,nxt,prev);
}
}

function preload(img,nxt,prev){
if (!img.complete||img.width<40){
preload.to=setTimeout(function(){ preload(img,nxt,prev); },100);
}
else {
imageArray[nxt]=img;
if (prev){
document.getElementById('tom').src=imageArray[imageNum].src;
if(didascalieArray[imageNum]){
document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
}
}
}
}

function PrevImage() {
clearTimeout(Auto.to);
imageNum--;
imageNum=imageNum<0?imageArray.length-1:imageNum;
if (typeof(imageArray[imageNum])=='object'){
document.getElementById('tom').src=imageArray[imageNum].src;
if(didascalieArray[imageNum]){
document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
}
}
else {
LoadNextImage(true);
}
}

// -->

</script>
</head>

<body onload="LoadNextImage();">
<img id="tom" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg">
<div id="didascalia" >Caption 1</div>

<input type="button" name="" value="Next" onmouseup="NextImage();"/>
<input type="button" name="" value="Prev" onmouseup="PrevImage();"/>


</body>

</html>

alitscha
07-31-2011, 02:52 PM
ok, thanks, will try that too!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum