Ultimate Fade-In Slideshow: Background NOT transparent

[avenue47]

1) Script Title: Ultimate Fade-In Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I need the background for this script to be transparent. There is a previous thread, but I tried everything on that threat and nothing works. Everything is set to transparent in my code.

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

 <div id="fadeshow1" style="background-color:transparent; float: center; position: relative; z-index: 100;"></div>
</div>

I even changed opacity to 0 in the .js file.

The page I am working on is here: http://theworldofsteam.com/workingon/slideshow.html
I want it to be transparent (The files are all .png and transparent) so I can see the paper background.

Thanks so much! fadeslideshow.js

[jscheuer1]

Revert to the official version of the script from the demo page. Keep the other slideshow specific styles in the stylesheet and add this to the end of the stylesheet:

#fadeshow1 {
	background: transparent !important;
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

But you would actually be better off if you revert to the official version of the script, get rid of this junk or move it to after the DOCTYPE tag (where it currently is, it will mess up IE):

<!--Generated by the CoffeeCup Web Editor - www.coffeecup.com
			
			
Description...
			
		
@created:           20/09/2012 - 18:20:00
@today:             20/09/2012
@project:           No Project
@path:              /Users/VickiGoutzoulis/Desktop/maglass slideshow/slideshow.html
			
@author:            Your name
@company:           Your company
@Copyright:         A copyright notice
			
@version:           $Revision:$
-->

And add this highlighted code after the slideshow init as shown:

	<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [512, 513], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["fire.png", "", "", ""],
		["helmet.png", "", "", ""],
		["eye.png"],
		["gail.png", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 00, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

jQuery(function($){ // customized for theworldofsteam.com

	var wrapperid = 'fadeshow1', // set wrapper id the same as the slideshow
	backcolor = 'black', // set background color
	container = $(document), // slideshow's background parent
	bgwidth = 700, bgheight = 927, // set variables for background image's dimensions
	bgimsrc = 'contentbg.png'; // set container's background image

	//////////////////// No Need to Edit Below ////////////////////

	var $show = $('#' + wrapperid), off, cmid, ch, newstyle, thestyle, // get slideshow wrapper div, reserve some variables
	topcoord = -$show.parent().offset().top; // since it won't change, set it now

	$show.bind('repositionEvent', function(){ // function to write and install overriding styles for slideshow background
		off = $show.position(); cmid = container.width() / 2;
		newstyle = '<style title="' + wrapperid + 'posbg" type="text/css">#' + wrapperid + ', #' + wrapperid + ' .gallerylayer {' +
		'background: ' + backcolor + ' url(' + bgimsrc + ') ' + (cmid - off.left - bgwidth / 2) + 'px ' + topcoord + 'px no-repeat !important;}<\/style>';
		if((thestyle = $('style[title=' + wrapperid + 'posbg]')).size()){
			thestyle.replaceWith(newstyle);
		} else {
			$('head').append(newstyle);
		}
	});

		$show.trigger('repositionEvent'); // set the show's background
		$(window).resize(function(){$show.trigger('repositionEvent');}); // do it again should the window be resized

});
</script>

Oh, and change this:

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

to:

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

Or get rid of it entirely, I don't think you're using it.

[avenue47]

1) Script Title: Ultimate Fade-In Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I don't know what I did, but I need help getting the show to fade slower, so the magnifying glass remains solid. It was working before, but then I tinkered with the background transparency and it's not working.

If it's easier, can someone help me figure out a way to create an overlay div for the slideshow? I couldn't get it to line up with the CSS.
I have the images, but what I currently have is http://theworldofsteam.com/workingon/slideshow.html
If I could have the images fade (the script) and then have an overlay image of my magnifying glass, that would be great, but how would I create that nesting div?

I just need the easiest way to have the magnifying glass overlay the fading slideshow, so I'm all for your ideas!
Thanks so much!
I have attached the magnifying glass png that I would use as the overlay for the slideshow.

[jscheuer1]

How about if you could do it like so:

http://home.comcast.net/~jscheuer1/s...paren-bg-h.htm


The background image below added to achieve preloading:

[avenue47]

Do I have to download anything from jquery and upload it to my site, or do I just need the .js file for the slideshow?

Thanks so much for all your help!!!

[jscheuer1]

No, all you need is the link to it on the Google servers.

If you have any other questions, feel free to ask