Hi Everyone
So Jason, Zinia and I have been working on a new look and feel for our website. One of the key elements in any web design is the “slider”. It’s so popular that if you come across a website that doesn’t have one, things almost feel like they aren’t quite right and the site may be fake. Well, maybe that’s a bit over the top but you get the point 🙂
Anyway, so because we have been (and will for a while to come) using WordPress as a platform, not only to do our web based product development, but also is the framework that powers our existing site, we have been trying to develop a slider of our own. So at 05:30 this morning, Saturday 06 October, I got the code to work.
Without going into too much about the WordPress framework, jQuery the javascript library that we also use, and the WordPress hooks or stylesheet properties, here is the simple bit of code the got it working.
Here is the Javascript, that makes use of the jQuery library – something we definitely need to get integrated into our Cognos library
<script type=”text/javascript”>
jQuery(document).ready(function(){ var sliderCount = jQuery("#slider div").length-1; var currentSlide=0; showSlide(); function showSlide(){ jQuery("#slider div:not(:hidden)").fadeOut('quick'); //alert("Slider"); jQuery("#slider div:eq("+currentSlide+")").fadeIn('slow'); if(currentSlide==sliderCount){ currentSlide=0; }else{ currentSlide++; } setTimeout(showSlide,3000); }}); </script>
The stylesheet code:
#slider div{ display:none; width:600px; height:300px; align: center; background-color: transparent; float:left; position: fixed; }#slider div img{ width:100%; height:100%; }
and finally, the HTML
<div id="slider"> <div> This is slide one <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/e-magination_logo.jpg"></div> <div> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/nemo.jpg"> </div> <div> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/E_team.jpg"> </div> </div>