[Tutorial] Making an Image Viewer with Javascript and PHP

**KoOL** · **Making an Image Viewer with Javascript and PHP -** 06-12-2008, 02:22 PM

We will be using PHP and javascript but it can be done without php.

First things first, we need to create an array for the pictures:

PHP Code:


			
<?php

$pictures = array(

'fly01.jpg',

'fly02.jpg',

'fly03.jpg',

'fly04.jpg',

'fly05.jpg',

'fly06.jpg',

'fly07.jpg',

'fly08.jpg',

'fly09.jpg',

'fly10.jpg',

'fly11.jpg',

'fly12.jpg'

);

These are the pictures that will be loaded. We also need to know the path to where we can find these pictures:

Code:

$path = '/images/slides/';

We will then want the sizes that the images will be (these are the sizes I used):

PHP Code:


			
$big_x_size = '594';
$big_y_size = '396';

$small_x_size = '40';
$small_y_size = '27';

Now to get the small image sizes, because there are 12 images, I divided the $big_x_size by 12 and took 5px away to give me the $small_x_size. I then opened photoshop and changed the size of one of the images to 40 and looked at the new height to find it's $small_y_size.

Now if you are using different image sizes / image numbers, this is how to work out the smaller sizes mathematically:

width of small image = (width of big image / number of images) - 5
height of small image = (height of big image / 100) * ((width of small image / width of big image) * 100)

So if you wanted that in php the image sizes would look like this:

PHP Code:


			
$big_x_size = 'ENTER WIDTH OF BIG IMAGE';
$big_y_size = 'ENTER HEIGHT OF BIG IMAGE';

$small_x_size = ($big_x_size / count($pictures))-5;
$small_y_size = ($big_y_size/100)*(($small_x_size / $big_x_size)*100);

Making an Image Viewer with Javascript and PHP

by Carnage on Tue Jun 03, 2008 11:35 am
Ok, today we are going to be looking at how to create an imageviewer somewhat like the one I did for a band:

My Element - Pictures

We will be using PHP and javascript but it can be done without php.

First things first, we need to create an array for the pictures:

Code: Select all<?php

$pictures = array(

'fly01.jpg',

'fly02.jpg',

'fly03.jpg',

'fly04.jpg',

'fly05.jpg',

'fly06.jpg',

'fly07.jpg',

'fly08.jpg',

'fly09.jpg',

'fly10.jpg',

'fly11.jpg',

'fly12.jpg'

);

These are the pictures that will be loaded. We also need to know the path to where we can find these pictures:

Code: Select all$path = '/images/slides/';

We will then want the sizes that the images will be (these are the sizes I used):

Code: Select all$big_x_size = '594';
$big_y_size = '396';

$small_x_size = '40';
$small_y_size = '27';

Now to get the small image sizes, because there are 12 images, I divided the $big_x_size by 12 and took 5px away to give me the $small_x_size. I then opened photoshop and changed the size of one of the images to 40 and looked at the new height to find it's $small_y_size.

Now if you are using different image sizes / image numbers, this is how to work out the smaller sizes mathematically:

width of small image = (width of big image / number of images) - 5
height of small image = (height of big image / 100) * ((width of small image / width of big image) * 100)

So if you wanted that in php the image sizes would look like this:

Code: Select all$big_x_size = 'ENTER WIDTH OF BIG IMAGE';
$big_y_size = 'ENTER HEIGHT OF BIG IMAGE';

$small_x_size = ($big_x_size / count($pictures))-5;
$small_y_size = ($big_y_size/100)*(($small_x_size / $big_x_size)*100);

Basically we are dividing the $big_x_size by the number of $pictures and subtracting 5 to get the $small_x_size and then we are finding the percentage the small width is to the big width and making the small height that much smaller. If you catch my drift

Now that that's out of the way, we shall create the javascript to swap the images:

Quote:

echo '

<script language="javascript">
var current = 0; // the number in the array the current big image is
function imageSwap(div)
{
if(current != div) // if the current big image is not the smaller image that has been clicked on
{
document.getElementById(div).style.border = \'3px solid #3366ff\'; // change the border of the clicked on image
document.getElementById(current).style.border = \'0px\'; // take away the border of the old small image

// change the big images content to that of the little image
document.getElementById(\'bigpic\').innerHTML = document.getElementById(div).innerHTML;

// change the width of the firstChild of the big images div (which will be the image itself)
document.getElementById(\'bigpic\').firstChild.wid th = \''.$big_x_size.'\';

// change the height of the firstChild of the big images div (which will be the image itself)
document.getElementById(\'bigpic\').firstChild.hei ght = \''.$big_y_size.'\';

current = div;
}
}
</script>

Hopefully that will make more sense when you see the next bit of code. If it throws an error, it might be because of the comments (I can't remember if javascript allows comments like that) so take them out.

Let's start the table:

Quote:

<table style="padding: 5px; width: 600px; border: 1px solid #d4e4ff;">
<tr><td colspan="'.count($pictures).'" id="bigpic"><img src="'.$path.$pictures[0].'" width="'.$big_x_size.'" height="'.$big_y_size.'"></td></tr>
<tr>
';

So now we have started a the table with the big td having a colspan of the amount of images and the big image by default the first image in the array and it's sizes the ones we specified earlier.

Now we need to create a loop to make all the smaller image <td>s rather than writing them out manually.

Quote:

$p = 0;

// while $p is smaller than the number of images
while($p < count($pictures))
{

// if $p == 0 then we are on the first image which by default needs the border
$b = ($p == 0)? 'border: 3px solid #3366ff;' : 'border: 0px;';

// echo the <td>
echo '<td id="'.$p.'" onClick="imageSwap(\''.$p.'\');" style="'.$b.'"><img src="'.$path.$pictures[$p].'" width="40" height="30" id="pic'.$p.'"></td>';

$p++; // add 1 to $P
}

And to finish it off we just need to end the table and the php tag.

Quote:

echo '</tr></table>';

?>

And there you have it, one basic image viewer to go on your website.

Full code:

PHP Code:


			
<?php

$pictures = array(

'fly01.jpg',

'fly02.jpg',

'fly03.jpg',

'fly04.jpg',

'fly05.jpg',

'fly06.jpg',

'fly07.jpg',

'fly08.jpg',

'fly09.jpg',

'fly10.jpg',

'fly11.jpg',

'fly12.jpg'

);

$path = '/images/slides/';

$big_x_size = '594';
$big_y_size = '396';

$small_x_size = '40';
$small_y_size = '27';

echo '

<script language="javascript">
var current = 0;
function imageSwap(div)
{
if(current != div)
{
document.getElementById(div).style.border = \'3px solid #3366ff\';
document.getElementById(current).style.border = \'0px\';

document.getElementById(\'bigpic\').innerHTML = document.getElementById(div).innerHTML;
document.getElementById(\'bigpic\').firstChild.width = \''.$big_x_size.'\';
document.getElementById(\'bigpic\').firstChild.height = \''.$big_y_size.'\';

current = div;
}
}
</script>

<table style="padding: 5px; width: 600px; border: 1px solid #d4e4ff;">
<tr><td colspan="'.count($pictures).'" id="bigpic"><img src="'.$path.$pictures[0].'" width="'.$big_x_size.'" height="'.$big_y_size.'"></td></tr>
<tr>
';

$p = 0;

while($p < count($pictures))
{

$b = ($p == 0)? 'border: 3px solid #3366ff;' : 'border: 0px;';

echo '<td id="'.$p.'" onClick="imageSwap(\''.$p.'\');" style="'.$b.'"><img src="'.$path.$pictures[$p].'" width="40" height="30" id="pic'.$p.'"></td>';

$p++;
}

echo '</tr></table>';

?>

And because I'm nice, I will give you the code without the PHP for those of you who just want to stick to html/javascript:

Quote: