Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to get this slideshow ? 1

Status
Not open for further replies.
impayatoy

impayatoy

MIS
Sep 23, 2009
6
SE
hi all,

i need a slideshow ( look at project section, you will see the slideshow)which the images and their information texts below changes when they are clicked. i already downloaded website and the slideshow but i can't integrate it to my own website ( ?

this is the slideshow inside the zip pack

can somebody show me the necessary code or way to do it please? or do you know an equal slideshow script which i can use directly ?
 
Sort by date Sort by votes
I don't see any slideshows at the URL you provided. As well, the link you have for your own attempt is broken.

Lee
 
Upvote 0 Downvote
I also see no slide show.

do you know an equal slideshow script which i can use directly
Click to expand...

Have you tried searching on Google for "Javascript slideshow"?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Click on one of the links in the page from the OP's link, you'll see a 360 gallery for different things.

Clicking on the image makes it change to the next image.
With that said, that should be a simple thing to accomplish with few images.

If you have many images it may take a little longer.

however the basics would be to have an array of the images you wish to display, and cycle through it applying them as the source of an image tag.


Code: 
function change_pic(imagetag){
var myImages=new Array();
myImages[0]="image0.jpg";
myImages[1]="image1.jpg";
myImages[2]="image2.jpg";
myImages[3]="image3.jpg";

var mytext=new Array();
mytext[0]="Text for: image0.jpg";
mytext[1]="Text for: image1.jpg";
mytext[2]="Text for: image2.jpg";
mytext[3]="Text for: image3.jpg";



imagetag.src=myImages[imagetag.title];
var imgtxt=document.GetElementById('imagetext');
imgtxt.innerHTML=mytext[imagetag.title];

if(parseInt(imagetag.title) + 1>=myImages.length){
imagetag.title="0";
}
else{
imagetag.title=parseInt(imagetag.title) + 1;}
}



<img src="image0.jpg" title="1" onClick="change_pic(this);">
<span id="imagetext">Text for: image0.jpg/span>

As I said with few images this is simple, if you have many images, you maybe be better off using a flash slideshow, or Have a server side language construct the arrays prior to loading the page.








----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
trollacious and billy,

did you try to click on the drop-down project titles on
you should see a slideshow in the first chair project.

I couldn't manage to put a slideshow in my website, my attemps on this failed unfortunately,

vacunita,

thanks for the code but i don't know where i put this code and between which tag ? i am a beginner for web design.
 
Upvote 0 Downvote

The first part, (the function section) you place between the <script> tags in the head of your page.
Code: 
<html>
<head><title></title>
<script>
[red]
function change_pic(imagetag){
var myImages=new Array();
myImages[0]="image0.jpg";
myImages[1]="image1.jpg";
myImages[2]="image2.jpg";
myImages[3]="image3.jpg";

var mytext=new Array();
mytext[0]="Text for: image0.jpg";
mytext[1]="Text for: image1.jpg";
mytext[2]="Text for: image2.jpg";
mytext[3]="Text for: image3.jpg";



imagetag.src=myImages[imagetag.title];
var imgtxt=document.GetElementById('imagetext');
imgtxt.innerHTML=mytext[imagetag.title];

if(parseInt(imagetag.title) + 1>=myImages.length){
imagetag.title="0";
}
else{
imagetag.title=parseInt(imagetag.title) + 1;}
}
[/red]
</script>
</head>
...

The img tag and span should be placed in the location you wish the images to appear.


Code: 
<img src="image0.jpg" title="1" onClick="change_pic(this);">
<span id="imagetext">Text for: image0.jpg/span>






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
vacunita,

thanks again. i will try this immediately.

i will use this slideshow several times in my drop down project titles. if you look at my website


you will see <strong>works</strong> title. when you click it, all my projects will be visible and i have to put a slideshow for each project. so, how should i modify your code ? does iframe method works for this code in the head section ?

or if you have a some free time to help, i can send you the all files of my website and the slideshow in my dream for integration between them.
 
Upvote 0 Downvote
you'll have to modify it a bit.
Starting by creating your image arrays for each project.


Code: 
<script>
var MyImages=new Array();
MyImages.projectone=new Array();
MyImages.projecttwo=new Array();
MyImages.projectthree=new Array();
...

MyImages['projectone'][0]="image1.jpg";
MyImages['projectone'][1]="image2.jpg";
MyImages['projectone'][2]="image3.jpg";
MyImages['projectone'][3]="image4.jpg";

MyImages['projecttwo'][0]="image1p2.jpg";
MyImages['projecttwo'][1]="image2p2.jpg";
MyImages['projecttwo'][2]="image3p2.jpg";
MyImages['projecttwo'][3]="image4p2.jpg";

MyImages['projectthree'][0]="image1p3.jpg";
MyImages['projectthree'][1]="image2p3.jpg";
MyImages['projectthree'][2]="image3p3.jpg";
MyImages['projectthree'][3]="image4p3.jpg";

...
then you'll need to modify the function to receive 2 parameters instead of just one:

Code: 
function change_pic(imagetag, [red]project[/red]){

 imagetag.src=[red]project[/red][imagetag.title];
 alert(imagetag.src);
 if(parseInt(imagetag.title) + 1>=[red]project[/red].length){
   imagetag.title="0";
  }
 else{
  imagetag.title=parseInt(imagetag.title) + 1;
  }

}

</script>


Then in your images make the calls like:
[code]
<img src="image0.jpg" title="1" onClick="change_pic(this, MyImages.[red]projectone[/red]);">

and 

<img src="image0.jpg" title="1" onClick="change_pic(this, MyImages.[red]projecttwo[/red]);">

etc...


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
could you write the complete code please ? image text part, etc... it is difficult for me to complete the rest.

and could you add some image text for an image (for example; "first sketch of the project") ?

 
Upvote 0 Downvote
Here's a full working example for 3 projects.

Code: 
<html>
<head><title>Image Swap</head>
<script>

//Define project arrays

var MyImages=new Array();
MyImages.projectone=new Array();
MyImages.projecttwo=new Array();
MyImages.projectthree=new Array();

//define project images and text arrays

MyImages.projectone.images=new Array();
MyImages.projectone.textforimages=new Array();

MyImages.projecttwo.images=new Array();
MyImages.projecttwo.textforimages=new Array();

MyImages.projectthree.images=new Array();
MyImages.projectthree.textforimages=new Array();

//populate prject image and text arrays with relevant information. 

MyImages['projectone']['images'][0]="image1.jpg";
MyImages['projectone']['images'][1]="image2.jpg";
MyImages['projectone']['images'][2]="image3.jpg";
MyImages['projectone']['images'][3]="image4.jpg";

MyImages['projectone']['textforimages'][0]="text for image one of project one";
MyImages['projectone']['textforimages'][1]="text for image two of project one";
MyImages['projectone']['textforimages'][2]="text for image three of project one";
MyImages['projectone']['textforimages'][3]="itext for image four of project one";


MyImages['projecttwo']['images'][0]="image1p2.jpg";
MyImages['projecttwo']['images'][1]="image2p2.jpg";
MyImages['projecttwo']['images'][2]="image3p2.jpg";
MyImages['projecttwo']['images'][3]="image4p2.jpg";

MyImages['projecttwo']['textforimages'][0]="text for image one of project two";
MyImages['projecttwo']['textforimages'][1]="text for image two of project two";
MyImages['projecttwo']['textforimages'][2]="text for image three of project two";
MyImages['projecttwo']['textforimages'][3]="itext for image four of project two";

MyImages['projectthree']['images'][0]="image1p3.jpg";
MyImages['projectthree']['images'][1]="image2p3.jpg";
MyImages['projectthree']['images'][2]="image3p3.jpg";
MyImages['projectthree']['images'][3]="image4p3.jpg";

MyImages['projectthree']['textforimages'][0]="text for image one of project three";
MyImages['projectthree']['textforimages'][1]="text for image two of project three";
MyImages['projectthree']['textforimages'][2]="text for image three of project three";
MyImages['projectthree']['textforimages'][3]="itext for image four of project three";

//define swapping function

function change_pic(imagetag,myproject,projecttxtarea){

//replace image and text with next image and text in sequence from previously defined arrays.

imagetag.src=myproject.images[imagetag.title];
var imgtxt = document.getElementById(projecttxtarea);
imgtxt.innerHTML=myproject.textforimages[imagetag.title];

//check if next image in cycle is the last and reset counter to start cycle again. by storing position in the image tag title .

if(parseInt(imagetag.title) + 1>=myproject.images.length){
imagetag.title="0";
}

//if not the last one, store current position for slideshow. 
else{
imagetag.title=parseInt(imagetag.title) + 1;
}

}



</script>

</head>
<body>
<div id='mydiv' style="border:2px inset red; background-color:#666666; color:#FFFFFF; visibility:hidden;">
This is not visible
</div>

<img src="image0ofproject1.jpg" title="1" onClick="change_pic(this, MyImages['projectone'],'projectonetext');">
<span id="projectonetext">Text for image one of project one</span>
<br>
<img src="image0ofproject2.jpg" title="1" onClick="change_pic(this, MyImages['projecttwo'],'projecttwotext');">
<span id="projecttwotext">Text for image one of project two</span>
<br>
<img src="image0ofproject3.jpg" title="1" onClick="change_pic(this, MyImages['projectthree'],'projectthreetext');">
<span id="projectthreetext">Text for image one of project three</span>

</body>
</html>




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
woww, i really worked. you are very helpful for a unknown person. this is amazing for this century, thanks again.
but i need one last favor;

texts of the images are shown in the right of the images. can you modify the code for showing them just under the image ?
 
Upvote 0 Downvote
Why not try and debug it for yourself? All you've done that I can see is ask people to write code for you.

This isn't a free coding service - you need to try and help yourself first.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
393
Kennelbloke
Kennelbloke
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
289
Rayj0000
Rayj0000
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
326
lexer
lexer
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
501
xwb
xwb
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
367
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top