Attaching an image border to javascript slideshow?

**Brenna** · 07-15-2010, 03:35 PM

I can overlap the image but then it is fixed and does not fit all screen resolutions.

Here is the template I'm trying to crack.
http://happy-tales-rabbitry.webs.com/TESTING.htm

See the slide on the center of the page?
But here's the problem on other resolutions...
800x600

Here's the current code I'm using.

Javascript:

PHP Code:


<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><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 mygallery=new fadeSlideShow({

    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

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

    imagearray: [

        ["http://farm5.static.flickr.com/4115/4794274820_d03c4b152c_b.jpg"],

        ["http://farm5.static.flickr.com/4135/4794274970_b8c487c487_b.jpg"],

        ["http://farm5.static.flickr.com/4094/4794941328_683dc6dbb4_b.jpg"],

        ["http://farm5.static.flickr.com/4081/4794307069_fd9d62816e_b.jpg"],

["http://farm5.static.flickr.com/4075/4794307625_d4c43ac785_b.jpg"],

["http://farm5.static.flickr.com/4135/4794941090_7623b65f33_b.jpg"],

["http://farm5.static.flickr.com/4101/4794308087_c33f765a0e_b.jpg"],

        ["http://farm5.static.flickr.com/4100/4794941580_3f803431e8_b.jpg"],

["http://farm5.static.flickr.com/4140/4794307329_e9b1cc4403_b.jpg"],

        ["http://farm5.static.flickr.com/4094/4794307921_9a77ba9e7f_b.jpg", "", "", "tetxt."] //<--no trailing comma after very last image element!

    ],

    displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},

    persist: false, //remember last viewed slide and recall within same session?

    fadeduration: 800, //transition duration (milliseconds)

    descreveal: "ondemand",

    togglerid: ""

        

       })





</script>

<head>

And HTML/Divs.

PHP Code:


<div style="position: absolute; width: 99%; height: 10%; z-index: 1; left: -2px; top: 110px" id="fadeshow1">

&nbsp;</div>

<div style="position: absolute; width: 99%; height: 10%; z-index: 1; left: 36px; top: 0px" id="layer2"><td nowrap><img src="http://www.deviantart.com/download/171403493/Webhead_by_s_Anava_s.png"></td></tr>

</div>

**jscheuer1** · 07-16-2010, 02:28 PM

You cannot have a td inside a div. Some of the other markup wasn't needed/helping. The position property and the dimensions of the slide show are set by the script, best not to override those unless you have to, which I don't believe you have to here. They cannot be overridden by inline style anyway. I made up a working demo. This part:

Code:

<div style="position: relative; width: 689px; height: 272px; overflow: hidden;">
<div style="z-index: 1; left: 46px; top: 90px" id="fadeshow1"></div> 
<div style="position: absolute; z-index: 1; left: 0; top: -20px;" id="layer2"><img src="http://www.deviantart.com/download/171403493/Webhead_by_s_Anava_s.png"></div>
</div>

may go inside a td if you like. But that td should (probably must) be at least 689x272 (like the container I made is - the size of that portion of your overlay image that you are actually using). The demo:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</script><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 mygallery=new fadeSlideShow({ 
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow 
    dimensions: [641,180], //width/height of gallery in pixels. Should reflect dimensions of largest image 
    imagearray: [ 
        ["http://farm5.static.flickr.com/4115/4794274820_d03c4b152c_b.jpg"], 
        ["http://farm5.static.flickr.com/4135/4794274970_b8c487c487_b.jpg"], 
        ["http://farm5.static.flickr.com/4094/4794941328_683dc6dbb4_b.jpg"], 
        ["http://farm5.static.flickr.com/4081/4794307069_fd9d62816e_b.jpg"], 
["http://farm5.static.flickr.com/4075/4794307625_d4c43ac785_b.jpg"], 
["http://farm5.static.flickr.com/4135/4794941090_7623b65f33_b.jpg"], 
["http://farm5.static.flickr.com/4101/4794308087_c33f765a0e_b.jpg"], 
        ["http://farm5.static.flickr.com/4100/4794941580_3f803431e8_b.jpg"], 
["http://farm5.static.flickr.com/4140/4794307329_e9b1cc4403_b.jpg"], 
        ["http://farm5.static.flickr.com/4094/4794307921_9a77ba9e7f_b.jpg", "", "", "tetxt."] //<--no trailing comma after very last image element! 
    ], 
    displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false}, 
    persist: false, //remember last viewed slide and recall within same session? 
    fadeduration: 800, //transition duration (milliseconds) 
    descreveal: "ondemand", 
    togglerid: "",
    oninit: function(){
    	var show = this.setting.$wrapperdiv;
    	jQuery('#layer2').hover(function(){
    			show.mouseenter();
    		}, function(){
    			show.mouseleave();
    		}
    	);
    }
}) ;

</script> 
<head> 
</head>
<body>
<div style="position: relative; width: 689px; height: 272px; overflow: hidden;">
<div style="z-index: 1; left: 46px; top: 90px" id="fadeshow1"></div> 
<div style="position: absolute; z-index: 1; left: 0; top: -20px;" id="layer2"><img src="http://www.deviantart.com/download/171403493/Webhead_by_s_Anava_s.png"></div>
</div>

</body>
</html>

Notes: I also added some code to the on page portion of the script. With your overlay image, the slide show can no longer pause or show descriptions (you have only one - on the last image) without this added code. Links (you currently have none) to the images in the slide show will not fire though without more added code.

Thread: Attaching an image border to javascript slideshow?

Thread Tools

Search Thread

Attaching an image border to javascript slideshow?

Bookmarks

Bookmarks

Posting Permissions