birghtyoursite » jquery plugin http://www.brightyoursite.com/blog Bright your site Mon, 19 Dec 2011 09:39:57 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 superslider – another great jquery slider plugin http://www.brightyoursite.com/blog/2010/04/12/superslider-another-great-jquery-slider-plugin/ http://www.brightyoursite.com/blog/2010/04/12/superslider-another-great-jquery-slider-plugin/#comments Mon, 12 Apr 2010 10:14:12 +0000 admin http://www.brightyoursite.com/blog/?p=311 This is great content slider with tabs which can be used on your home page , it’s can be images slider also can used for text content.Just have a look of the demo , sure you will love it!

Online demo

Let’s have glance at the slider: super jquery slider

Options

defaults = {
		contentlist:'.contentlist',
		textlist:'.textlist',
		btnlist:'.btnlist', 
		timeout:2000
	   };

the html structure ：

<div class="ifocus">
  <div class="ifocus_pic">
	 <div class="contentlist">
		 <ul>
			 <li>slider content</li>
			 <li>slider content</li>
			 <li>slider content</li>
			 <li>slider content</li>
		 </ul>
	 </div>
	 <div class="ifocus_opdiv"></div>
	 <div class="textlist">
		 <ul>
			 <li class="current">slide up text</li>
			 <li>slide up text</li>
			 <li>slide up text</li>
			 <li>slide up text</li>
		 </ul>
	 </div>
   </div>
  <div  class="btnlist">
		 <ul>
			 <li class="current" ><img src="images/b1.gif" alt="control button 1" /></li>
			 <li><img src="images/b2.gif" alt="control button 2" /></li>
			 <li><img src="images/b3.gif" alt="control button 3" /></li>
			 <li><img src="images/b4.gif" alt="control button 4" /></li>
		 </ul>
  </div>
</div>

With the html structure , it’s easy to understand the options:
contentlist : the class name of the wrapper of the slide contents
textlist : the class name of the wrapper of the slide up texts
btnlist : the class name of the wrapper of the control buttons images
timeout : the auto slide change interval

how to use?

Insert those JAVASCRIPT Codes between <head> and </head>:

    <link href="superslider.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" language="javascript" src="jquery-latest.pack.js" ></script>
    <script type="text/javascript" language="javascript" src="jquery.superslider.js" ></script>
    <script type="text/javascript" language="javascript"  >
    $(document).ready(function(){ 
          $('.ifocus').superSlider();
     });
   </script>

The html codes to show the slider:

<div class="ifocus">
	<div class="ifocus_pic">
		<div class="contentlist">
			<ul>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a1.jpg" alt="" /></a></li>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a2.jpg" alt="" /></a></li>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a3.jpg" alt="" /></a></li>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a4.jpg" alt="" /></a></li>
			</ul>
		</div>
		<div class="ifocus_opdiv"></div>
		<div class="textlist">
			<ul>
				<li class="current">fire <a href=''>link</a></li>
				<li class="normal">design idea <a href="http://www.brightyoursite.com/blog/" target="_blank">Elegant design</a></li>
				<li class="normal">Beautiful city </li>
				<li class="normal">word of the day</li>
			</ul>
		</div>
	</div>
	<div  class="btnlist">
		<ul>
			<li class="current" id="p0"><img src="images/b1.gif" alt="" /></li>
			<li id="p1"><img src="images/b2.gif" alt="" /></li>
			<li id="p2"><img src="images/b3.gif" alt="" /></li>
			<li id="p3"><img src="images/b4.gif" alt="" /></li>
		</ul>
	</div>
</div>

This plugin support muti-slider one page. You also can use id to choose the slider and modify the default options, for instance :

  $('#slider1,#slider2').superSlider(
     contentlist:'.contentlist',
     textlist:'.textlist',
     btnlist:'.btnlist', 
     timeout:3000
  );

That’s all, enjoy it !!!

Download Soure Codes & Example

jquery super slider plugin

Need customize it?

If you have problems with install or customize it , just contact me , i will help you for a very lower reasonable fee .

Donate

if you find it useful for you and like it very much , please make a


thanks for your support!

]]> http://www.brightyoursite.com/blog/2010/04/12/superslider-another-great-jquery-slider-plugin/feed/ 2 jquery based image viewer http://www.brightyoursite.com/blog/2010/02/21/jquery-based-image-viewer/ http://www.brightyoursite.com/blog/2010/02/21/jquery-based-image-viewer/#comments Sun, 21 Feb 2010 15:24:36 +0000 admin http://www.brightyoursite.com/blog/?p=266 Need a web image viewer like Windows Picture and Fax Viewer ?

simple and useful imageviewer (suimageviewer) is a jquery based image viewer which similar to Windows Picture and Fax Viewer , it’s easy to install and compliant with IE 7+、FireFox 1.5+ (PC, Mac)、Safari2+、Opera9+、Chrome0.3+ . It can be used in your gallery site , product page ….

Online demo

please go to simple & usefull Image viewer online demo page , just click the images and text link , you will see the imageviewer work , enjoy it !

How to install ?

Insert following 3 lines codes between <head> and </head>

        <link rel="stylesheet" type="text/css" href="jquery.imagesview/imagesview.css" /> 
	<script type="text/javascript" src="jquery.imagesview/jquery.js"></script> 
	<script type="text/javascript" src="jquery.imagesview/imagesview.js"></script>

Add class=”suimagesviewer” for the link you want to use imgeviewer , for instance :

<a href="images/car0.jpg" class="suimagesviewer" title="created by www.brightyoursite.com"><img  alt='' src="images/car.jpeg" /></a>  
<br />
<br />
<a href="images/bcar.jpg" class="suimagesviewer" title="created by www.brightyoursite.com">text link</a>
<br />
<br />
<a href="images/car2.jpg" class="suimagesviewer" title="created by www.brightyoursite.com"><img alt='' src="images/car1.jpeg" /></a>  
<br />

Then , open the page , click the images and text link , you will see it’s work , it’s easy to install , isn’t ?

Donate

if you find it usefull for you and like it very much , please make a


to help me to improve it more , new version is coming…
Thanks very much.

Download

suimageviewer version 1.0.1

]]> http://www.brightyoursite.com/blog/2010/02/21/jquery-based-image-viewer/feed/ 5 nice jquery content slider http://www.brightyoursite.com/blog/2010/01/23/nice-jquery-content-slider/ http://www.brightyoursite.com/blog/2010/01/23/nice-jquery-content-slider/#comments Sat, 23 Jan 2010 15:16:42 +0000 admin http://www.brightyoursite.com/blog/?p=140 In my portfolio page , i want to have a content silder to show some of my works ,but didn’t find a satisfied one by google .so i decide to code it myself. You can check the final result here : http://www.brightyoursite.com/portfolio.html ,
Let’s see how it work …..

First, Let’s see how this silder should work : it can be a slide or fadein , fadeout by config ; can be silde or fade automatically when page load by config;the most important thing i want is when user click one of the item it can hold on the selected item for a longer time in order to make sure the user have enough time to read the content .

Options

var defaults = {
		mode: 'slide',
		speed: 500,
		auto: false, 
		pause: 3000,
		select:10000,
		width: $(this).children('.silderitem').width(), 
		wrapper_class: 'container'
	};

Mode : value can be ‘slide’ or ‘fade’ , that’s define how the silder work.
Speed : Integer which define the fade or slide speed.The Larger values more slowly.
Auto : valid value is true or false , true means start fade or slide automatically when page load.
Pause : Integer define the interval of the slide or fade . Larger values longer time.
Select : Integer ,define the interval when click of the item , so the user have enough time to read the content .If set value 0, it will break the auto slide/fade after click .
Width : the slide or fade item width , aways it can get automatically .
wrapper_class : the css class name of the items wrapper which include all the slide or fade items.
Only for version 2.1.0
Loop : when true the the slider will reverse to the first one auto.
height : set the slider content height
the new version(2.1.0) also support muti-slider/fade in a page. .

How to use ?

HTML Codes:

<div id='sildercontent'>
  <div class='silderitem'>silder content 1</div>
  <div class='silderitem'>silder content 2</div>
 <div class='silderitem'>silder content 3</div>
 <div class='silderitem'>silder content 4</div>
 <div class='silderitem'>silder content 5</div>
</div>
 
<ul id='slnav'>
<li class='active'>item1</li>
<li >item2</li>
<li >item3</li>
<li >item4</li>
<li >item5</li>
</ul>

JAVASCRIPT Codes:

<script type="text/javascript" language="javascript" src="jquery.js" ></script>
<script type="text/javascript" language="javascript" src="jquery.suSlider.js" ></script>
<script type="text/javascript" language="javascript"  >
    $(document).ready(function(){ 
   $('#sildercontent').suSlider(); 
});
</script>

Example

Online demo : jquery content silder    jquery content fade

Download Soure Codes & Example

jqurey content slider / jquery content fade plugin

Update

Latest Version jqurey-content-slider-2.1.0.zip (Include demo )


]]> http://www.brightyoursite.com/blog/2010/01/23/nice-jquery-content-slider/feed/ 33