4
Contributors
8
Replies
53
Views
3 Years
Discussion Span
Last Post by davy_yg
0

Although there are several ways to accomplish this (personally write my own javascript for this), JQuery may be your friend. It looks like they have absolutely positioned 3 div tags over each other (which contain the images), then used JQuery to slowly transition the opacity of each div.

This plugin may help point you in the right direction... Check out the fade option. Examples of how they work are at the bottom of the page
http://jquery.malsup.com/cycle/

Edited by PsychicTide

-1

Great plugin. This wil add more attractivness in website design. Thanks for sharing this.

0

I actually have tried to use the cycle plugin. I just can't get it to work by changing 3 different body background css. The only background that appears is images/indonusa3.jpg. It works if I replace the js css code with (img src) but it only works for small image not full screen (body background).

<html>

<link href= "css/style.css" rel="stylesheet" type="text/css" media="screen">

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/chili-1.7.pack.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" ></script>

<script type="text/javascript">
$('#slideshow').cycle({ 
    fx:     'fade', 
    speed:   900, 
    timeout: 10000, 
    pager:  '#nav', 
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#nav li:eq(' + idx + ') a'; 
    } 
});
</script>


<?php include('includes/navigation.php'); ?>

<body>

<div id="slidesnav"><center><img src="images/slidesnav1.jpg"><img src="images/slidesnav2.jpg"><img src="images/slidesnav1.jpg"></center></div>

<div id="demos">
    <div id="slideshow" class="pics">
        <script type="text/javascript">$("body").css("background-image", "url('images/indonusa1.jpg')");</script>   
        <script type="text/javascript">$("body").css("background-image", "url('images/indonusa2.jpg')");</script>   
        <script type="text/javascript">$("body").css("background-image", "url('images/indonusa3.jpg')");</script>        
    </div>
    <ul id="nav">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>   
    </ul>
</div>
0

These images do work if I replace the:

<script type="text/javascript">$("body").css("background-image", "url('images/indonusa1.jpg')");</script>

with

<img src="images/indonusa1.jpg">

the only problem is the image does not scretch in the background like a background since it has a specific width & height already.

Edited by davy_yg

0

Yeah, I just studied the example. Not, as easy to create similar css to make the background changing in the background. Besides that, css3 not compatible with all browser.

Well, I am thinking another way to do it. Here, I change the js code into image file. The problem is how to turn the image into a background image?

index.html

<link href= "css/style.css" rel="stylesheet" type="text/css" media="screen">

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/chili-1.7.pack.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" ></script>

<script type="text/javascript">
$('#slideshow').cycle({ 
    fx:     'fade', 
    speed:   900, 
    timeout: 10000, 
    pager:  '#nav', 
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#nav li:eq(' + idx + ') a'; 
    } 
});
</script>


<?php include('includes/navigation.php'); ?>

<body>

<div id="slidesnav"><center><img src="images/slidesnav1.jpg"><img src="images/slidesnav2.jpg"><img src="images/slidesnav1.jpg"></center></div>

<div id="demos">
    <div id="slideshow" class="pics">
        <img src="images/indonusa1.jpg" />
        <img src="images/indonusa2.jpg" />
        <img src="images/indonusa3.jpg" />     
    </div>
    <ul id="nav">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>   
    </ul>
</div>
0

Have a look at these two links... may help

http://stackoverflow.com/questions/5507518/change-background-image-of-a-div-with-fade-effect-every-10-seconds-with-jquery

http://css3.bradshawenterprises.com/cfimg/

I actually trying to alternate 3 background images from the example (only successful alternating 2 images):

index.html

<html>

<link href= "style.css" rel="stylesheet" type="text/css" media="screen">

<div id="cf">
  <img class="bottom" src="pic3.jpg" />
  <img class="bottom" src="pic2.jpg" />
  <img class="top" src="pic1.jpg" />    
</div>

</html>

style.css

#cf {
  position:relative;
  height:100%;
  width:100%;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

@keyframes cf3FadeInOut{
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

If anyone know how to alternate 3 images please help.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.