Hi, I'm trying to create a thumbnail gallery and found this link in my search which I found very helpful, but I was wondering if there was a way for me to link each individual thumbnails in the gallery to a specific picture without having multiple pages for each pic.
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!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Thumbnail galleries
- Thread starter pb8185
- Start date
You could link each thumbnail to a page ( let's call it bigpic.html ) and pass it the bigpicture on the URL like:
<a href="bigpic.html?p=bigpic2.jpg">
<img src="littlpic.gif" border=0>
</a>
then in bigpic.html strip the pic name off the URL and change the src of the image with JS.
something like:
** QueryString functions ripped off from someone else **
** I think his name was Ed, THANKS ED!
That may do it for you... it also gives you a change to load a "loading..." image while the real image loads... You would of course have to put some kind of pre-load function in there for the correct image... but you get the idea.
Travis Hawkins
BeachBum Software
travis@cfm2asp.com
<a href="bigpic.html?p=bigpic2.jpg">
<img src="littlpic.gif" border=0>
</a>
then in bigpic.html strip the pic name off the URL and change the src of the image with JS.
something like:
Code:
<script Language="JavaScript">
QueryString.keys = new Array();
QueryString.values = new Array();
function QString(key)
{
var value = null;
for (var i=0;i<QueryString.keys.length;i++)
{
if (QueryString.keys[i]==key)
{
value = QueryString.values[i];
break;
}
}
return value;
}
function QueryString_Parse()
{
var query = window.location.search.substring(1);
var pairs = query.split("&");
for (var i=0;i<pairs.length;i++)
{
var pos = pairs[i].indexOf('=');
if (pos >= 0)
{
var argname = pairs[i].substring(0,pos);
var value = pairs[i].substring(pos+1);
QueryString.keys[QueryString.keys.length] = argname;
QueryString.values[QueryString.values.length] = value;
}
}
}
QueryString_Parse();
function stripPic()
{
document.getElementById('bp').src = 'path\' + QString('p')
}
</script>
<body onLoad="stripPic();">
<img id="bp" src="loading.gif">
</body>** I think his name was Ed, THANKS ED!
That may do it for you... it also gives you a change to load a "loading..." image while the real image loads... You would of course have to put some kind of pre-load function in there for the correct image... but you get the idea.
Travis Hawkins
BeachBum Software
travis@cfm2asp.com
- Status
Similar threads
