Friday, November 30, 2012

Interactive Slideshows For Your Homepage


jQuery offers some neat effects that are easy to integrate into your website. All the user needs is JavaScript enabled in their browser to view the slideshows. It’s a clean way to present items such as upcoming tournaments, important news or announcements. Research shows that people gravitate towards images and visual representations of announcements – which makes a slideshow a great addition to any Region website

Here is a link to SLIDEJS, a simple one to use. They have multiple options for the slideshow, including text versions, image versions and a version with thumbnails. You can even change the transitions from a slide to fade.

The code is as simple as shown below:




<!doctype html>
    <head>
        <title>Title</title>
 
        <style type="text/css" media="screen">
     .slides_container {
                width:570px;
  height:270px;
     }
     .slides_container div {
  width:570px;
  height:270px;
  display:block;
     }
 </style>
 
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script src="slides.js"></script>
 
 <script>
     $(function(){
  $("#slides").slides();
     });
 </script>
    </head>
    <body>
 <div id="slides">
     <div class="slides_container">
         <div>
      <img src="http://placehold.it/570x270">
  </div>
  <div>
      <img src="http://placehold.it/570x270">
  </div>
  <div>
      <img src="http://placehold.it/570x270">
  </div>
  <div>
      <img src="http://placehold.it/570x270">
  </div>
     </div>
 </div>
    </body>
</html>
     


To use the slideshow:
  1. Download the code.
  2. Copy the code to your server.
  3. Modify the images/text for your use.

To view the full example and source, click here.

2 comments:

  1. Is there a way to create a slideshow without using JavaScript? We have some security concerns with respect to JavaScript. Can this be done using strictly HTML/CSS? The marquis tag in HTML works, but its not the elegant solution I am hoping for. Thanks.

    ReplyDelete
  2. I was able to find an example using solely CSS3. It moves completely without JavaScript. This page has a complete example, along with the source code you can use.

    CSS3 Slideshow Example

    ReplyDelete