Log in

View Full Version : 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
http://farm5.static.flickr.com/4136/4796666062_400f31c68c_b.jpg

Here's the current code I'm using.

Javascript:

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

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


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


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