Results 1 to 6 of 6

Thread: Ultimate fade in slideshow image clipping..

  1. #1
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ultimate fade in slideshow image clipping..

    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...

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,412
    Thanks
    78
    Thanked 3,432 Times in 3,393 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    xwhiplashx (10-22-2010)

  4. #3
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!
    Last edited by xwhiplashx; 10-22-2010 at 09:49 AM.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,412
    Thanks
    78
    Thanked 3,432 Times in 3,393 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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>

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,412
    Thanks
    78
    Thanked 3,432 Times in 3,393 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •