Tag Archives: jQuery Cycle Plugin

Manage your project dependencies using Bower

Let’s continue our tour on Yeoman.

 

Bower is a tool to manage your js dependencies of your project. you can find out all the dependencies on the bower.json. The bower.json below is the one initialized in the AngularJS project.
Continue reading Manage your project dependencies using Bower

jQuery Cycle Plugin – Customize pager anchor HTML

Cycle Plugin is the most common plugin which could be found in my projects. This article shows you how to customize the pager of the Cycle Plugin slide show.

Let’s create the following HTML first.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.cycle.all.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div id="slides-wrapper">
      <div id="slide-1" style="width: 200px; height: 200px; background-color: red;"></div>
      <div id="slide-2" style="width: 200px; height: 200px; background-color: green;"></div>
      <div id="slide-3" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
    <div id="nav"></div>
  </body>
</html>

Continue reading jQuery Cycle Plugin – Customize pager anchor HTML

jQuery – Slideshow Example

This is another jQuery example which i want to share with you. Again, it maybe not good for use but it would be a nice example for beginners to take a quick look on jQuery. Try jQuery Cycle Plugin to get more interesting animation. If you are looking for more jQuery examples, take a look in my previous blog posts.

Continue reading jQuery – Slideshow Example

jQuery – Cycle Plugin White Background Problem in Internet Explorer

The jQuery Cycle plugin is so helpful on showing animated slide show in your webpage. Check it out at the following website to find more details.
jQuery Cycle Plugin

But thanks Microsoft, it’s greatest product, Internet Explorer 7 and 8 has a bug when showing transparent png in the slide show. That is a white background would be added to the cycle element which block the background image. Add the following options when calling the cycle function. Continue reading jQuery – Cycle Plugin White Background Problem in Internet Explorer