Log in

View Full Version : 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 (http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm) 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/toydatabase/op=show/kid=686/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.


<?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:


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 (http://www.toytraderz.com/toydatabase/op=show/kid=2126.html) (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:


$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/toydatabase/display_image?image=http://www.toytraderz.com/toydatabase/path/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.
JohnH
07-03-2007, 07:57 PM
CMS = Content Management System. It's a PHP/MySQL-based collection of files that allow you to manage your site without all the HTML editing. The one I use is Dragonfly CMS.

I have URL Rewrite activated on my site, which turns URLs like yoursite.com/index.php?name=News to yoursite.com/news.html. So my toytraderz.com/index.php?name=toydatabase changed to toytraderz.com/toydatabase.html.

Given that the URL rewrite seems to be making this extremely difficult (though I honestly feel like it's pretty close), maybe the JS version would work better in this case?

John
Jas
07-04-2007, 10:37 PM
I don't know what to do with that. . . It sounds like the other function is interfering with this one. The JS version will have the same problem, because it needs-- probably more than PHP -- to have the ?image= in the url. . .
Jas
07-04-2007, 10:58 PM
Is it possible that you use the $_GET statment BEFORE the page changes, and then use it? You can't do this with JS (except with a cookie) if I am not mistaken on how your process works, but PHP should be able to do it. One way might be to create the page WITH the query, but I have a feeling that will be impractical for you. . . Anyway, does this sound like it might have a chance?

EDIT: Post or PM me your code (the important bits you don't mind showing) and I'll see if I can find something that will help.