PDA

View Full Version : Ultimate Fade In Slideshow 2.4 Help!! PNG Alpha Trans Not Working!



nicholasbianco23
04-19-2011, 11:41 PM
1) Script Title: Ultimate Fade-In Slideshow 2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Dear Ladies and Gentlemen. I have an enormous problem that I desperately need your wisdom to resolve. I am working on a website for a local restaurant and I am required to have an image slideshow. You can see it here...

http://www.embellishcustoms.com/bradysnew/

I did some looking around and it seems that there is a fix to be able to use alpha transparency and pngs when using this script, but there is only a fix available for version 1.51 (to my knowledge). I tried to find the same area where John wanted me to put the fix into on the previous version, but I could not locate it in the new 2.4, The post I am referring to is located here...

http://www.dynamicdrive.com/forums/showthread.php?t=29499

I need your help. I want to use alpha transparency for my images, now there is a huge black block around all of them, making it look very unpleasant. If possible, can you please take a look at my situation and provide some guidance and direction? I would eternally appreciate the help. I am looking forward to your responses. Thank You.

- Nicholas

azoomer
04-20-2011, 02:37 AM
adding some css like this may work:


#fadeshow1, #fadeshow1 .gallerylayer {
background-color: none !important;
}

nicholasbianco23
04-20-2011, 02:44 AM
I just inserted the css you provided into my index.html stylesheet and it did not work... thanks for the attempt. Maybe im placing the css in the wrong spot? Somewhere in the external javascript code maybe? here is my html...


<html>

<head>
<title>Brady's At The Station! - Ramsey's Only Authenitc Irish Restaurant and Bar. - www.bradysatthestation.net</title>
<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: [635, 485], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["2.png", "", "", ""],
["1.png", "", "", ""],
["3.png"],
["4.png", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>
<style>

body {
margin: 0px;
background-image: url('mainpagebg.jpg');
background-repeat: no-repeat;
background-position: absolute;
background-color: #000000;
}

#logo {
position: absolute;
top: 0px;
left: 0px;
}

#navigation {
position: absolute;
left: 600px;
top: 0px;
}

#facebook {
width: 600px;
height: 50px;
position: absolute;
left: 600px;
top: 105px;
}

#maintable {
position: absolute;
top: 150px;
left: 5px;
}

#maintext {
font-family: Calibri;
font-size: 12pt;
color: #FFFFFF;
vertical-align: top;
}
#mainright {
width: 635px;
vertical-align: top;
}

#fadeshow1, #fadeshow1 .gallerylayer {
background-color: none !important;
}

</style>
</head>

<body>
<div id="logo"><img src="logo.jpg"></div>
<div id="navigation">
<table cellpadding="0" cellspacing="0" height="100"><tr>
<td><img src="home1.png" class="domroll home2.png"></td><td><img src="photos1.png" class="domroll photos2.png"></td><td><img src="menu1.png" class="domroll menu2.png"></td><td><img src="specials1.png" class="domroll specials2.png"></td><td><img src="parties1.png" class="domroll parties2.png"></td><td><img src="contactus1.png" class="domroll contactus2.png"></td>
</tr></table>
</div>
<div id="facebook">
<p align="right"><img src="facebookstuff.png"></p>
</div>
<div id="maintable">
<table cellpadding="0" cellspacing="0" width="100%" height="100%"><tr>
<td id="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur dictum quam, ac viverra enim convallis sit amet. Vestibulum in leo ut diam venenatis auctor. Sed eu sapien lectus, ut tincidunt eros. Maecenas consectetur bibendum felis, molestie tempus quam tempor non. Pellentesque molestie, est in convallis molestie, nibh orci congue sem, in cursus ante elit in lectus. Vivamus et leo at tortor ullamcorper pretium. Mauris fringilla convallis purus dapibus laoreet. Vivamus velit erat, bibendum vitae tincidunt ac, egestas eget ligula. Sed scelerisque leo nec tortor sollicitudin ullamcorper. Nullam ut elit at orci varius scelerisque sit amet ac odio. Pellentesque velit augue, sodales et malesuada ac, placerat mattis leo. Proin posuere leo in quam egestas vitae consectetur arcu semper. Proin convallis purus ut erat pretium volutpat tincidunt nulla faucibus. Vivamus elit erat, vulputate eget dapibus vel, egestas non ante. Vestibulum lacinia, augue at commodo pretium, lectus tortor ullamcorper diam, in euismod nisi justo at felis. Quisque vitae felis diam, et malesuada leo. Nunc lacinia porttitor magna, rhoncus vehicula magna congue varius. Nulla cursus eros ac enim ultricies tempus bibendum lectus porta. Phasellus feugiat dolor et lectus porta eu volutpat nulla tempor. Donec vitae erat diam, a vestibulum eros.

Mauris consectetur magna id quam aliquam gravida. Nunc vitae dolor nec lacus viverra mattis. Phasellus at risus eu sem pulvinar porttitor. Praesent posuere venenatis eros, et vulputate lacus vestibulum nec. Ut at dui non magna eleifend imperdiet blandit sed massa. Aenean et convallis orci. Fusce sed urna quis augue vestibulum egestas. Etiam elementum egestas tincidunt. Curabitur nec metus vel eros gravida adipiscing. Suspendisse arcu velit, fermentum eu ultrices et, mattis fringilla quam. Sed quis nulla sed tellus adipiscing pellentesque. Sed lobortis malesuada erat vel imperdiet.

Curabitur commodo sapien quis leo pellentesque volutpat. Nunc facilisis iaculis quam et porttitor. Phasellus consectetur mauris vel mauris commodo quis eleifend sem cursus. Etiam eget massa vel ante aliquam sollicitudin in vel mauris. Mauris orci nisl, tempor at laoreet tempus, molestie sit amet purus. Nullam posuere justo quis sem cursus a vehicula velit rhoncus. Vestibulum pellentesque tristique justo sed bibendum. Phasellus id nisl arcu, id vehicula massa. Maecenas facilisis tristique velit id pellentesque. Fusce eu sapien odio.

Sed sodales quam ut lectus mollis fringilla. Curabitur volutpat malesuada nibh et tempor. Maecenas eget libero eu nulla mattis faucibus vitae ac tortor. Nullam vitae arcu eget nisi dignissim pharetra. Pellentesque auctor, metus id luctus accumsan, ligula elit viverra turpis, in accumsan velit dolor quis odio. Morbi ac ipsum ut arcu pulvinar malesuada a sit amet ligula. Phasellus condimentum quam risus, vitae semper metus. Nam condimentum, orci nec fringilla scelerisque, lectus erat varius quam, sit amet mollis ante nunc at tellus. Fusce et libero est, vitae sagittis velit. Etiam a nibh quis arcu suscipit placerat sit amet vitae magna. Integer in vestibulum felis. Vivamus molestie erat quis lectus pellentesque id ultricies sem fermentum.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque et ante ut erat porttitor mattis eget ut lorem. Integer quis lacus turpis. Nullam convallis ullamcorper tristique. Aenean et sapien leo, a malesuada enim. Morbi sit amet venenatis odio. Phasellus faucibus turpis quis arcu condimentum et sollicitudin nisl scelerisque. Vivamus urna magna, rhoncus quis commodo non, congue sed erat. Pellentesque vel iaculis leo. Morbi sed elit risus. Nulla ultrices lacinia nulla vitae pharetra.
</td>
<td id="mainright">
<div id="fadeshow1"></div>
</td>
</tr></table>
</div>
<script src="chrisdomroll.js"></script>
</body>

</html>

azoomer
04-20-2011, 02:59 AM
True enough!
Try "background" instead of "background-color" like this:


#fadeshow1, #fadeshow1 .gallerylayer {
background: none !important;
}
If that doesn't do it I would try "transparent !important" instead of "none !important"

edit:
trying to validate the css on the page I get this error: Value Error : background-color none is not a color value : none none
so It seems my initial suggestion is wrong. It works in firebug though. Try transparent instead of none and see if it works and validates. In any case there may be some strangeness with the alpha trans in ie6, if you worry about that.

nicholasbianco23
04-20-2011, 03:16 AM
It works perfectly in Firefox, but looks terrible still in Internet Explorer. It rounded the corners...ha! I really appreciate it, but I am still no where if it only works in firefox.. :(

I uploaded the new index file.

http://www.embellishcustoms.com/bradysnew/

azoomer
04-20-2011, 06:45 AM
Yes indeed it looks weird in IE. It may be difficult or impossible to get IE to handle fading of alpha transparency. So if you must have the look with the shadow, you could probably create the shadow as a background image and put it in a wrapper with some padding around the fadeshow1 div. It would be easier to get IE to handle a static image with transparency. Then you could put the images without the shadow in the fadeshow.

sam2011
04-20-2011, 07:30 AM
I've used coin slider slideshow and lightbox in a single application page. All .js files and .css files are linked within head tags but they are not working unless one is commented out. I think some code in jquery.js (for slide show) and prototype.js (for slideshow) are coinciding. How to search exactly which code is accountable for the coexistence? Please help.

jscheuer1
04-20-2011, 08:48 AM
I would suggest using an HTML 5 DOCTYPE with this, though that might not be important (addition highlighted):


<!DOCTYPE html>
<html>

<head>
<title>Brady's At The Station! - Ramsey's Only Authenitc Irish Restaurant and Bar. - www.bradysatthestation.net</title>
<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: [635, 485], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["2.png", "", "", ""],
["1.png", "", "", ""],
["3.png"],
["4.png", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""/*@cc_on @*//*@if(@_jscript_version >= 5),
oninit: function(){
if(jQuery.browser.version < 9){
var gs = this.setting;
gs.$gallerylayers.find('img').css({display: 'block', width: gs.dimensions[0], height: gs.dimensions[1]}).each(function(){
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')";
this.src = 'transparent_1px.gif';
});
}
}@end @*/
})

</script>

What makes it work is the added code to the on page call, also highlighted. You may have to scroll the code block to see it all.

You will need a transparent .gif image (In Firefox, right click and 'save link as ....'):

http://home.comcast.net/~jscheuer1/side/transparent_1px.gif

Put it in the same folder as the page, or put its path in the script there. If using a relative path, it should be relative to the page.

About jQuery and Lightbox, you would need to update the version of Prototype and its helper scripts. But it really makes much more sense to use a jQuery based Lightbox like ColorBox or FancyBox.

nicholasbianco23
04-20-2011, 04:09 PM
John Your Amazing. Thank you so much for the prompt reply and fix! Works great!!

azoomer
04-20-2011, 06:18 PM
Great fix.

jscheuer1
04-22-2011, 10:23 AM
Thanks folks! For optimal layout and simplicity, this would suffice/be preferable:


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [635, 485], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["2.png", "", "", ""],
["1.png", "", "", ""],
["3.png"],
["4.png", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""/*@cc_on @*//*@if(@_jscript_version >= 5),
oninit: function(){
if(jQuery.browser.version < 9){
var gs = this.setting;
gs.$gallerylayers.find('img').css({display: 'inline'}).each(function(){
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')";
this.src = 'transparent_1px.gif';
});
}
}@end @*/
})

</script>

Notes: For images IE automatically takes the dimensions from the src of the filter. This gives them the mysterious 'layout' they need for this or any filter. Or they may take that from the script. The display inline avoids a mysterious top offset (14px in this case) which otherwise cannot be modified or easily compensated for.

Madevilz
05-09-2011, 04:49 PM
John,

I added your script to my site, it works in IE, but I get a small red X at the left top corner of the images as seen here:
http://mail.dynamicdrive.com/forums/attachment.php?attachmentid=3874&stc=1&d=1304959558

There is also a problem with the slideshow, the first image remains much longer than the other images, what could be causing this?
Some time it gets stuck with the first image, and doesnt show the others at all.

In Firefox, the code did not work, so I had to add this line to my css:

#fadeshow1, #fadeshow1 .gallerylayer {
background-color: transparent!important;
}

So everything works fine in Firefox now, but IE remains a problem. Could you help me please?


My website: http://www.tsocommunication.ca/test/APES/

The Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Action Pour l'Environnement de Saint-Basile</title>

<link href="css/cssstyle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="anylinkmenu.css" />

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

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

/***********************************************
* AnyLink JS Drop Down Menu v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code
***********************************************/

</script>

<script type="text/javascript">

//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")


</script>


<script type="text/javascript" src="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: [540, 396], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/1.png"],
["images/2.png"],
["images/3.png"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""/*@cc_on @*//*@if(@_jscript_version >= 5),
oninit: function(){
if(jQuery.browser.version < 9){
var gs = this.setting;
gs.$gallerylayers.find('img').css({display: 'inline'}).each(function(){
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')";
this.src = 'transparent_1px.gif';
});
}
}@end @*/
})



</script>



</head>

<body>

<table width="1026" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="280" colspan="3" valign="top"><table width="1026" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="540" height="396"><div id="fadeshow1"></div></td>
<td width="486" align="right" valign="top" background="images/entete.png"><table width="475" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="186" colspan="2" align="left" background="images/menuback.png"><br />
<br />

<br />
<br />
<span class="menu">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" class="menuanchorclass menul" rel="anylinkmenu1">APES</a> • <a href="#" class="menuanchorclass menul" rel="anylinkmenu2">Projets</a> • <a href="#" class="menuanchorclass menul" rel="anylinkmenu3">Média</a> • <a href="liens.html" class="menul">Liens utiles</a> • <a href="faq.html" class="menul">FAQ</a></span></td>

</tr>
<tr>
<td height="13" colspan="2" align="left"></td>
</tr>
<tr>
<td width="205" height="50" align="left">&nbsp;</td>
<td width="270" align="left" background="images/entete.png"><span class="titrebleu">Contact</span> <span class="content"><br />
</span><span class="nouvelles">514-799-7120 <a href="mailto:info@apes-saint-basile.qc.ca"><br />

info@apes-saint-basile.qc.ca</a><br />
Case postal 1035<br />
Saint-Basile-le-Grand &nbsp;J3N 1M5<br />
</span></td>
</tr>
</table></td>
</tr>

</table></td>
</tr>
<tr>
<td width="756" bgcolor="#FFFFFF"><table width="730" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="231" valign="top"><img src="images/logo.gif" alt="logo" width="231" height="223" /></td>
<td width="499" align="left" valign="top"><p class="content">Action pour l’Environnement de Saint-Basile-le-Grand (APES) est un organisme sans but lucratif qui a pour mission d’observer, analyser et informer la population Grandbasiloise sur ce qui se passe en matière d’environnement sur le territoire de la ville et offrir des alternatives éco-responsables à notre mode de vie actuel.</p>
<p class="content">Fusce rutrum, tellus ac pharetra convallis, eros risus pharetra odio, nec condimentum metus sapien quis leo. Praesent malesuada vulputate faucibus. Vestibulum sit amet purus lorem, ut euismod leo. Vivamus consectetur orci eu sapien lobortis et vulputate neque ultrices. Fusce rutrum, tellus ac pharetra convallis, eros risus pharetra odio, nec condimentum metus sapien quis leo.</p></td>

</tr>
<tr>
<td height="65" colspan="2" valign="middle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/apa.jpg" width="118" height="40" alt="apa" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/saintbasile.jpg" width="192" height="40" alt="ville saint-basile" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/desjardins.jpg" width="190" height="40" alt="desjardins" /></td>
</tr>
</table></td>
<td width="252" align="left" valign="top" bgcolor="#FFFFFF"><p><span class="date">25 mars 2011</span><br />
<span class="nouvelles"><strong>Jour de la Terre:</strong><br />
Deux événements vous sont offerts.<br />

<a href="nouvelles.html">Lire plus...</a></span> </p>
<p><span class="date">22 janvier 2011</span><br />
<span class="nouvelles">Procès-verbal de L'Assemblée générale annuelle de l'APES le 13 décembre dernier.<br />
Pour télécharger le procès-verbal de l'Assemblée générale annuelle cliquez<a href="http://www.apes-saint-basile.qc.ca/PV_AGA_%20APES_%2013_dec_2010.pdf" target="_blank"> ici</a>.</span></p>
<p class="nouvelles" align="right"><a href="nouvelles.html">Archives</a></p></td>

<td width="18" align="left" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td colspan="3"><img src="images/tableau_b.png" width="1026" height="13" /></td>
</tr>
<tr>
<td height="25" colspan="3" valign="bottom" class="pied">2011 © Action pour l’environnement de Saint-Basile-le-Grand. Conception <a href="http://www.tsocommunication.ca" target="_blank" class="menul">TSO Communication</a>.</td>

</tr>
</table>

</body>
</html>

jscheuer1
05-09-2011, 07:13 PM
You need the transparent_1px.gif image (right click, 'Save Target As...'):

http://home.comcast.net/~jscheuer1/side/transparent_1px.gif

put it in the same folder as the page.

Also, just playing with this again, I see that my 'optimal code' from my last post needs dimensions for when the images aren't cached yet:


/*@cc_on @*//*@if(@_jscript_version >= 5),
oninit: function(){
if(jQuery.browser.version < 9){
var gs = this.setting;
gs.$gallerylayers.find('img').css({display: 'inline'}).each(function(){
this.style.width = gs.dimensions[0] + 'px';
this.style.height = gs.dimensions[1] + 'px';
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')";
this.src = 'transparent_1px.gif';
});
}
}@end @*/

Those will do as long as your images are all the same size as the dimensions given for the slideshow.

Also, the original post on this question was for a quirks mode page. I see your page is in standards compliant mode. That may or may not make a difference as to the precise layout and/or even the need for dimensions. But it has nothing to do with the red X. To fix that, you need the image as mentioned above.

Madevilz
05-09-2011, 07:57 PM
Great everything works now, thanks John!