Jump to content

[SOLVED] PHP Image Viewer


webmaster1

Recommended Posts

No PHP can not create automobiles...
  :P

 

I was trying to keep it simple to get a prompt answer but I shall obey captain...

 

Three images would be outputted into a page (via a path stored in mySQL). 

 

The image viewer would present the three images as thumbnails (via resizing, I got lazy and avoided GD).

 

The thumbnails when clicked upon would display a larger version of the image above them (without opening a new window).

 

The first thumbnail would be displayed by default as the larger image.

 

It wouldn't require a thumbnail scroll function since there will only ever be three images.

 

Is this something that PHP can faciliate?

 

When I search for PHP image viewers online they mostly describe how to build image galleries which involves leaving the page to view the larger image.

Link to comment
Share on other sites

so now for a productive answer :P

 

 

php could create the image gallery like that however it would not have any animation,

 

i.e if you click on a new image the page would reload to show that image.

 

the only way round the arrows would be to once again reload the page but move the array of images along one image.

 

 

Link to comment
Share on other sites

Why not use JS or flash?  Do you have to use PHP or something?

 

I'm concerned that I won't be able to integrate PHP with either of them. I stumble enough when it comes to regular mark up.

 

If you follow this link you'll see a live demo and the complete source code of a JS solution:

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

 

The only problem is that it doesn't display the larger image by default. The image only shows on the mouse-over.

 

I wouldn't know where to begin in editing the JS source code.

So close but not close enough.

 

Link to comment
Share on other sites

Just follow the tutorial and replace the image names with however you dynamically take them out of your database with PHP.  Make sense?  This is almost all JS just a bit of PHP to dynamically change the image names unless you want to hard code them in.....

Link to comment
Share on other sites

Maq:

By the sounds of what your saying I can define my image paths as variables and insert them into JS just like html. I'm still stuck with the problem of having a default larger image displayed before any mouseover event but I geuss thats an issue for a JS forum (any reccomendations on a frequently active JS forum?)

 

Mchl:

Yep, I've used the lightbox approach before but I want the larger image to swap out within my page (as per the above pictured example) rather than imposed over my page.

 

 

Link to comment
Share on other sites

Got the aforementiond JS image viewer script working fine so that it allows a default image prior to mousing over and hence no blank space.

 

Here's the solution if anybody stumbles across this or would like to know how:

 

To load a default image simply paste it in the load div area of the html page:

 

<div id="loadarea" style="width: 600px">
<img src="IMAGEHERE.jpg" alt=""><br>
</div>

 

To ensure that there is no blank area on a mouse out simply ensure that following line of the JS file is set to FALSE:

 

hideimgmouseout: false, 
//Hide enlarged image when mouse moves out of anchor link?

 

:-*

 

 

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.