Lightweight jQuery Plugin To Create Scrolling Images - picMarque
File Size: | 80.8 KB |
---|---|
Views Total: | 6532 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
picMarque is a super tiny jQuery plugin used to create scrolling images like the old traditional Html marquee
tag. The plugin will auto scroll through a set of images on page loaded and has the ability to pause the scrolling on mouse hover.
See also:
- Carousel & Marquee Like List Scrolling Plguin For jQuery - Scrollbox
- Text Scrolling Plugin for jQuery - Marquee
How to use it:
1. Load the required CSS in the head section of your web page.
<link href="script/jquery.picMarque.css" rel="stylesheet">
2. Create an empty container with a fix width.
<div id="marquePic" style="width:1170px;"></div>
3. Load the jQuery picMarque plugin after jQuery javascript library at the bottom of the web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="script/jquery.picMarque.js"></script>
4. Create an image array using JSON object and initialize the plugin with options.
<script type="text/javascript"> $(document).ready(function(){ var picData = [ { image:'img/1.jpg', title:'image title 1', link:'#' }, { image:'img/2.jpg', title:'image title 2', link:'#' }, { image:'img/3.jpg', title:'image title 3', link:'#' }, { image:'img/4.jpg', title:'image title 4', link:'#' }, { image:'img/5.jpg', title:'image title 5', link:'#' }] $("#marquePic").picMarque({ speed: 60,//scroll speed(ms) errorimg: 'nophoto.jpg',//error image path data: picData }) }); </script>
Change log:
2014-06-03
- fix bug
This awesome jQuery plugin is developed by YiquanWang. For more Advanced Usages, please check the demo page or visit the official website.