JavaScript Slideshow - Java script

How would I incorporate the photo shuffler into AV Auto Electric
for the photos on the left side (to be the same size as the car
on the right side). The webpage for AV Auto Electric is below and
below it is the Slide Show (Photo Shuffler)
Plus the printout for the Photo Shuffler
I am not good at Javascript so what can I use for external script
and what do I need for internal script
-
Thank You
falcon

http://freetutorials.name/Reference1/AVAutoElectric.html

http://www.web3mantra.com/tag/css-image-slideshow/
//
// CSS Photo Shuffler v1.0 by
// Carl Camera
// http://iamacamera.org
//
// SetOpacity Function and inpiration from Photo Fade by
// Richard Rutter
// http://clagnut.com
//
// License: Creative Commons Attribution 2.5 License
// http://creativecommons.org/licenses/by/2.5/
//

// Customize your photo shuffle settings
//
// * Surround the target <img /> with a <div>. specify id= in both
// * set background-repeat:no-repeat in CSS for the div
// * The first and final photo displayed is in the html <img> tag
// * The array contains paths to photos you want in the rotation.
// If you want the first photo in the rotation, then it's best to
// put it as the final array image. All photos must be same dimension
// * The rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.

var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array(
"http://static.flickr.com/53/149047107_78ebdaf8bc.jpg?v=0",
"http://static.flickr.com/48/149048049_3523869ba4.jpg?v=0",
"http://static.flickr.com/56/149047438_fabcf2f7ce.jpg?v=0"
);
var gblPauseSeconds = 7.25;
var gblFadeSeconds = .85;
var gblRotations = 1;

// End Customization section

var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblImageRotations = gblDeckSize * (gblRotations+1);

window.onload = photoShufflerLaunch;

function photoShufflerLaunch()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
gblStartImg = theimg.src; // save away to show as final image

document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}

function photoShufflerFade()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);

// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * gblFadeSeconds);

// fade top out to reveal bottom image
if (gblOpacity < 2*fadeDelta )
{
gblOpacity = 100;
// stop the rotation if we're done
if (gblImageRotations < 1) return;
photoShufflerShuffle();
// pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
setTimeout("photoShufflerFade()",30); // 1/30th of a second
}
}

function photoShufflerShuffle()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);

// copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];
// set img opacity to 100
setOpacity(theimg,100);

// shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;
// decrement rotation counter
if (--gblImageRotations < 1)
{
// insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;
}

// slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}

function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999pacity;

// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}

 

Take a look this site that I just created. As you can see, it needs adjustment.

 

Nice job
-
I think the adjustment is original picture sizing
-
I am trying to duplicate it (the slideshow) in the original webpage
http://freetutorials.name/Reference1/AVAutoElectric.html
-
still not doing very good with the slideshow. I think my problem is incorrect address
of the java script.
-
Thank you for all the help
will continue trying
falcon

 

Right now I’m stuck. I just can’t get the images to fade correctly, it shuffles ok though. Anyone got an idea?

Here is the page if you did not see the link above.

I agree with Ishkey completely. Those images look awful. They look ok if you resized the screen to the images original dimension.

 

I removed one image from the list and now it is working ok now. Not sure why.

On the image thing, I think one solution is to set the maximum image width to 100%. This way the image will change to a smaller size in a small screen; but viewing the image in full screen, say you have a huge monitor, the size of the image will be shown in its original size. Take a look the image (car) at the upper right corner of this page and resize your screen and see how it changes.

 

I think it is the original size problem.
I will put the pictures in pixels, it may correct the problem
-
Thank you tomw and ishkey
-
falcon

 

I’m glad you’re seeing what we saw. Another thing about image size, I would limit the size shown as this might distract the visitor from seeing what is important – your content. When I’m viewing the page using full screen I can’t help myself staring at those two photos at the top. Use maximum size limit as I have suggested would help. Also, you set the font size to 90%. It is not a good idea for old people like me.

I added Google map into the page. This will give the visitors more info about that location. By adding the map, I set the minimum size of the screen to 1220px so that the content from the middle column will not cover up the map. You should set a limit to yours too.

Hope this helps.

 

I found a script that will solve the problem with fading. Take a look this page to see how it works. The write up is in DynamicDrive website.

 

finally got it working
http://freetutorials.name/Reference1/AVAutoElectric.html
now some correcting to do
having problems making it an external script
after that I need to smooth up the fade and transition
Yes it still is fluid, will correct later
-
Thank you for all the help tomw and ishkey
falcon
note: this has been quite a learning experience

 

All you need to do is put the content of your JavaScript and put it a file and reference it using this:

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

Where my_folder is your folder (if any) and my_javascript is your script file name.

This page shows example.