php/javascript rotating image with flare

I am going through the rebranding of our corporate website and wanted to stay away from flash as much as possible to make things universal. I was looking for a very easy rotator and found one with a cool Javascript overlay. Here is the original person who I started with and then modified the code.

http://www.lawnydesigns.com/2009/07/how-to-add-jquery-image-slider-to-your.html

Here is my final code which works great as well. I used the same JS files.

<strong>HEAD INFORMATION</strong>
<pre lang="HTML" line="1"><!-- JavaScripts-->
<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#s3slider').s3Slider({
            timeOut: 5000
        });
    });
</script>
</head>

<strong>BODY</strong>
<!-- begin photo slider -->
<div id="s3slider">
     <ul id="s3sliderContent">
          <li class="s3sliderImage">
               <img src="images/splash-1.jpg" />
               <span class="right"><strong>Right test</strong>
               <br />Consectetuer adipiscing elit.</span>
          </li>
          <li class="s3sliderImage">
               <img src="images/splash-3.jpg" />
               <span class="bottom"><strong>Bottom</strong>
               <br />Consectetuer adipiscing elit.</span>
          </li>
          <li class="s3sliderImage">
               <img src="images/splash-0.jpg" />
               <span class="left"><strong>Left test</strong>
               <br />Consectetuer adipiscing elit.</span>
          </li>
          <li class="s3sliderImage">
               <img src="images/splash-2.jpg" />
               <span class="top"><strong>Top test</strong>
               <br />Consectetuer adipiscing elit.</span>
          </li>
          <div class="clear s3sliderImage"></div>
     </ul>
</div>
<!-- end photo slider -->
Notice that the span left, right, top, bottom - This is how it appears, this is all pretty cool, you have to play with the CSS a bit to make it look perfect. Here is my CSS.
/* slider CSS */
#s3slider { 
   width: 820px; /* important to be same as image width */ 
   height: 350px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 820px; /* important to be same as image width or wider */
   height: 350px;
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute;
 font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 724px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
 -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image 
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.s3sliderImage span strong {
    font-size: 14px;
}

.clear {
   clear: both;
}

.top {
 top: 0;
 left: 0;
}
.bottom {
 bottom: 0;
    left: 0;
    height: 40px;
}
.left {
 top: 0;
    left: 0;
 width: 110px !important;
 height: 330px;
}
.right {
 right: 0;
 bottom: 0;
 width: 130px !important;
 height: 332px;
}

Comments

Popular posts from this blog

Console over SSH (ONTAP)

Cacti Monitor Server Step by Step Ubuntu

Brocade Zone Setup