Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Author Topic: Fading Images with CSS  (Read 5014 times)

Rob

  • Full Member
  • ***
  • Karma: 1
  • Posts: 219
    • http://www.ruthinweather.co.uk
Fading Images with CSS
« on: October 28, 2006, 12:07:11 AM »

Is it possible to get nice fading images in CSS?????

Something like this does - http://www.ruthin-wales.co.uk/
Logged
The road the righteous travel is like the sunrise, getting brighter and brighter until daylight has come.

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Fading Images with CSS
« Reply #1 on: October 28, 2006, 03:10:02 AM »

um... are you refering to the big slideshowlike bit on the page??
if so, no. That is done with javascript.
(Have a look at the source of the site. you might be able to snaffle it :) )

css will only provide formating of layout and content. It isn't 'active' in the page as such.

..and ... that page came in close on 1MB, which for us dialup users is a pain in the rear!!
Not very friendly use of images.!!!
Logged
Of all the things I have lost, it is my mind that I miss the most.

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Fading Images with CSS
« Reply #2 on: October 28, 2006, 06:49:14 PM »

UPDATED: October 30/06
This mod has been completely re-done to run fading slideshows in any version of sNews. The fade functions equally well in both IE and non-IE (Gecko-based) browsers.

This one is more flexible that the first it replaces... in that you can run more than one slideshow in your index.php file at the same time using the same script. Details are noted in comments in the slidejs.php file. In addition to the steps below... you would also create a css style for the division that creates the slideshow container in your index.php, and put the images for your slideshow set within their own folder (slideshow is used in this example) in your images folder. Here's the package.

Step 1 - Create a new file - slidejs.php:
Copy and paste this complete code-block into a new php file and save it as slidejs.php in your site's root directory:
Code: [Select]
<?php
/* ---------------------------------------------------------------------
   slidejs.php
   Script for using an image slideshow in sNews 1.5 or 1.4
   Fade effect performs well in both IE and non-IE browsers.
   Ported by: keyrocks - http://snews.ca - October 30/06
   Source: Ultimate Fade-In Slideshow (v1.5):
        Dynamic Drive (http://www.dynamicdrive.com)
   --------------------------------------------------------
USAGE
--------
1. Save this slidejs.php file in your site's root directory.
2. Make all your slideshow images the same size and put them in a
   slideshow folder within your site's images folder.
3. Add the image file-paths to the images array string below, by
   changing those already in the array string. You can add more images
   to the array or remove some - 4 are provided as examples only.

Multiple Slideshows
----------------------------
You can run more than one slideshow with this script. Here's how.
1. Each slideshow must have a different name.
   Copy and paste the existing array and change all
   instances of - fadeimages - to - fadeimages2 (as an example).
2. Use the same script used to call the slideshow in your index.php
   for each slideshow location, and change the name accordingly.
------------------------------------------------------------------------ */
?>

<script type="text/javascript">

// Slideshow arrays =================================================

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/slideshow/image1.jpg", "", ""] //plain image syntax
fadeimages[1]=["images/slidetest/image2.jpg", "", ""] //plain image syntax
fadeimages[2]=["images/slidetest/image3.jpg", "", ""] //plain image syntax
fadeimages[3]=["images/slidetest/image4.jpg", "", ""] //plain image syntax
//fadeimages[1]=["image2.jpg", "http://www.your-site.com", ""] //use to attach an image link to your image
//fadeimages[2]=["image3.jpg", "http://www.your-site.com", "_new"] //use to open the image link in a new window

// Add more slideshow arrays here.

// End of slideshow arrays. =========================================

var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'"

style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0"

style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity

=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1"

style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity

=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}

fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
</script>
Step 2 - In your index.php:
Insert
Code: [Select]
include("slidejs.php"); // php-based js for for header slideshowUnder include('snews.php'); near the top of the file. This includes the file's script to make the slideshow work in index.php.

Next, insert the following where you want the image slideshow to display:
Code: [Select]
<div id="mastslides">
<script type="text/javascript">
//new fadeshow(array name, image_width, image_height, borderwidth, delay, pause, optionalRandomOrder)
//new fadeshow(fadeimages,     318,         108,          1,        5000,   1,          "R"   )
new fadeshow(fadeimages, 318, 108, 0, 5000, 0)
</script>
</div>
Next... in the string below the 2nd comment-line, set the variables as outlined in the comment-lines.
NOTE - (Oct. 31/06): You may find that putting the include statement at the top of your index.php file affects the display of content in your site... by over-riding the styles in your stylesheet. If this is the case, then you can cure this by inserting the include statement within php-tags just under the opening div-id tag like this:
Code: [Select]
<div id="mastslides">
                     <? include("slidejs.php"); ?>
<script type="text/javascript">
//new fadeshow(array name, image_width, image_height, borderwidth, delay, pause, optionalRandomOrder)
//new fadeshow(fadeimages,     318,         108,          1,        5000,   1,          "R"   )
new fadeshow(fadeimages, 318, 108, 0, 5000, 0)
</script>
</div>
This applies the inclusion only within the division itself, so it won't affect other elements in your index.php file.

Step 3 - In your css stylesheet:
Create a division style-set for the above. This sets the position and size of the image container. Here is an example. Modify (style) to suit your your specific requirements. Set the width and height to match the dimensions of the images in your slideshow set.
Code: [Select]
#mastslides {  /* creates the slideshow container */
margin: 0px 0px 0px 0px; /* top | right | bottom | left */
width: 318px; height: 108px;
}
Compressing Slide Show Images
When creating your images, it's a good idea to compress them down to smaller byte-sizes. I save my images with a compression ratio of 20:1. This reduces the images (byte-size) substantially and still maintains a reasonable level of image quality for web-viewing.
« Last Edit: February 15, 2011, 06:06:05 PM by Keyrocks »
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Rob

  • Full Member
  • ***
  • Karma: 1
  • Posts: 219
    • http://www.ruthinweather.co.uk
Fading Images with CSS
« Reply #3 on: October 28, 2006, 06:52:18 PM »

Keyrocks,

Thanks for that much appreciated.  :D
Logged
The road the righteous travel is like the sunrise, getting brighter and brighter until daylight has come.

Rob

  • Full Member
  • ***
  • Karma: 1
  • Posts: 219
    • http://www.ruthinweather.co.uk
Fading Images with CSS
« Reply #4 on: October 28, 2006, 06:54:20 PM »

Quote from: philmoz
..and ... that page came in close on 1MB, which for us dialup users is a pain in the rear!!
Not very friendly use of images.!!!
:( Thanks for the info on the dial up, not my site but will email the people and let them know.
Logged
The road the righteous travel is like the sunrise, getting brighter and brighter until daylight has come.

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Fading Images with CSS
« Reply #5 on: October 28, 2006, 06:56:18 PM »

Quote from: Grudgeuk
Keyrocks, Thanks for that much appreciated.  :D
Yur welcome - hope it works for you. :)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Rob

  • Full Member
  • ***
  • Karma: 1
  • Posts: 219
    • http://www.ruthinweather.co.uk
Fading Images with CSS
« Reply #6 on: October 29, 2006, 09:50:46 PM »

Well the good news is that this does exactly what I want it to do.

Except it only works in IE and not FF. :(

Any ideas why this is the case, I assume it is some to do with filter:progid:DXImageTransform.Microsoft.Fade(duration=2).

Thanks
Logged
The road the righteous travel is like the sunrise, getting brighter and brighter until daylight has come.

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Fading Images with CSS
« Reply #7 on: October 29, 2006, 11:14:13 PM »

Quote from: Grudgeuk
Well the good news is that this does exactly what I want it to do.
Except it only works in IE and not FF. :(
Any ideas why this is the case, I assume it is some to do with filter:progid:DXImageTransform.Microsoft.Fade(duration=2).
Thanks
The first version of the mod produced an excellent fading slideshow in IE only. It has been completely replaced (see Post #3 above) with a NEW mod that functions well in IE and none-IE (Gecko-based) browers... Firefox is OK for sure.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Fading Images with CSS
« Reply #8 on: October 30, 2006, 07:50:47 PM »

The fading slideshow mod has been updated so that it fades equally well in IE AND Firefox. :)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Fading Images with CSS
« Reply #9 on: October 30, 2006, 08:30:19 PM »

Nice work, Key! I can tell you that the slideshow should now work not only in IE and Gecko browsers but also in KHTML browsers (Konqueror on Linux; Safari, Shiira and possibly others on Mac), at least if I decode the script correctly.

As a side note, that has nothing to do with the slideshow functionality, you can use opacity with CSS on any HTML item with this little rule:
Quote
selector { filter: alpha(opacity=99); -moz-opacity: 0.9; opacity: 0.9; }
/* Never set opacity to 100/1/1 for a fully opaque (solid) item or 0/0/0 for a fully transparent item, because that will throw Gecko browsers and Opera into a weird loop. Max values are 99/.9/.9 and min values are 1/.1/.1 -- at least to my knowledge. */ :D
Logged

Rob

  • Full Member
  • ***
  • Karma: 1
  • Posts: 219
    • http://www.ruthinweather.co.uk
Fading Images with CSS
« Reply #10 on: October 31, 2006, 08:47:57 AM »

Great work key and much appreciated as always.

Thanks  :D
Logged
The road the righteous travel is like the sunrise, getting brighter and brighter until daylight has come.