PDA

View Full Version : Ultimate Fade-In Slideshow: Background NOT transparent



avenue47
09-21-2012, 04:52 AM
1) Script Title: Ultimate Fade-In Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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! 4746

jscheuer1
09-21-2012, 05:22 AM
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
09-22-2012, 01:09 AM
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!4747
I have attached the magnifying glass png that I would use as the overlay for the slideshow.

jscheuer1
09-22-2012, 01:53 AM
How about if you could do it like so:

http://home.comcast.net/~jscheuer1/side/ufade_2/transparen-bg-h.htm


The background image below added to achieve preloading:

http://home.comcast.net/~jscheuer1/side/ufade_2/worldofsteam/contentbg.png

avenue47
09-22-2012, 04:11 AM
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
09-22-2012, 05:03 AM
No, all you need is the link to it on the Google servers.

If you have any other questions, feel free to ask