Fade-in slideshow no images

**andyj** · 07-25-2010, 01:53 AM

1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Describe problem:

Hi,

Im trying to make my page viewable on an ipad, but I dont really know html or java.

My flash page is here www.andy-jacobs.com

I have put up a page Im trying to get working on www.andy-jacobs.com/slider.html

I can't get any images to appear in the frame. Have I missed something simple? I left one of the tinypic links in the code to see if it was a problem in calling the images from the images folder.

Any help would be greatly appreciated.

Regards,
Andy

**jscheuer1** · 07-25-2010, 07:52 AM

The file:

Code:

http://www.andy-jacobs.com/fadeslideshow.js

As pointed to in your page's source code by this tag:

HTML Code:

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

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Is a 404 not found.

Upload the script to the server to the location specified.

There could also be other problems. This much has to be fixed first.

**andyj** · 07-25-2010, 09:58 AM

Hey,

Thanks for the help I saw the first line and thought it was calling the script from somewhere online.

I've got it calling in the images now and I think I need to make them smaller, but is there any way I can get my arrows to align either side of the images?

same link www.andy-jacobs.com/slider

Thanks again.

Andy

**jscheuer1** · 07-25-2010, 03:28 PM

I changed your markup and styles, try this entire page out:

Code:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#fadeshow2, #fadeshow2 .gallerylayer {
 	background-color: white !important;
}
#fadeshow2, .prev, .next {
	float: left;
}
.prev, .next {
	display: block;
	height: 554px;
	overflow: hidden;
}
.prev img, .next img {
	margin-top: -45px;
}
.status {
	display: block;
	clear: left;
	text-align: center;
	width: 1142px;
	padding-top: 5px;
	font-weight: bold;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [1100, 554], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/absolux.jpg", "", "", "Branding Visual for absolux  www.absolux.net"],
		["images/biasfurnature.jpg", "", "", "Jamie McLellan Design. www.jamiemclellan.com Assisted in design, 3D modeling, technical drawings and renders"],
		["images/btreceiver.jpg", "", "", "Design for Harmonypark. Design and 3D renders"],
		["images/podchair.jpg", "", "", "Fletcher Systems. www.fletcher-systems.co.nz 3D render"],
		["images/cutlery.jpg", "", "", "Jamie McLellan Design. www.jamiemclellan.com Assisted in design, 3D modeling and renders"],
		["images/candycreme.jpg", "", "", "Fuman Graphic Design. www.fuman.co.nz 3D modeling renders to present new packaging ideas"],
		["images/cube.jpg", "", "", "Q Speakers. www.qspeakers.com Assisted in initial design, 3D modeling, technical drawings and renders"],
		["images/tdlink.jpg", "", "", "Jamie McLellan Design. www.jamiemclellan.com 3d Renders"]//<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "slideshowtoggler"
})

</script>


</head>

<body>


<p><img src="images/andywordmark.jpg" width="307" height="120" /><br>
<div id="slideshowtoggler">
<a href="#" class="prev"><img src="images/arrow_prev.jpg" style="border-width:0" /></a>
<div id="fadeshow2"></div>
 <a href="#" class="next"><img src="images/arrow_next.jpg" style="border-width:0" /></a>
<span class="status"></span></div>

</body>
</html>

**andyj** · 07-25-2010, 07:24 PM

Thats fantastic, thanks alot for yor help.

One last thing any way I can make the buttons and the images resize to fit the screen?

Looks great on my screen resolution, but might not on someone else's.

Any way to hide the 1/6 also.

Regards,
Andy

**jscheuer1** · 07-26-2010, 04:03 AM

For IE 8 we can use style zoom. But other browsers don't have that, or if they do (IE 7), it doesn't work right. Virtually all browsers have a zoom-like utility though, so we could alert/ask them to use it.

Regardless of that, your question made me look at what happens in a narrower window. It's not pretty. Everything wraps sort of like it was before. We can fix that by setting the width of the slideshowtoggler division to 1156px. Your other question is easy, just remove the status span. Without it, the 1/6, etc. will not show, and we can also remove its styles.

So, putting that all together, we get:

Code:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#fadeshow2, #fadeshow2 .gallerylayer {
 	background-color: white !important;
}
#fadeshow2, .prev, .next {
	float: left;
}
.prev, .next {
	display: block;
	height: 554px;
	overflow: hidden;
}
.prev img, .next img {
	margin-top: -45px;
}
#slideshowtoggler {
	width: 1152px;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<!--[if gt IE 7]>
<script type="text/javascript">
jQuery(function($){
	var w = $(window).data('iezoom', true);
	function winsize(){
		var ww;
		if((ww = w.width()) < 1166){
			document.body.style.zoom = ww / 1166;
		} else {
			document.body.style.zoom = '';
		}
	}
	winsize();
	w.resize(winsize);
});
</script>
<![endif]-->
<script type="text/javascript">
jQuery(function($){
	var w = $(window), zoomOut = window.opera? 'hit the minus key' : 'Ctrl -';
	if(w.data('iezoom')){
		return;
	} else if(w.width() < 1166){
		alert('To view this page properly, please either enlarge your window or zoom out (' + zoomOut + ').');
	}
});
</script>
<script type="text/javascript">

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [1100, 554], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/absolux.jpg", "", "", "Branding Visual for absolux  www.absolux.net"],
		["images/biasfurnature.jpg", "", "", "Jamie McLellan Design. www.jamiemclellan.com Assisted in design, 3D modeling, technical drawings and renders"],
		["images/btreceiver.jpg", "", "", "Design for Harmonypark. Design and 3D renders"],
		["images/podchair.jpg", "", "", "Fletcher Systems. www.fletcher-systems.co.nz 3D render"],
		["images/cutlery.jpg", "", "", "Jamie McLellan Design. www.jamiemclellan.com Assisted in design, 3D modeling and renders"],
		["images/candycreme.jpg", "", "", "Fuman Graphic Design. www.fuman.co.nz 3D modeling renders to present new packaging ideas"],
		["images/cube.jpg", "", "", "Q Speakers. www.qspeakers.com Assisted in initial design, 3D modeling, technical drawings and renders"],
		["images/tdlink.jpg", "", "", "Jamie McLellan Design. www.jamiemclellan.com 3d Renders"]//<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "slideshowtoggler"
})

</script>


</head>

<body>


<p><img src="images/andywordmark.jpg" width="307" height="120" /><br>
<div id="slideshowtoggler">
<a href="#" class="prev"><img src="images/arrow_prev.jpg" style="border-width:0" /></a>
<div id="fadeshow2"></div>
 <a href="#" class="next"><img src="images/arrow_next.jpg" style="border-width:0" /></a>
</div>

</body>
</html>

**andyj** · 07-26-2010, 05:05 AM

Thanks again for the help John,

Sorry to bother you again, but I was kinda hoping that it would be possible to do something like this code I found in a forum here:

http://www.dynamicdrive.com/forums/s...ad.php?t=28888

Code:

<html>
<head>
<title>Image</title>

<script type="text/javascript">

function resizeImage()
{
	var window_height = document.body.clientHeight
	var window_width  = document.body.clientWidth
	var image_width   = document.images[0].width
	var image_height  = document.images[0].height
	var height_ratio  = image_height / window_height
	var width_ratio   = image_width / window_width
	if (height_ratio > width_ratio)
	{
		document.images[0].style.width  = "auto"
		document.images[0].style.height = "100%"
	}
	else
	{
		document.images[0].style.width  = "100%"
		document.images[0].style.height = "auto"
	}
}
</script>

<body onresize="resizeImage()">
<center><img onload="resizeImage()" margin="0" border="0" src="MyImage.jpg"></center>
</body>


</head>
</html>

I made a preview of how this would work here:
http://www.andy-jacobs.com/images/imagetest.html

**jscheuer1** · 07-26-2010, 12:26 PM

That works well with one image that you want to be 100% of either the height or the width of the window, whichever fits the window best. It doesn't help you with the dimensions of the slide show, its container (neither of which have an aspect ratio like images do, it's this intrinsic aspect ratio property of images that makes this work at all for images), the toggler images, not even with the dimensions of the images in the slideshow (you don't want any of these images, probably not any of these elements, to be 100% of the window in either dimension).

If using varying percentages, things can quickly get out of sync from the perspective of layout, not fitting exactly, that sort of thing. So things would probably have to be calculated in terms of pixels.

So, I'm not sure how that would, or if it even could work out with a layout and script this complex.

I suppose there probably is a way to get some sort of effect like that. It would probably have to be tailored to the layout. It would certainly be easier if only one dimension were considered. Width here seems the most crucial.

I'm not sure I want to get into that though. Browsers can do this sort of thing themselves. Users will see the alert and respond. Even without the alert, I'd actually think it would be better without the alert, just get rid of:

Code:

<script type="text/javascript">
jQuery(function($){
	var w = $(window), zoomOut = window.opera? 'hit the minus key' : 'Ctrl -';
	if(w.data('iezoom')){
		return;
	} else if(w.width() < 1166){
		alert('To view this page properly, please either enlarge your window or zoom out (' + zoomOut + ').');
	}
});
</script>

The user will see when the content is too big for the browser window. Most users will then either enlarge their window if possible, or if not, zoom it out. This is a fairly common occurrence around the web, and is why browsers are made the way they are, to help the user take care of these things themselves. Most folks do.

If you feel you need to have this though, feel free to open a new thread on the topic.