A simple fix for Photo Album script v2.0?

**radiofriendlybox** · 09-11-2007, 12:20 AM

1) Script Title: Photo Album script v2.0

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...photoalbum.htm

3) Describe problem: How would I modify the script so that the thumbnails sit in a div box (or any container) with predefined dimensions? This would help me evenly disribute the thumbnails across the table, and save me from having to Photoshop each one to the same size. I would then probably need to be able to center the thumbnail within the container. Thanks much.

**jscheuer1** · 09-11-2007, 05:04 AM

It really is best to resize your images, rather than to use the browser for this. It saves bandwidth and disk space, and if done right results in better looking thumbnails.

If you still want to try what you are talking about, use a style like so:

Code:

.photonavlinks img {
width:75px;
}

This will cause most browsers to scale the image's height proportionately.

The dimensions of everything else about the gallery are already configurable, so I'm not really sure what the rest of your question is about.

**ddadmin** · 09-11-2007, 05:33 AM

The good thing about the Photo Gallery script is that you can pretty much customize the action to take when a thumbnail is clicked, via its onselectphoto event handler:

Code:

thepics.onselectphoto=function(img, link){
if (link!=null) //if this image is hyperlinked
window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
return false //cancel default action when clicking on image, by returning false instead of true
}

So if what you're asking is how to load the enlarged images in a DIV on the page, you can do that based on how familiar you're with JavaScript. For example, you can integrate Image Thumbnail Viewer to be used to launch the enlarged image. Here's the complete HTML page:

Code:

<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />

<script src="thumbnailviewer.js" type="text/javascript">

/***********************************************
* Image Thumbnail Viewer Script- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<script type="text/javascript" src="photogallery.js">

/***********************************************
* Photo Gallery Script v2.0- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.photogallery{ /*CSS for TABLE containing a photo album*/
}

.photogallery img{ /*CSS for images within an album*/
border: 1px solid green;
}

.photonavlinks{ /*CSS for pagination DIV*/
font: bold 14px Arial;
}

.photonavlinks a{ /*CSS for each navigational link*/
margin-right: 2px;
margin-bottom: 3px;
padding: 1px 5px;
border:1px solid gray;
text-decoration: none;
background-color: white;
}

.photonavlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>

<body>

<script type="text/javascript">

thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer

//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

var myvacation=new Array()
myvacation[0]=["photo1.jpg", "", "photo1-large.jpg"]
myvacation[1]=["photo2.jpg", "Our car", "photo2-large.jpg"]
myvacation[2]=["photo3.jpg", "Our dog", "photo3.jpg"]

//initiate a photo gallery
//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
var thepics=new photogallery(myvacation, 3, 1, '700px', '600px')

//OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
//DELETE everything below to disable
//Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
thepics.onselectphoto=function(img, link){
if (link!=null){ //if this image is hyperlinked
thumbnailviewer.stopanimation()
thumbnailviewer.loadimage(link)
}
return false //cancel default action when clicking on image, by returning false instead of true
}

</script>

The code in red are new/ noteworthy.

**radiofriendlybox** · 09-11-2007, 07:14 PM

oh, i figured it out. you just need to change the following line in the javascript:

" document.write('<td valign="top"></td>') "

you can add a class in there, and then define it in the stylesheet.

example: " document.write('<td class="shoe"></td>') "

and:

.shoe{
width:80px;
}

that way, no matter the size of the thumbnails, they pics can be evenly distributed along the tabel.

**dmwhipp** · 07-02-2009, 05:41 AM

Just implemented this: http://www.dwwebdesigns.com/portfolio.html

It works perfectly - thanks!

Thread: A simple fix for Photo Album script v2.0?

Thread Tools

Search Thread

A simple fix for Photo Album script v2.0?

Bookmarks

Bookmarks

Posting Permissions