/    Sign up×
Community /Pin to ProfileBookmark

onclick=switchImage function

Copy linkTweet thisAlerts:
Aug 02.2005

Hello-

I am designing a photography portfolio. Each section has about 20 images. I would like the photo to switch onclick w/o introducing a new page – so essentially it would only change in the table that it’s nested in.

I found some code:onClick=”switchFolio(01);” href=”#”>1</a>
that I think will work, but I don’t know exactly how to connect everything. Any help – greatly, greatly appreciated.

Cheers.

Site
[url]www.harlanturk.jesseddy.com/food_form/index.php[/url][FONT=Verdana]verdana[/FONT][FONT=Verdana][/FONT]

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Jonny_LangAug 02.2005 — Would a basic image pager work for you?

images is the name of the folder where the photos are located.

[CODE]<HTML>
<Head>
<Script Language=JavaScript>

// image file names are consecutive numbers, e.g. 1.jpg, 2.jpg, 3.jpg

var nImgs = 3; // number of images
var curr = 1;

function turnPage(direction){

if (direction == 'next'){if (curr < nImgs){curr++} else{curr = 1}}
if (direction == 'prev'){if (curr > 1){curr--} else{curr = nImgs}}
document.getElementById('slideImg').src = "images/"+curr+".jpg";
}

</Script>
</Head>
<body>
<table border="0" cellpadding="0" align='center'>
<TR>
<TD><Img Src='images/1.jpg' width=640 height=480 id='slideImg'></TD>
</TR>
<TR>
<TD align='center'><br><input type=button value="Prev" onClick="turnPage('prev')">&nbsp;&nbsp
<input type=button value="Next" onClick="turnPage('next')"></TD>
</TR>
</table>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@Mr_JAug 02.2005 — Here's a simply way just click the image to change to the next.

You need to put your image names in the array

[code=php]<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">
<!--

myPics=new Array()
myPics[0]="pic1.jpg"
myPics[1]="pic2.jpg"
myPics[2]="pic3.jpg"
myPics[3]="pic4.jpg"
myPics[4]="pic5.jpg"

count=1

function nextPic(){

document.viewer.src=myPics[count]

count++

if(count==myPics.length){
count=0
}

}

//-->
</script>

</HEAD>
<BODY>

<img name="viewer" src="pic1.jpg" onclick="nextPic()">

</BODY>
</HTML>[/code]
Copy linkTweet thisAlerts:
@msfluxauthorAug 02.2005 — These look great, but I need to have a numbering system that controls the navigation. 1 2 3 4...etc. The nav is in a separate table from where the photo switches. I'm not sure how to connect the two so the navigation knows where to change the image. I would still need an Array for this correct? I'm new to JS if you haven't already realized...

Cheers.
Copy linkTweet thisAlerts:
@Jonny_LangAug 02.2005 — msflux:

Using the code I posted, it won't matter if the "navigation" as you refer to it, is in another table. All that matters is that the dynamic image has the id='slideImage'

Of course, you must also pay attention to the image path.

The code I posted assumes that the images are in a folder named: images

That's what this means:

Src='images/1.jpg'
Copy linkTweet thisAlerts:
@Mr_JAug 03.2005 — Another choice

[code=php]<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">
<!--

myPics=new Array()
myPics[0]="pic1.jpg"
myPics[1]="pic2.jpg"
myPics[2]="pic3.jpg"
myPics[3]="pic4.jpg"
myPics[4]="pic5.jpg"

count=0

function nextPic(n){

if(n==0){count--}
if(n==1){count++}

if(count==myPics.length){count=0}
if(count<0){count=myPics.length-1}

document.viewer.src=myPics[count]

}

//-->
</script>

</HEAD>
<BODY>

<a href="#null" onclick="nextPic(0)">Back</a> <a href="#null" onclick="nextPic(1)">Next</a>

<P><img name="viewer" src="pic1.jpg">



</BODY>
</HTML>
[/code]
×

Success!

Help @msflux spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...