Blending Image Slideshow Script - pic size

**Peppy** · 04-20-2008, 01:15 AM

1) Script Title: Blending Image Slideshow Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/image4.htm

3) Describe problem:
a) My pics are all of different size
How can I change the code so the pics are showing up in there original size
I guess it is this part of the code

Code:

<a href="javascript:gotoshow()"><img src="1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

b) I want to insert a div - to fix the place were the pics should appear.
Do I have to insert it in the head section or body section?

Thanks for your help

**Nile** · 04-20-2008, 02:31 AM

You do not need a <head> section, well if you want it to validate you do. But....

To make the images original sizes you can try doing this:

Code:

<a href="javascript:gotoshow()"><img src="1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" /></a>

That should work.

Hope this Helps,
Nile

**jscheuer1** · 04-20-2008, 04:27 AM

This script (Swiss Army):

http://www.dynamicdrive.com/dynamici...army/index.htm

is much better suited to handling images of various sizes, and can be made to look like the Blending Image Slideshow Script, which incidentally doesn't work in as many browsers or as well in many of those in which it does work as does Swiss Army. To configure Swiss Army to handle images of various sizes, simply follow the installation instructions and specify for its width and height the largest width and the largest height of the images in your image collection.

**Peppy** · 04-20-2008, 07:30 AM

THANK YOU so much! It works perfectly now!

**Peppy** · 04-20-2008, 09:48 AM

Just one little thing

:

Wich part of the code do I have to change if I DONT want to put a link on the pics?

Code:

<script language="JavaScript1.1">
<!--

//*****************************************
// Blending Image Slide Show Script- 
// © Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
//*****************************************

//specify interval between slide (in mili seconds)
var slidespeed=3000

//specify images
var slideimages=new Array("image1.gif","image2.gif","image3.gif")

//specify corresponding links
var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com")

var newwindow=1 //open links in new window? 1=yes, 0=no

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}

//-->
</script>

Code:

<a href="javascript:gotoshow()"><img src="image1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

<script language="JavaScript1.1">
<!--

var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()

//-->
</script>

<p align="center"><font face="arial" size="-2">This free script provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

THANKS AGAIN FOR YOUR PRECIOUS HELP!

**Nile** · 04-20-2008, 01:30 PM

In the first script you have this:

Code:

var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com")

Delete that, and in the second script you have:

Code:

<a href="javascript:gotoshow()"><img src="image1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

Make it this:

Code:

<img src="image1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100>

**Peppy** · 04-20-2008, 03:23 PM

Thank you Nile, you're the best!

**Nile** · 04-20-2008, 03:25 PM

Any time.

**dfaust** · 07-01-2008, 04:34 PM

[QUOTE=Nile;139604]
To make the images original sizes you can try doing this:

Code:

<a href="javascript:gotoshow()"><img src="1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" /></a>

I am having trouble making this work for me. In the header section, do I replace "image1.gif" etc. with "ourwedding1.jpg, ourwedding2.jpg" etc?
and then in the body section do I replace image1.gif with ourwedding1.jpg
and repete the line of code for ourwedding2.jpg, putting the specific image sizes in each line?

Using your space-slash in place of image size didn't do it for me but I'm not clear on the 1.gif part.

Is that clear? This is not easy to explain ......

**dfaust** · 07-15-2008, 12:09 AM

I got the images inserted ok now -- it's only in the header that you do this replace: "image1.gif" etc. with "ourwedding1.jpg
I never got the sizes to adjust though. I resized my images as close as I could to similiar sizes so they don't cause the page to jump all over the screen. Thank anyway.

Thread: Blending Image Slideshow Script - pic size

Thread Tools

Search Thread

Blending Image Slideshow Script - pic size

The Following User Says Thank You to Nile For This Useful Post:

The Following User Says Thank You to Nile For This Useful Post:

more on image size

Bookmarks

Bookmarks

Posting Permissions