FORUMS: list search recent posts

Javasript Photo Gallery

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Lucy Hird
Javasript Photo Gallery
on Dec 8, 2009 at 11:58:08 pm

Hello. I wonder if anyone can help. I'm building a website for my son with Mac Dreamweaver MX. I'd planned to download an extension for a flash gallery to display and manage my photos in dreamweaver, but hadn't realised these wouldn't be compatible with my 2002 version. I've used the photoshop web gallery in the past, but it's such a faff if you want to add new images, or want the viewer to sit within one of your pages - so I decided to mash together a few scripts to get as far as the gallery on this page:

http://www.dunkydoughnut.co.uk/photos-firsthalloween.html

I'll be swapping the links on the right with thumbnails, and fixing the first link once I've figured that bit out, but I'm really stuck with the big main picture. I'd like to specify the max space the image can take up, and have the pictures fill it whilst retaining their landscape/portrait aspect ratio. They look a bit weird stretched, but there must be an easier way than saving all the files again as .gifs so they are all exactly the same size but with bags of empty space around them. Anyone know of a piece of code I could add? Thanks

This is the code I'm using:

<td valign=top>
<script type="text/javascript">
function LoadGallery(pictureName,imageFile,titleCaption,captionText)
{
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = imageFile;
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
}
</script>
<img src="images/optimised gallery/Photos/h1.jpg" alt="Photo gallery" name="duncanGallery" "width="485" height="337" id="duncanGallery" style="border: 2px black solid"> <div id=duncanGalleryCaption>Mummy's Pumpkin</div>
<td valign=top>
<ol>
<li><a href="#_self" onclick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h1.jpg','duncanGalleryCaption','Mummy's Pumpkin')">Mummy's Pumpkin</a></li>
<li><a href="#_self" onclick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h2.jpg','duncanGalleryCaption','Duncan Opening Pumpkin')">Duncan Opening Pumpkin</a></li>
<li><a href="#_self" onclick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h3.jpg','duncanGalleryCaption','Duncan Sat By Pumpkin')">Duncan Sat By Pumpkin</a></li>
<li><a href="#_self" onclick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h4.jpg','duncanGalleryCaption','Duncan Skeleton')">Duncan Skeleton</a></li>
<li><a href="#_self" onclick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h5.jpg','duncanGalleryCaption','Duncan and Mummy')">Duncan and Mummy</a></li>
<li><a href="#_self" onclick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h6.jpg','duncanGalleryCaption','Family Pic')">Family Pic</a></font></li>
</ol>
</td>


Return to posts index

cowcowcow
Jameson Wallace
Re: Javasript Photo Gallery
on Dec 9, 2009 at 11:52:54 am

yeah, there is a good trick for this. dont have much time to type it all in, but...

basically you need to put the image inside a div, specify the height & width of the div, but not the height & width of the image.

then just set the div's style to overflow:hidden;

hope that helps

| Jameson Wallace
| Motion Graphics Festival
| New Motion + New Sound + New Code
| http://MGFest.com


Return to posts index

Lucy Hird
Re: Javasript Photo Gallery
on Dec 11, 2009 at 1:48:54 am

Hello. What you said was very useful thank you. At least everything fits on the screen now. Although I really didn't want the taller images to be cropped at the bottom. The border seems to stop dead too. I was hoping for something which would resize any photo reguardless of it's size or shape, without going outside the space I've saved for it. Has anyone anymore suggestions? I've tried experimenting with different height and width values, and even wrappers and min/max height value, but I don't think my coding skills is up to it.

I'm now as far as:

<td valign=top>
<script type="text/javascript">
function LoadGallery(pictureName,imageFile,titleCaption,captionText)
{
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = imageFile;
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
}
</script>
<style type="text/css">

.placeholder {
float:left;
height:340px;
width:470px;
overflow:hidden
}
</style>

<div class="placeholder">
<img src="images/optimised gallery/Photos/h1.jpg" alt="Photo gallery" name="duncanGallery" " id="duncanGallery" style="border: 2px black solid"></div>

<div id=duncanGalleryCaption>Mummy's Pumpkin</div>
<td valign=top><table width="177" border="0" cellspacing="3" cellpadding="3">
<tr>
<td><a href="#_self" onClick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h1.jpg','duncanGalleryCaption','Mummy's Pumpkin')"><img alt="" src="images/optimised%20gallery/Thumbnails/h1.jpg" width="45" height="45"></a></td>
<td><a href="#_self" onClick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h2.jpg','duncanGalleryCaption','Duncan Opening Pumpkin')"><img alt="" src="images/optimised%20gallery/Thumbnails/h2.jpg" width="45" height="45"></a></td>
<td><a href="#_self" onClick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h3.jpg','duncanGalleryCaption','Duncan Sat By Pumpkin')"><img alt="" src="images/optimised%20gallery/Thumbnails/h3.jpg" width="45" height="45"></a></td>
</tr>
<tr>
<td><a href="#_self" onClick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h4.jpg','duncanGalleryCaption','Duncan Skeleton')"><img alt="" src="images/optimised%20gallery/Thumbnails/h4.jpg" width="45" height="45"></a></td>
<td><a href="#_self" onClick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h5.jpg','duncanGalleryCaption','Duncan and Mummy')"><img alt="" src="images/optimised%20gallery/Thumbnails/h5.jpg" width="45" height="45"></a></td>
<td><a href="#_self" onClick="LoadGallery('duncanGallery','images/optimised gallery/Photos/h6.jpg','duncanGalleryCaption','Family Pic')"><img alt="" src="images/optimised%20gallery/Thumbnails/h6.jpg" width="45" height="45"></a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table></td>


Return to posts index


Rocco Tripaldi
Re: Javasript Photo Gallery
on Dec 9, 2009 at 4:34:28 pm

Not sure if this will work, but try removing the height attribute from the main image.



Return to posts index

Lucy Hird
Re: Javasript Photo Gallery
on Dec 11, 2009 at 1:42:03 am

Hello. Thanks for the suggestion. I tried what you said and it stopped the warping and worked horizontally. However it displayed the portrait images at the same width at the landscape images (if that makes any sense) - so what I ended up with was everytime I clicked on a thumbnail linked to a portrait image, it would balloon up so huge you'd have to scroll down the browser window to see the whole thing. What I was wanting was something like an imagery box, that all the photos would fit inside at their correct scale, without going outside the box reguardless of their shape and dimensions.


Return to posts index

Rocco Tripaldi
Re: Javasript Photo Gallery
on Dec 11, 2009 at 3:36:53 pm

Try replacing the javascript function found around line 153 of your code with this modified function.
When you copy and paste, make sure to include the opening and closing script tags. There are two variables in this function that you'll need to replace and they are labeled. I have not tested this, so it may not work. Remember to keep the original function in tact, in case this doesn't work.

<script type="text/javascript">
function LoadGallery(pictureName,imageFile,titleCaption,captionText)
{
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = imageFile;
if(picture.width > picture.height)
{
picture.width = 300; //Replace "240" with the maximum width for a landscape
}
else
{
picture.height = 340; //Replace "340" with the maximum height for a portrait
}
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
}
</script>


Return to posts index


Lucy Hird
Re: Javasript Photo Gallery
on Dec 11, 2009 at 10:15:00 pm

Hi Rocco, I was getting excited about this because it was working so well. However for some weird reason, if I click a portrait photo, then a landscape, then a portrait photo, it resizes great, but if I dare to click a landscape photo twice at any point, all the photos stretch again. I don't understand how it can half work! LOL

http://www.dunkydoughnut.co.uk/test

click the middle two thumbnails, then try switching and you'll see what I mean


Return to posts index

Rocco Tripaldi
Re: Javasript Photo Gallery
on Dec 15, 2009 at 3:13:55 pm

ok. here's another attempt. replace the LoadGallery function with the following:

<script type="text/javascript">
function LoadGallery(pictureName,imageFile,titleCaption,captionText)
{
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
var temp_img = new Image();
temp_img.src = imgFile;

picture.src = imageFile;
if(temp_img.width > temp_img.height)
{
picture.width = 470; //Replace "470" with the maximum width for a landscape
}
else
{
picture.height = 340; //Replace "340" with the maximum height for a portrait
}
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
}
</script>


I think that should do it.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]