Clicking thumbnail opens into templated HTML with full image

**JohnH** · 06-28-2007, 07:07 AM

Greetings everyone. I recently implemented the Image Thumbnail Viewer on my site, and it works great. I actually ran across it while looking for something else, so I thought I'd check to see if someone can help me with that "something else".

Here's an example of a page on my website:

http://www.toytraderz.com/toydatabas...86/page=1.html

As you can see there are thumbnails down the left side of the page that click into larger images (at the moment using Image Thumbnail Viewer). What I'd like, however, is for the image to open up into the same window and into what I guess would be a template HTML page. Here's something I mocked up in Photoshop.

http://www.toytraderz.com/john/kbaseexample.jpg

Honestly, I don't need the header or side blocks. I really just wanted a simple HTML page that houses the image, alt tag, and all that good stuff. This is a good example of what I'm looking for (click any of the thumbnails to see what I mean):

http://www.rebelscum.com/tac20storm.asp

Again, I don't need all the extra junk at the bottom...just a nice looking page to display the larger image.

I'm seeing a lot of scripts that open up into a new window, but I'd like to have something that opens up into the current window and provides a "back" button to get back to the previous page.

Can anyone help me? Thanks in advance!

John

**Jas** · 06-28-2007, 08:57 PM

There are two ways I can conceive for doing this. The more inferier way is with JS and cookies (or breaking up the URL), the other, better, way is using a server side script and the address bar. Which way would you be more interested in?

Edit: The back button would be <a href="Javascript:history.back();">Back</a> (in case you need that, too)

**JohnH** · 06-30-2007, 01:20 AM

If you think the server side script thing would be better, I trust you.

I'd love to see whatever works!

Thanks.

John

**Jas** · 07-02-2007, 05:42 PM

Okay. I'll try to get some code to you later

**Jas** · 07-02-2007, 07:00 PM

Some extra notes: This must be saves with a .php extension, and must run on a PHP enabled website.

Code:

<?php
/* This is a *SAMPLE* of how you
 * could creat the code using PHP
 * and the URL (the $_GET['']
 * var retrives info from the URL).
 *
 * I don't know how much you know 
 * about coding, so the code is 
 * a over-emphasized so you can see
 * what's happening. (I have too much
 * free time. . . )
 */

if (isset($_GET['image'])){                        // If the ?image= is in the URL after the address
	$display_image = $_GET['image'];	 //pull out the path for the image
} else {                                       //if the ?image= is not in the URL after the address
	$display_image = 'SOME_IMAGE.JPG';  //default image to display
}

// print out your page:
echo ("

		<html>
	<head>
	</head>
	<body>
		<!-- Large image //-->
				<!-- put the display_image into the img path //-->
	<img src='./$display_image' height='300' width='300'><br>
	
		<!-- Thumbnails //-->
				<!-- Note that the '?' in the URL marks the start of the query, and the ?image= in the anchor tag is what the if/else if looking for //-->
	<a href='www.MYSITE.com/MYPAGE.php?image=IMAGE1.JPG'><img src='./IMAGE1.JPG' height='100' width='100'></a>
	<a href='www.MYSITE.com/MYPAGE.php?image=IMAGE2.JPG'><img src='./IMAGE2.JPG' height='100' width='100'></a>
	<a href='www.MYSITE.com/MYPAGE.php?image=IMAGE3.JPG'><img src='./IMAGE3.JPG' height='100' width='100'></a>
	
				<!-- Ideally, since you are using the image name twice, you would generate the Thumbnails with JS, but I haven't got time for that. . . //--> 
	
	</body>
		</html>

");

//Hopefully this will work =)
?>

**JohnH** · 07-03-2007, 03:50 AM

I'm sorry...I know a little about coding but this isn't making enough sense for me to implement it. I'm using a CMS called Dragonfly right now. The file that pulls in the thumbnails for each item is a .inc file. Here's the code that pulls things the way they are now:

Code:

case 8: // Image
if ($xstr) {
$xdata = '<a href="../toydatabase/'.$xstr.'.jpg" rel="thumbnail" title="'.$kdata['question'].' '.$xtext.'">
<br><img src="../toydatabase/'.$xstr.'_mini.jpg" alt="'.$kdata['question'].' '.$xtext.'" title="'.$kdata['question'].' '.$xtext.'" border=0 />
<br>'.$xtext.'</a>';
}
break;

$xstr is a field that hold the image path. $xtext is a field that holds the image caption. The rel="thumbnail" is for the Image Thumbnail Viewer I got from this site. The $kdata['question'] is the title of the page. So in THIS CASE (for the first image, anyway):

$xstr = starwars/vintage/figures/poweroftheforce/yakfaceloose (the .jpg and first part of the full URL are hardcoded into the .inc file)

$xtext = Loose

$question = Yak Face

Not sure how necessary it is that you know all this, but anyway.

So I'm not sure where all this code goes in the grand scheme of things, or how I'd modify my own and your codes to implement this. Obviously this little snippet is a small part of the larger .inc file, but as far as I know it's where everything should go.

I'm going to mess with it some more, but I'm looking forward to your response. Thanks!

John

**JohnH** · 07-03-2007, 04:34 AM

BTW, if it would be easier to implement the Javascript version of this into the CMS than it would be this version, I'm all ears as well.

John

**JohnH** · 07-03-2007, 04:58 AM

OK, I'm making a little progress but I'm not getting all the way there yet. I uploaded display_image.php to the toydatabase module's base directory. I got the page to load under the address http://www.toytraderz.com/toydatabase/display_image. No .php or anything, just that address. I changed the code in the .inc file that I have above to say this:

Code:

$xstr2 = "http://www.toytraderz.com/toydatabase/$xstr.jpg";
$xdata = '<a href="../toydatabase/display_image?image='.$xstr2.'" title="'.$kdata['question'].' '.$xtext.'"><br><img src="../toydatabase/'.$xstr.'_mini.jpg" alt="'.$kdata['question'].' '.$xtext.'" title="'.$kdata['question'].' '.$xtext.'" border=0 /><br>'.$xtext.'</a>';

When I click an image thumbnail, the address says http://www.toytraderz.com/toydatabas.../imagename.jpg. But the image is a red X even though I know the image path is correct, and when I right click and look at properties the location simply says my site's root directory (http://www.toytraderz.com).

Another thing, and I don't know if it makes a difference - I use URL rewrites with my CMS.

I'm sure I'm doing something stupid to make this not work...hopefully you can steer me in the right direction.

John

**Jas** · 07-03-2007, 04:30 PM

I don't know anything about CMS, so I am a little lost. . . Are you using a PHP script similar to what I gave you, because if so there needs to be a query in the URL for the image to show (i.e. www.mydomian.com/mypage.php?image=myimage). If you aren't using PHP, then I have no idea what's going on =(

And one question: why are you using CMS instead of JS? Not a criticism, just wondering what the benefit is to your site. Are you pulling images from a DB?

**alexjewell** · 07-03-2007, 07:55 PM

Jas, CMS is not a language...
It's short for Content Management System.

Thread: Clicking thumbnail opens into templated HTML with full image

Thread Tools

Search Thread

Clicking thumbnail opens into templated HTML with full image

Bookmarks

Bookmarks

Posting Permissions