JavaScript Picture slider

4 New Member

Hi,

Im not a Java programmer, I do a PHP programs, but now I must implement a Java script for a poicture slideshow.

With this script I can change pictures from examlpe 1 to 10.

But I must to do that i have a 4 pictures in a row and each picture will change 3 pictures => 4 x 3 picture for change.

this code swap the pictures:

Expand|Select|Wrap|Line Numbers

 <script language="JavaScript">

<!--

function MM_findObj(n, d) { //v4.0

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && document.getElementById) x=document.getElementById(n); return x;

}
 
function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

This call the pictures (I think):

Expand|Select|Wrap|Line Numbers

 <script language="JavaScript" type="text/javascript">

<!--

<!--

gSlideshowInterval = 3;

gNumberOfImages = 3;
 
gImages = new Array(gNumberOfImages);

gImages[0] = "up_main_photo/main_resized_photo_1.jpg";

gImages[1] = "up_main_photo/main_resized_photo_2.jpg";

gImages[2] = "up_main_photo/main_resized_photo_3.jpg";

gImages[3] = "up_main_photo/main_resized_photo_4.jpg";
 
function canManipulateImages() {

    if (document.images)

        return true;

    else

        return false;

}

function loadSlide(imageURL) {

    if (gImageCapableBrowser) {
 
        document.slide.src = imageURL;

        return false;

    }

    else {

        return true;

    }

}

function nextSlide() {

    gCurrentImage = (gCurrentImage + 1) % gNumberOfImages;

    loadSlide(gImages[gCurrentImage]);

}

gImageCapableBrowser = canManipulateImages();

gCurrentImage = 0;

setInterval("nextSlide()",gSlideshowInterval * 1000);

// -->
 
function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

//-->

</script>

than I must preload the images in HTML body:

Expand|Select|Wrap|Line Numbers

 <body class="MAIN_FRAME_BODY" onLoad="MM_preloadImages('up_main_photo/main_resized_photo_1.jpg, up_main_photo/main_resized_photo_2.jpg,up_main_photo/main_resized_photo_3.jpg, up_main_photo/main_resized_photo_3.jpg)">
 

and at last - begin the slideshow:

Expand|Select|Wrap|Line Numbers

<img src="up_main_photo/main_resized_photo_1.jpg" alt="" name="slide">

thanx!

Jun 5 '07 #1

Subscribe Reply

2141

acoder

16,027

Recognized Expert Moderator MVP

webmaster, welcome to TSDN!

Can you explain the following in a little more detail please?

But I must to do that i have a 4 pictures in a row and each picture will change 3 pictures => 4 x 3 picture for change.

Jun 5 '07 #2

webmaster1

New Member

webmaster, welcome to TSDN!

Can you explain the following in a little more detail please?

go to page:

http://www.internetlabor.net/geneza

on main page You can see 4 pictures.

I want to every 4 pictures chage in itself 3 different pictures

Jun 5 '07 #3

acoder

16,027

Recognized Expert Moderator MVP

Ok, I got you.

Add the rest of the images to the gImages array and update gNumberOfImages to 12.

Then you just need to change nextSlide to, e.g. or something similar (perhaps you can think of something similar):

Expand|Select|Wrap|Line Numbers

 function nextSlide() {

    gCurrentImage = (gCurrentImage + 1) % 3;

    for (i = 0; i <= 3; i++) loadSlide(gImages[gCurrentImage*i+(gCurrentImage-1)*3]);

}

Jun 5 '07 #4

webmaster1

New Member

Ok, I got you.

Add the rest of the images to the gImages array and update gNumberOfImages to 12.

Then you just need to change nextSlide to, e.g. or something similar (perhaps you can think of something similar):

Expand|Select|Wrap|Line Numbers

function nextSlide() {

gCurrentImage = (gCurrentImage + 1) % 3;

for (i = 0; i <= 3; i++) loadSlide(gImages[gCurrentImage*i+(gCurrentImage-1)*3]);

}

///////////////////////////
OK,

Ive made the changes, than (oh, maybe Im tired - or too beginner in Java) - but what with slides - mean pictures?

The changes is a next:

Expand|Select|Wrap|Line Numbers

 <script language="JavaScript" type="text/javascript">

<!--

<!--

gSlideshowInterval = 3;

gNumberOfImages = 12;
 
gImages = new Array(gNumberOfImages);

gImages[0] = "up_main_photo/main_resized_photo_1.jpg";

gImages[1] = "up_main_photo/main_resized_photo_2.jpg";

gImages[2] = "up_main_photo/main_resized_photo_3.jpg";

gImages[3] = "up_main_photo/main_resized_photo_4.jpg";

gImages[4] = "up_main_photo/main_resized_photo_5.jpg";

gImages[5] = "up_main_photo/main_resized_photo_6.jpg";

gImages[6] = "up_main_photo/main_resized_photo_7.jpg";

gImages[7] = "up_main_photo/main_resized_photo_8.jpg";

gImages[8] = "up_main_photo/main_resized_photo_9.jpg";

gImages[9] = "up_main_photo/main_resized_photo_10.jpg";

gImages[10] = "up_main_photo/main_resized_photo_11.jpg";

gImages[11] = "up_main_photo/main_resized_photo_12.jpg";
 
function canManipulateImages() {

    if (document.images)

        return true;

    else

        return false;

}

function loadSlide(imageURL) {

    if (gImageCapableBrowser) {
 
        document.slide.src = imageURL;

        return false;

    }

    else {

        return true;

    }

}

function nextSlide() {

    gCurrentImage = (gCurrentImage + 1) % 3;

    for (i = 0; i <= 3; i++) loadSlide(gImages[gCurrentImage*i+(gCurrentImage-1)*3]);

}

gImageCapableBrowser = canManipulateImages();

gCurrentImage = 0;

setInterval("nextSlide()",gSlideshowInterval * 1000);
 
// -->
 
function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

//-->

</script>

Expand|Select|Wrap|Line Numbers

 <body class="MAIN_FRAME_BODY" onLoad="MM_preloadImages('up_main_photo/main_resized_photo_1.jpg, up_main_photo/main_resized_photo_2.jpg,up_main_photo/main_resized_photo_3.jpg, up_main_photo/main_resized_photo_3.jpg,up_main_photo/main_resized_photo_4.jpg, up_main_photo/main_resized_photo_5.jpg,up_main_photo/main_resized_photo_6.jpg, up_main_photo/main_resized_photo_7.jpg,up_main_photo/main_resized_photo_8.jpg, up_main_photo/main_resized_photo_9.jpg,up_main_photo/main_resized_photo_10.jpg, up_main_photo/main_resized_photo_11.jpg,up_main_photo/main_resized_photo_12.jpg)">
 

Expand|Select|Wrap|Line Numbers

 
<img src="up_main_photo/main_resized_photo_1.jpg" alt="" name="slide">

<img src="up_main_photo/main_resized_photo_4.jpg" alt="" name="slide">

<img src="up_main_photo/main_resized_photo_7.jpg" alt="" name="slide">

<img src="up_main_photo/main_resized_photo_10.jpg" alt="" name="slide">

Jun 5 '07 #5

acoder

16,027

Recognized Expert Moderator MVP

Ok, you're displaying 1,4,7 and 10, so you're going to have to change the code for nextSlide so that it displays 2,5,8 and 11 (remember array indices are one less) on the next go.

Jun 6 '07 #6

webmaster1

New Member

Ok, you're displaying 1,4,7 and 10, so you're going to have to change the code for nextSlide so that it displays 2,5,8 and 11 (remember array indices are one less) on the next go.

Dear Acoder - thank You for help for now - Ive must sit and think abot this code - I belive is simple as the other programs - but I dont have a time now I must finish site very soon - so I can return for this "problem" in near future. For now Ive made the alternative resolution:

Ive made a 3 separately files, in each are a 3 files for a sliding, than I inserted this files into "main" file as iframe, and its work.

visit the: www.geneza.co.yu/index_main.php

Jun 8 '07 #7

Similar topics

4465

Why does <INPUT type="hidden"> slow my JavaScript down??

by: Saqib Ali | last post by:

I have created a slider using Javascript and html tables that generally works very well. As you move the "knob" to the right, a numeric value in an adjactent <INPUT type="text"> tag increases....

Javascript

1964

JavaScript Slider

by: bigoxygen | last post by:

Hi. Anybody know where I could find a nice JavaScript/DHTML slider? I am going to give my users 300 points, and the maximum values on the 3 sliders must add up to 300... Would this be hard to...

Javascript

2262

Losing focus on a slider control within a user control

by: Israel | last post by:

The problem: I want to know, definitively when a slider loses focus after a user has started sliding and hasn't released the mouse yet. It appears that this is captured with the WM_ACTIVATEAPP...

.NET Framework

1591

Problems with javascript in firefox

by: kiran | last post by:

hi, iam facing a problem in javascript. iam using a slider in program. i requires a js file which i have included. iam passing a parameter through this statement s.function(v). the function is in...

Javascript

8632

Javascript onchange problem

by: James007 | last post by:

Hi everyone, I am developing a web page for an embedded application. I created a text box for entering a value (only 1 byte long). The onchange event triggers correctly when I enter the value...

Javascript

1600

Cutehtml Javascript works on IE & Opera but not Mozilla 3.0.1

by: pitstop10 | last post by:

I use cutehtml as these are my starting days with Javascripts. The script generated by CuteHTML works in IE and Opera. It does not however work in Mozilla. its a slideshow of images. The problem with...

Javascript

7007

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7171

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

7220

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

7386

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

4918

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

4599

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3098

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

3090

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1427

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp