| | |
| |
| |
|  |
|
| Creating a Gallery For Your Artworks This gallery can be modified to your specific needs. For the code on this page, I switched "image3" for "image1" to show how easy it is to modify this code. The PHP gallery (white text below) illustrates how simple PHP can make things - instead of searching your entire code to change an image, you can set variables to swap out links and images easily. Learn more about programming with PHP. Inside the <head></head> tags, you'll need the following javascript:
<script type="text/javascript">
function update(url,index,isSuper) {
document['PhotoBig'].src=url;
}
</script> This script is the same, whether you use the PHP or HTML version of this gallery. | The HTML version is as follows (simply copy and paste the yellow text into your code, then replace the "image1", "image5", "Link4", etc. to the locations of your links and images):
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr height="280"><td colspan="3" valign="top"><div style="padding:5px"><div align="center">
<img src="image1" name="PhotoBig" width="300" alt="meta tags" style="border:4px solid black">
<br /><br />
</div></div></td></tr><tr>
<td width="96"><div align="center">
<a onMouseOver="update('image1', 0, false); return false;">
<img src="image1" width="90" alt="meta tags" style="border:2px solid black"></a><br />
<a href="Link1" target="_blank"><font size="-1">View Artwork</font></a><br /><br />
<a onMouseOver="update('image4', 1, true); return false;">
<img src="image4" width="90" alt="meta tags" style="border:2px solid black"></a><br />
<a href="Link4" target="_blank"><font size="-1">View Artwork</font></a></div></td>
<td width="96"><div align="center">
<a onMouseOver="update('image2', 2, true); return false;">
<img src="image2" width="90" alt="meta tags" style="border:2px solid black"></a><br />
<a href="Link2" target="_blank"><font size="-1">View Artwork</font></a><br /><br />
<a onMouseOver="update('image5', 3, true); return false;">
<img src="image5" width="90" alt="meta tags" style="border:2px solid black"></a><br />
<a href="Link5" target="_blank"><font size="-1">View Artwork</font></a></div></td>
<td width="96"><div align="center">
<a onMouseOver="update('image3', 4, true); return false;">
<img src="image3" width="90" alt="meta tags" style="border:2px solid black"></a><br />
<a href="Link3" target="_blank"><font size="-1">View Artwork</font></a><br /><br />
<a onMouseOver="update('image6', 5, true); return false;">
<img src="image6" width="90" alt="meta tags" style="border:2px solid black"></a><br />
<a href="Link6" target="_blank"><font size="-1">View Artwork</font></a></div></td></tr></table>
For more about "img alt" and "meta tags" see the SEO Information page.
The PHP version is as follows (simply copy and paste the white text into your code, then change the variables at the top to the locations of your links and images):
//**********CHANGE THESE IMAGES TO THE LOCATIONS OF YOUR IMAGES**********
$image1 = "images/Gallery/1.jpg"; // STARTING IMAGE IN THE GALLERY AND 1st THUMBNAIL
$image2 = "images/Gallery/2.jpg"; // THE 2nd THUMBNAIL AND IT'S GALLERY IMAGE
$image3 = "images/Gallery/3.jpg"; // THE 3rd THUMBNAIL AND IT'S GALLERY IMAGE
$image4 = "images/Gallery/4.jpg"; // THE 4th THUMBNAIL AND IT'S GALLERY IMAGE
$image5 = "images/Gallery/5.jpg"; // THE 5th THUMBNAIL AND IT'S GALLERY IMAGE
$image6 = "images/Gallery/6.jpg"; // THE 6th THUMBNAIL AND IT'S GALLERY IMAGE
$Link1 = "http://www.jenpratt.com/Joomla/index.php/prodpage?myID=1001";
$Link2 = "http://www.jenpratt.com/Joomla/index.php/prodpage?myID=3001";
$Link3 = "http://www.jenpratt.com/Joomla/index.php/prodpage?myID=1011";
$Link4 = "http://www.jenpratt.com/Joomla/index.php/prodpage?myID=5008";
$Link5 = "http://www.jenpratt.com/Joomla/index.php/prodpage?myID=4010";
$Link6 = "http://www.jenpratt.com/Joomla/index.php/prodpage?myID=4001";
//**********END OF CHANGES - MODIFY THE REST TO MATCH YOUR SITE OR LEAVE AS IS**********
echo "<table width=\"300\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
echo "<tr height=\"280\"><td colspan=\"3\" valign=\"top\"><div style=\"padding:5px\"><div align=\"center\">";
echo "<img src=\"$image1\" name=\"PhotoBig\" width=\"300\" alt=\"meta tags\" style=\"border:4px solid black\">";
echo "<br /><br />";
echo "</div></div></td></tr><tr>
<td width=\"96\"><div align=\"center\">
<a onMouseOver=\"update('$image1', 0, false); return false;\">
<img src=\"$image1\" width=\"90\" alt=\"meta tags\" style=\"border:2px solid black\"></a><br />
<a href=\"$Link1\" target=\"_blank\"><font size=\"-1\">View Artwork</font></a><br /><br />
<a onMouseOver=\"update('$image4', 1, true); return false;\">
<img src=\"$image4\" width=\"90\" alt=\"meta tags\" style=\"border:2px solid black\"></a><br />
<a href=\"$Link4\" target=\"_blank\"><font size=\"-1\">View Artwork</font></a></div></td>
<td width=\"96\"><div align=\"center\">
<a onMouseOver=\"update('$image2', 2, true); return false;\">
<img src=\"$image2\" width=\"90\" alt=\"meta tags\" style=\"border:2px solid black\"></a><br />
<a href=\"$Link2\" target=\"_blank\"><font size=\"-1\">View Artwork</font></a><br /><br />
<a onMouseOver=\"update('$image5', 3, true); return false;\">
<img src=\"$image5\" width=\"90\" alt=\"meta tags\" style=\"border:2px solid black\"></a><br />
<a href=\"$Link5\" target=\"_blank\"><font size=\"-1\">View Artwork</font></a></div></td>
<td width=\"96\"><div align=\"center\">
<a onMouseOver=\"update('$image3', 4, true); return false;\">
<img src=\"$image3\" width=\"90\" alt=\"meta tags\" style=\"border:2px solid black\"></a><br />
<a href=\"$Link3\" target=\"_blank\"><font size=\"-1\">View Artwork</font></a><br /><br />
<a onMouseOver=\"update('$image6', 5, true); return false;\">
<img src=\"$image6\" width=\"90\" alt=\"meta tags\" style=\"border:2px solid black\"></a><br />
<a href=\"$Link6\" target=\"_blank\"><font size=\"-1\">View Artwork</font></a></div></td></tr></table>"; This gallery is a modified version of a code originally created by Robert Daniel Jr..
I found the original code here.
|
|
| |  | |
| |
|
| | | |
| |
| Handmade Clay Pendants, Earrings, & Other Jewelry | |
|
**Coming Soon** - Original jewelry designs by clay artist Jen Pratt. Each clay pendant design is handmade and fired. The artist then creates a mold to cast multiples of each design. Clay pendants are then hand cast, fired, and finished by the artist. Every pendant is completely unique - no two are exactly alike! |
build art website, build gallery website, artist website, take pictures of art, build light box, build lightbox, web programs, web design, web hosting, free web design programs
|
| |
|
|
| | |
