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 SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

problems with gallery 'back' and 'next' links

Status
Not open for further replies.
sumilsay

sumilsay

Technical User
Feb 12, 2003
69
0
0
CA
on my page, i have thumbs that when clicked, change a main image on the page to the corresponding thumb.
for example,

thumbs (more than just 2):
Code: 
<a href="javascript:changePic('aa01.jpg')"><img src="opacity/thumb_aa01.jpg" hsrc="thumb_aa01.jpg" class="thumb" /></a>	
<a href="javascript:changePic('aa02.jpg')"><img src="opacity/thumb_aa02.jpg" hsrc="thumb_aa02.jpg" class="thumb" /></a>

main image:
Code: 
<img src="images/art/alex/aa01.jpg" name="img" id="img" />

javascript:
Code: 
function changePic(source){
	document.img.src=source;
}

function init() {
  if (!document.getElementById) return
  var imgOriginSrc;
  var imgTemp = new Array();
  var imgarr = document.getElementsByTagName('img');
  for (var i = 0; i < imgarr.length; i++) {
    if (imgarr[i].getAttribute('hsrc')) {
        imgTemp[i] = new Image();
        imgTemp[i].src = imgarr[i].getAttribute('hsrc');
        imgarr[i].onmouseover = function() {
            imgOriginSrc = this.getAttribute('src');
            this.setAttribute('src',this.getAttribute('hsrc'))
        }
        imgarr[i].onmouseout = function() {
            this.setAttribute('src',imgOriginSrc)
        }
    }
  }
}
onload=init;
*thumb code compliments of chris poole*

what i cant figure out is how to have back and next links that will work according to the gallery and not to the pages of my site. i am currently using
Code: 
<a href="javascript:history.back();">Back</a>
but that just loads the last page.

am i making sense? can anyone help?

thanks for your time everyone,
a.
 
Sort by date Sort by votes
Easy - create a variable: lastSrc.

Set it here:

Code: 
var lastSrc = '';
function changePic(source){
    document.img.src=source;
    lastSrc = source;
}

Then, create a new function:

Code: 
function lastPic() {
    // if lastSrc is set, display it, otherwise display default
    document.img.src = lastSrc == '' ? 'default.gif' : lastSrc;
}

You would call lastPic() when a user clicks "Last Picture".

To do next, you'd need to keep all the image sources in an array.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
omm... do i have to change anything in specific?

i set the 'Back' link to
Code: 
<a href="javascript:lastPic()">Back</a>

i also changed 'default.gif' to the first picture that loads with the page, and still no go.

this is how my javascript looks...
Code: 
var lastSrc = '';
function changePic(source){
	document.img.src=source;
	lastSrc = source;
}
function lastPic(){
	// if lastSrc is set, display it, otherwise display default
	document.img.src = lastSrc == '' ? 'aa01.jpg' : lastSrc;
}
 
Upvote 0 Downvote
Could you provide a link or all of your code?

Also, I suggest changing this:

Code: 
<a href="javascript:lastPic()">Back</a>
to this:
Code: 
<a href="#" onclick="lastPic(); return false;">Back</a>

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
hi there...

I took a look at your code. Then, I created a sample page that you should be able to use to make your code work. I think the problem was that we were storing the last source AFTER changing the source. We should have stored it BEFORE we changed it.

Let me know if you need more help :)

Code: 
<html>

<head>

<script>
<!--

var lastSrc = '[URL unfurl="true"]http://www.google.com/images/logo.gif';[/URL]

function lastPic() {
    document.getElementById('mainImage').src = lastSrc;
}

function changePic( src ) {
    lastSrc = document.getElementById('mainImage').src;
    document.getElementById('mainImage').src = src;
}

-->
</script>

</head>

<body>

<table border="1"><tr>
<td>
    <a href="#" onclick="lastPic(); return false;">Previous</a> |
    <a href="#" onclick="changePic('[URL unfurl="true"]http://us.a1.yimg.com/us.yimg.com/i/ww/beta/y3.gif');[/URL] return false;">one</a> |
    <a href="#" onclick="changePic('[URL unfurl="true"]http://www.ibm.com/i/v14/t/ibm-logo.gif');[/URL] return false;">two</a> |
    <a href="#" onclick="changePic('[URL unfurl="true"]http://pics.ebaystatic.com/aw/pics/navbar/eBayLogoTM.gif');[/URL] return false;">three</a> |
    <a href="#" onclick="changePic('[URL unfurl="true"]http://us.i1.yimg.com/us.yimg.com/i/us/av/logo.gif');[/URL] return false;">four</a> |
    <a href="#" onclick="changePic(); return false;">Next</a><br />
</td>
<td>
	<img id="mainImage" src="[URL unfurl="true"]http://www.google.com/images/logo.gif"[/URL] />
</td>
</tr></table>

</body>


</html>

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
... but yes,

for maximum functionality, I would suggest storing each one in an array, unless you want to reload the page every time...

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
131
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
144
AbidingDude
AbidingDude
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
109
waubain
waubain
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
61
ggriffit
ggriffit
RailBatyrshin
  • Locked
  • Question
Back on the Node(ExpressJS) fetch API from WEB Browser
Replies
0
Views
46
RailBatyrshin
RailBatyrshin

Part and Inventory Search

Sponsor

Back
Top