Javasript Photo Gallery

[Bishop Zareh]

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
| https://MGFest.com

[Rocco Tripaldi]

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

[Lucy Hird]

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.

[Lucy Hird]

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>

[Rocco Tripaldi]

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;
}

[Lucy Hird]

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

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

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

[Rocco Tripaldi]

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;
}


I think that should do it.