Create Static Page from JPEG

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Nytol
Forum Newbie
Posts: 13
Joined: Thu Jul 30, 2009 3:53 pm

Create Static Page from JPEG

Post 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.
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: Create Static Page from JPEG

Post by jackpf »

Why don't you just have the image link to itself? Creating a page for each image sounds a bit excessive.
Nytol
Forum Newbie
Posts: 13
Joined: Thu Jul 30, 2009 3:53 pm

Re: Create Static Page from JPEG

Post 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. :(
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: Create Static Page from JPEG

Post 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 :)
Nytol
Forum Newbie
Posts: 13
Joined: Thu Jul 30, 2009 3:53 pm

Re: Create Static Page from JPEG

Post 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? :)
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: Create Static Page from JPEG

Post 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).
Nytol
Forum Newbie
Posts: 13
Joined: Thu Jul 30, 2009 3:53 pm

Re: Create Static Page from JPEG

Post 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.
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: Create Static Page from JPEG

Post 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?
Nytol
Forum Newbie
Posts: 13
Joined: Thu Jul 30, 2009 3:53 pm

Re: Create Static Page from JPEG

Post 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. :)
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: Create Static Page from JPEG

Post 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.
Nytol
Forum Newbie
Posts: 13
Joined: Thu Jul 30, 2009 3:53 pm

Re: Create Static Page from JPEG

Post by Nytol »

Okay thanks jackpf. I will try and see what I can come up with. Thanks for your help, really appreciate it. :)
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: Create Static Page from JPEG

Post by jackpf »

No problem. Let me know how it goes.
Nytol
Forum Newbie
Posts: 13
Joined: Thu Jul 30, 2009 3:53 pm

Re: Create Static Page from JPEG

Post 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>
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: Create Static Page from JPEG

Post 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>
Nytol
Forum Newbie
Posts: 13
Joined: Thu Jul 30, 2009 3:53 pm

Re: Create Static Page from JPEG

Post by Nytol »

Thanks! Will give this a go. :)
Post Reply