Page 1 of 2

Create Static Page from JPEG

Posted: Thu Jul 30, 2009 4:20 pm
by Nytol
Hey all, me again. :D

Lets say I have a page with an image. Is there any way to add a permalink to the image, and when a user clicks it, a new static page with the image embedded is created?

Lets say my page is called index.php and the image is called 13332fun.jpg. The new page would be 13332fun.php or 13332fun.html with 13332fun.jpg embedded.

You see I am creating an online gallery, with a banner rotator. It's great but it's not very good for visitors to bookmark the image (everything is loaded on one page). If they want so share it they have to view image, then send the image link to friends. It would be cool to instead have the image have it's own page they can share.

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 4:21 pm
by jackpf
Why don't you just have the image link to itself? Creating a page for each image sounds a bit excessive.

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 4:28 pm
by Nytol
Because I want a way for people to DIGG, bookmark etc. And have the ability to add banners if I wish. I can't do that with just a JPG. It would be cool to have a page where people can comment on the image too, and rate it. I can't even add a Home link to just a JPG. :(

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 4:32 pm
by jackpf
In that case it'd be better to have one page, which displays info for a certain picture depending on a GET or POST value.

If you don't know about getting or posting data, google has some good tutorials. But basically, that's the direction you should go with this :)

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 4:40 pm
by Nytol
Someone suggested this...
OK Just use $_GET

Make a new file called view.php

Code: Select all

$pic = mysql_real_escape_string($_GET['n']);
echo '<img src="http://www.site.com/pictures/' . $pic . '.jpg" />' 
So you can generate a url like
http://www.site.com/view.php?n=123
PHP will take the variable 123 in the url, and echo it in the img tags. The same concept can be applied to the digg URL.
Is that what you mean? :)

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 4:42 pm
by jackpf
Yes.

Although there's no point in running mysql_real_escape_string() on $_GET['n'] unless you're using it in a query. You should, however, run urldecode() on it to replace any special url characters, and basename() to make sure no one's being naughty (incase you don't have open basdir restriction turned on, which you probably do...but best to be safe).

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 4:46 pm
by Nytol
You wouldnt happen to have a bit of code example I would put in the view.php file and in my main HTML page (above the image) would you? I know it's asking a lot, but it would help tremendously.

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 4:48 pm
by jackpf
What do you mean?

I was under the impression you just wanted to display the image - the code you posted should do that.

Did you want it to do something else?

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 4:55 pm
by Nytol
Let's say my html page (index.php) looks like this:-

Code: Select all

<head>
<body>
<img src="image1.jpg">
</body>
</html>
 
I want to create a "permalink" above the image so when you click the link it would go to a new page called image1.html, with the image in it. And the new page (image1.html) could be customized with a .css file etc.

Sorry if I appear very newbish (I am), it's all so new to me. :)

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 4:57 pm
by jackpf
Well, you could do something like this:

Code: Select all

<head>
<body>
<a href="view.php?n=image1"><img src="image1.jpg"></a>
</body>
</html>
And then the code you posted will display that image.

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 5:38 pm
by Nytol
Okay thanks jackpf. I will try and see what I can come up with. Thanks for your help, really appreciate it. :)

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 6:42 pm
by jackpf
No problem. Let me know how it goes.

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 6:52 pm
by Nytol
Right, the problem I am having is that I have no way of passing the name of the image in the div (and path to the image) into view.php. Each image name, and path to the image, is unique so how would I do that? Any ideas?

I have thumbnails in one div, and when you click the thumbnail you see the full image in another div. I used some javascript I found to do that. I think it just scans the main image div for an IMG tag and places the main image there.

This is the javascript:-

Code: Select all

<script type="text/javascript">
$(document).ready(function() {  
 
    //Show Banner
    $(".main_image .desc").show(); //Show Banner
    $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
 
    //Click and Hover events for thumbnail list
 
    $(".image_thumb ul li").click(function(){ 
        //Set Variables
        var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
        var imgDesc = $(this).find('.block').html();    //Get HTML of block
        var imgDescHeight = $(".main_image").find('.block').height();   //Calculate height of block 
        
        if ($(this).is(".active")) {  //If it's already active, then...
            return false; // Don't click through
        } else {
            //Animate the Teaser                
            $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
                $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 );
                $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
            });
        }
        
        $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
        $(this).addClass('active');  //add class of 'active' on this list only
        return false;
        
    }) .hover(function(){
        $(this).addClass('hover');
        }, function() {
        $(this).removeClass('hover');
    });
            
    //Toggle Teaser
    $("a.collapse").click(function(){
        $(".main_image .block").slideToggle();
        $("a.collapse").toggleClass("show");
    });
    
});//Close Function
</script>

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 7:59 pm
by jackpf
I have never needed to use jquery, so I unfortunately don't know what that code does...

Although I found the concept quite interesting so I decided to have a go. I wouldn't normally just write code for someone, but since I found this quite intriguing....I'll make an exception :P

This should work. Just do <img src"..." onclick="img.new_img(this);" /> for each image.

Anyway here's the code

Code: Select all

<script>
    var img = {
        div: '',
        
        init: function()
        {
            this.div = document.getElementById('img_container');
        },
        
        new_img: function(source_img)
        {
            this.remove_old_imgs();
            
            var newImg = document.createElement('img');
            
            with(newImg)
            {
                src = source_img.src;
            }
            
            this.div.appendChild(newImg);
        },
        
        remove_old_imgs: function()
        {
            while(this.div.childNodes[0])
            {
                this.div.removeChild(this.div.childNodes[0]);
            }
        }
    };
    
    window.onload = function()
    {
        img.init();
    }
</script>

Re: Create Static Page from JPEG

Posted: Thu Jul 30, 2009 8:08 pm
by Nytol
Thanks! Will give this a go. :)