Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Clicking thumbnail opens into templated HTML with full image

  1. #1
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Clicking thumbnail opens into templated HTML with full image

    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

  2. #2
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    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)
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  3. #3
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    If you think the server side script thing would be better, I trust you. I'd love to see whatever works!

    Thanks.

    John

  4. #4
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    Okay. I'll try to get some code to you later
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  5. #5
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    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 =)
    ?>
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  6. #6
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    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?
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  10. #10
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    Jas, CMS is not a language...
    It's short for Content Management System.
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •