Ultimate fade in slideshow image clipping..

**xwhiplashx** · 10-22-2010, 07:37 AM

1) Script Title: Ultimate Fade-in Slideshow

2) Script URL (on DD): Ultimate Fade-in Slideshow

3) Describe problem: Hey, so im trying to make an slideshow utilizing this awsome script but a problem i have with it is this....

Code:

dimensions: [307, 464], //width/height of gallery in pixels. Should reflect dimensions of largest image

it is causing my images to be cliped not resized and it would be far to much work to resize all the images.... im using a .css file to resize an overlay and background but the .css file wont overide the script, here is what i have in my .css

Code:

#page_layout {
        position: absolute;
        -webkit-transform-origin: 0px 0px;
        -webkit-transform: scale(0.5);  
        width: 640px;
        height: 960px;
}

}

#slideshow {
    position: absolute; 
    -webkit-transform:translateX(167px);
    top: 68px;
    width: 307px;
    height: 464px;
    background-color: transparent;
    z-index: 2;


}

Code:

<body>
<div id="page_layout">

	<img src="Overlay/Overlay.png" id="Overlay" />

	<div id="slideshow">     
    </div>

</div>

but the images are staying there normal 640 x 960 cant figure this out...

**jscheuer1** · 10-22-2010, 09:00 AM

There's nothing in the css you posted that addresses the images' dimensions. And even if there were, the dimensions (307 x 464) you say are specified for the slideshow in its init are not proportional to the images' actual dimensions as stated in your post (640 x 960).

It would help to understand the generated HTML structure and inline scripted styles of a slideshow (the first slideshow on the demo page for example, here caught in mid-fade):

HTML Code:

<div id="fadeshow1" style="position: relative; visibility: visible; background: none repeat scroll 0% 0% black; overflow: hidden; width: 250px; height: 180px;">
<div class="gallerylayer" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none repeat scroll 0% 0% black; z-index: 1000; opacity: 0.855768;">
<img src="../dynamicindex4/pool.jpg" style="border-width: 0pt; display: none;">
<img src="../dynamicindex4/cave.jpg" style="border-width: 0pt; display: inline; margin-left: 0px; margin-top: 0px;">
<img src="../dynamicindex4/fruits.jpg" style="border-width: 0pt; display: none;">
<img src="../dynamicindex4/dog.jpg" style="border-width: 0pt; display: none; margin-left: 0px; margin-top: 0px;">
</div>
<div class="gallerylayer" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none repeat scroll 0% 0% black; z-index: 999; opacity: 1;">
<img src="../dynamicindex4/pool.jpg" style="border-width: 0pt; display: inline; margin-left: 0px; margin-top: 0px;">
<img src="../dynamicindex4/cave.jpg" style="border-width: 0pt; display: none;">
<img src="../dynamicindex4/fruits.jpg" style="border-width: 0pt; display: none; margin-left: 0px; margin-top: 0px;">
<img src="../dynamicindex4/dog.jpg" style="border-width: 0pt; display: none;">
</div>
<img src="loading.gif" style="position: absolute; left: 98px; top: 35px; display: none;">
</div>

The width and height ( width: 250px; height: 180px;) of the wrapperid div (fadeshow1 here) are those set in its init. There are no width or height set for the images.

If you wanted to scale the above images (native dimensions 250 x 180) to - say 50%, it would be best to let the browser do this by only specifying the width in css:

Code:

#fadeshow1 .gallerylayer img {
	width: 125px;
}

But you would still have to set both dimensions correctly in the init where they are currently (affects only the dimensions of the gallery, not the images in it):

Code:

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

by changing that to:

Code:

dimensions: [125, 90], //width/height of gallery in pixels. Should reflect dimensions of largest image

So to scale yours to 48% (the closest whole percentage ratio of the widths - 307 divided by 640):

Code:

#fadeshow1 .gallerylayer img {
	width: 307px;
}

and:

Code:

dimensions: [307, 461], //width/height of gallery in pixels. Should reflect dimensions of largest image

**xwhiplashx** · 10-22-2010, 09:24 AM

thanks that did the trick!!

one last question for you...

is there a way to set up this script to use another way of finding the images? since i have 1000 images and adding all the code is a pain in the but...
can i somehow integrate your swiss_army.php so it will search a directory for the images?

my code looks like this so far

Code:

<html>
<head>
<title></title>
<link rel="stylesheet" href="Config/LockScreen.css" type="text/css">
<script type="text/javascript" src="Config/jquery.min.js"></script>
<script type="text/javascript" src="Config/fadeslideshow.js"></script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "slideshow",
	dimensions: [307, 464],
	imagearray: [
		["Images/001.jpg"],
		["Images/002.png"],
		["Images/003.jpg"],
		["Images/004.jpg"],
		["Images/189.jpg"]
	],
	displaymode: {type:'auto', pause:8500, cycles:0, wraparound:false, randomize:true},
	persist: false,
	fadeduration: 2000, 
	descreveal: "ondemand",
	togglerid: ""
})

</script>

</head>
<body>
<div id="page_layout">

        <img src="Wallpaper/Wallpaper@2x.png" id="Wallpaper" />
	<img src="Overlay/Overlay.png" id="Overlay" />
	<div id="slideshow"></div>

</div>
</body></html>

very new to all this....
you had talked a bit about this in this post but to be honest i got totally lost...
thanks in advance!

**jscheuer1** · 10-22-2010, 02:53 PM

I hope know this requires a PHP enabled server. That said, replace:

Code:

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "slideshow",
	dimensions: [307, 464],
	imagearray: [
		["Images/001.jpg"],
		["Images/002.png"],
		["Images/003.jpg"],
		["Images/004.jpg"],
		["Images/189.jpg"]
	],
	displaymode: {type:'auto', pause:8500, cycles:0, wraparound:false, randomize:true},
	persist: false,
	fadeduration: 2000, 
	descreveal: "ondemand",
	togglerid: ""
})

</script>

with:

Code:

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "slideshow",
	dimensions: [307, 464],
<?php
function returnimages(){
	$dirname = './Images/';
	$pattern = '#\.(jpg|jpeg|png|gif|bmp)$#i';
	$files = array();
	if($handle = opendir($dirname)){
		while(($file = readdir($handle)) !== false){
			if(preg_match($pattern, $file)){
				array_push($files, "\t\t['" . $dirname . $file . "', '', '']");
			}
		}
		closedir($handle);
	}
	return "\timagearray: [\n" . implode(",\n", $files) . "\n\t],\n";
}

echo returnimages();
?>
	displaymode: {type:'auto', pause:8500, cycles:0, wraparound:false, randomize:true},
	persist: false,
	fadeduration: 2000, 
	descreveal: "ondemand",
	togglerid: ""
})
</script>

**xwhiplashx** · 10-22-2010, 09:31 PM

Originally Posted by jscheuer1

I hope know this requires a PHP enabled server. That said, replace:

Code:

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "slideshow",
	dimensions: [307, 464],
	imagearray: [
		["Images/001.jpg"],
		["Images/002.png"],
		["Images/003.jpg"],
		["Images/004.jpg"],
		["Images/189.jpg"]
	],
	displaymode: {type:'auto', pause:8500, cycles:0, wraparound:false, randomize:true},
	persist: false,
	fadeduration: 2000, 
	descreveal: "ondemand",
	togglerid: ""
})

</script>

with:

Code:

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "slideshow",
	dimensions: [307, 464],
<?php
function returnimages(){
	$dirname = './Images/';
	$pattern = '#\.(jpg|jpeg|png|gif|bmp)$#i';
	$files = array();
	if($handle = opendir($dirname)){
		while(($file = readdir($handle)) !== false){
			if(preg_match($pattern, $file)){
				array_push($files, "\t\t['" . $dirname . $file . "', '', '']");
			}
		}
		closedir($handle);
	}
	return "\timagearray: [\n" . implode(",\n", $files) . "\n\t],\n";
}

echo returnimages();
?>
	displaymode: {type:'auto', pause:8500, cycles:0, wraparound:false, randomize:true},
	persist: false,
	fadeduration: 2000, 
	descreveal: "ondemand",
	togglerid: ""
})
</script>

Thanks but for somereason in dreamweaver when i add this code i get a syntax error.... I am totaly new to javascripting and php ect so no idea why this wont work.... here is what my entire htlm code looks like maybe im missing something...... hoping to use the swiss_army.php to work with this...

Code:

<html>
<head>
<title></title>
<link rel="stylesheet" href="Config/LockScreen.css" type="text/css">
<script type="text/javascript" src="Config/jquery.min.js"></script>
<script type="text/javascript" src="Config/fadeslideshow.js"></script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "slideshow",
	dimensions: [307, 464],

<?php
function returnimages(){
	$dirname = './Images/';
	$pattern = '#\.(jpg|jpeg|png|gif|bmp)$#i';
	$files = array();
	if($handle = opendir($dirname)){
		while(($file = readdir($handle)) !== false){
			if(preg_match($pattern, $file)){
				array_push($files, "\t\t['" . $dirname . $file . "', '', '']");
			}
		}
		closedir($handle);
	}
	return "\timagearray: [\n" . implode(",\n", $files) . "\n\t],\n";
}

echo returnimages();
?>

	displaymode: {type:'auto', pause:8500, cycles:0, wraparound:false, randomize:true},
	persist: false,
	fadeduration: 2000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

</script>

</head>
<body>
<div id="page_layout">

    <img src="Wallpaper/Wallpaper@2x.png" id="Wallpaper" />
	<img src="Overlay/Overlay.png" id="Overlay" />
	<div id="slideshow"></div>

</div>
</body></html>

**jscheuer1** · 10-23-2010, 03:58 AM

Dreamweaver is not to be trusted on syntax errors visa vis javascript or PHP. Test the page on a PHP enabled server. If there are still problems, give me a link to the page.

Note: I tested the code on my WAMP server and it worked flawlessly. Unfortunately I have no access to a live PHP server to publish a demo. Even if I did though, you wouldn't be able to see the PHP code. PHP code is executed server side. In my WAMP demo ufade.php file I have (along with the rest of the code and HTML for the slideshow - ./pics_bak/ is where I'm pulling my images from):

Code:

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "slideshow",
	dimensions: [213, 101],
<?php
function returnimages(){
	$dirname = './pics_bak/';
	$pattern = '#\.(jpg|jpeg|png|gif|bmp)$#i';
	$files = array();
	if($handle = opendir($dirname)){
		while(($file = readdir($handle)) !== false){
			if(preg_match($pattern, $file)){
				array_push($files, "\t\t['" . $dirname . $file . "', '', '']");
			}
		}
		closedir($handle);
	}
	return "\timagearray: [\n" . implode(",\n", $files) . "\n\t],\n";
}

echo returnimages();
?>
	displaymode: {type:'auto', pause:8500, cycles:0, wraparound:false, randomize:true},
	persist: false,
	fadeduration: 2000, 
	descreveal: "ondemand",
	togglerid: ""
})
</script>

Once the page is loaded with PHP enabled, if I use the browser's view source I see for that very same bit:

Code:

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "slideshow",
	dimensions: [213, 101],
	imagearray: [
		['./pics_bak/jag1.jpg', '', ''],
		['./pics_bak/jag10.jpg', '', ''],
		['./pics_bak/jag11.jpg', '', ''],
		['./pics_bak/jag12.jpg', '', ''],
		['./pics_bak/jag13.jpg', '', ''],
		['./pics_bak/jag14.jpg', '', ''],
		['./pics_bak/jag2.jpg', '', ''],
		['./pics_bak/jag3.jpg', '', ''],
		['./pics_bak/jag4.jpg', '', ''],
		['./pics_bak/jag5.jpg', '', ''],
		['./pics_bak/jag6.jpg', '', ''],
		['./pics_bak/jag7.jpg', '', '']
	],
	displaymode: {type:'auto', pause:8500, cycles:0, wraparound:false, randomize:true},
	persist: false,
	fadeduration: 2000, 
	descreveal: "ondemand",
	togglerid: ""
})
</script>

So, as I say, this must be run on a PHP enabled server, and Dreamweaver isn't (as far as I know) capable of interpreting the code the way a PHP enabled server does.

Do you have a PHP enabled server?

Thread: Ultimate fade in slideshow image clipping..

Thread Tools

Search Thread

Ultimate fade in slideshow image clipping..

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

Bookmarks

Bookmarks

Posting Permissions