Memasang Image Dan Description Slider Dengan JQuery

Ini juga merupakan postingan request dari sobat bloger. (sebelumnya trims ya para sobat bloger yang mau share ma ane). Slider ini tak kalah menariknya dengan slider yang ane pasang pada home ane. Dengan tampilan yang menarik sobat bisa memodifikasinya sendiri.

Gimana, jika sobat-sobat yang lain mau, silahkan ikutin step-stepnya.

Ini scriptnya css :

view plainprint?

1. <style type='text/css'>  
2. <!--  
3. /** 
4. * Slideshow style rules. 
5. */  
6. #slideshow {  
7. margin:0 auto;  
8. width:640px;  
9. height:263px;  
10. background:transparent url(https://lh4.googleusercontent.com/-hMJTVtWPWRs/Tmzf96AMCLI/AAAAAAAABb4/J-Q6m9W5bXo/bg_slideshow.jpg) no-repeat 0 0;  
11. position:relative;  
12. }  
13. #slideshow #slidesContainer {  
14. margin:0 auto;  
15. width:560px;  
16. height:263px;  
17. overflow:auto; /* allow scrollbar */  
18. position:relative;  
19. }  
20. #slideshow #slidesContainer .slide {  
21. margin:0 auto;  
22. width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */  
23. height:263px;  
24. }  
25.   
26. /** 
27. * Slideshow controls style rules. 
28. */  
29. .control {  
30. display:block;  
31. width:39px;  
32. height:263px;  
33. text-indent:-10000px;  
34. position:absolute;  
35. cursor: pointer;  
36. }  
37. #leftControl {  
38. top:0;  
39. left:0;  
40. background:transparent url(https://lh4.googleusercontent.com/-kBxAqd8BFtU/Tmzf-J4z64I/AAAAAAAABb8/5TqVcgswv1U/control_left.jpg) no-repeat 0 0;  
41. }  
42. #rightControl {  
43. top:0;  
44. right:0;  
45. background:transparent url(https://lh3.googleusercontent.com/-8zk4afeD6BA/Tmzf_CnmmgI/AAAAAAAABcA/BadvNOxRpbs/control_right.jpg) no-repeat 0 0;  
46. }  
47. #pageContainer {  
48. margin:0 auto;  
49. width:960px;  
50. }  
51. #pageContainer h1 {  
52. display:block;  
53. width:960px;  
54. height:114px;  
55. background:transparent url(https://lh4.googleusercontent.com/-c75w7khaj-4/TmzgBfRyg_I/AAAAAAAABcM/l3gKNvqujoc/s912/bg_pagecontainer_h1.jpg) no-repeat top left;  
56. text-indent: -10000px;  
57. }  
58. .slide h2, .slide p {  
59. margin:15px;  
60. }  
61. .slide h2 {  
62. font:italic 24px Georgia, "Times New Roman", Times, serif;  
63. color:#ccc;  
64. letter-spacing:-1px;  
65. }  
66. .slide img {  
67. float:right;  
68. margin:0 15px;  
69. }  
70. </style>  

Ini Javascriptnyanya :

view plainprint?

1. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>  
2. <script type='text/javascript'>  
3. $(document).ready(function(){  
4. var currentPosition = 0;  
5. var slideWidth = 560;  
6. var slides = $(&#39;.slide&#39;);  
7. var numberOfSlides = slides.length;  
8.   
9. // Remove scrollbar in JS  
10. $(&#39;#slidesContainer&#39;).css(&#39;overflow&#39;, &#39;hidden&#39;);  
11.   
12. // Wrap all .slides with #slideInner div  
13. slides  
14.   .wrapAll(&#39;&lt;div id=&quot;slideInner&quot;&gt;&lt;/div&gt;&#39;)  
15.   // Float left to display horizontally, readjust .slides width  
16. .css({  
17.     &#39;float&#39; : &#39;left&#39;,  
18.     &#39;width&#39; : slideWidth  
19.   });  
20.   
21. // Set #slideInner width equal to total width of all slides  
22. $(&#39;#slideInner&#39;).css(&#39;width&#39;, slideWidth * numberOfSlides);  
23.   
24. // Insert controls in the DOM  
25. $(&#39;#slideshow&#39;)  
26.   .prepend(&#39;&lt;span class=&quot;control&quot; id=&quot;leftControl&quot;&gt;Clicking moves left&lt;/span&gt;&#39;)  
27.   .append(&#39;&lt;span class=&quot;control&quot; id=&quot;rightControl&quot;&gt;Clicking moves right&lt;/span&gt;&#39;);  
28.   
29. // Hide left arrow control on first load  
30. manageControls(currentPosition);  
31.   
32. // Create event listeners for .controls clicks  
33. $(&#39;.control&#39;)  
34.   .bind(&#39;click&#39;, function(){  
35.   // Determine new position  
36. currentPosition = ($(this).attr(&#39;id&#39;)==&#39;rightControl&#39;) ? currentPosition+1 : currentPosition-1;  
37.   
38. // Hide / show controls  
39.   manageControls(currentPosition);  
40.   // Move slideInner using margin-left  
41.   $(&#39;#slideInner&#39;).animate({  
42.     &#39;marginLeft&#39; : slideWidth*(-currentPosition)  
43.   });  
44. });  
45.   
46. // manageControls: Hides and Shows controls depending on currentPosition  
47. function manageControls(position){  
48.   // Hide left arrow if position is first slide  
49. if(position==0){ $(&#39;#leftControl&#39;).hide() } else{ $(&#39;#leftControl&#39;).show() }  
50. // Hide right arrow if position is last slide  
51.   if(position==numberOfSlides-1){ $(&#39;#rightControl&#39;).hide() } else{ $(&#39;#rightControl&#39;).show() }  
52. }  
53. });  
54. </script>  

Ini Script Htmlnya :

view plainprint?

1. <div id="pageContainer">  
2. <!-- Slideshow HTML -->  
3. <div id="slideshow">  
4.   <div id="slidesContainer">  
5.     <div class="slide">  
6.       <h2>Judul Post 1</h2>  
7.       <p><a href="#/"><img src="urlimage1.jpg" alt="" width="215" height="145" /></a>  
8.   ISI DEKRIPSI IMAGE 1  
9.  </p>  
10.     </div>  
11.     <div class="slide">  
12.       <h2>Judul Post 2</h2>  
13.       <p><a href="#"><img src="urlimage2.jpg" width="215" height="145" alt="" /></a>  
14.   ISI DEKRIPSI IMAGE 2  
15.       <p>  
16.     </div>  
17.     <div class="slide">  
18.       <h2>Judul Post 3</h2>  
19.       <p><a href="#"><img src="urlimage3.jpg" width="215" height="145" alt="" /></a>  
20.   ISI DEKRIPSI IMAGE 2  
21.  </p>  
22.     </div>  
23.     <div class="slide">  
24.       <h2>Judul Post 4</h2>  
25.       <p><a href="#"><img src="urlimage4.jpg" width="215" height="145" alt="" /></a>  
26.   ISI DEKRIPSI IMAGE 2  
27.  </p>  
28.     </div>  
29.   </div>  
30. </div>  
31. </div>  

Cara pemasanganya :

1. Login ke akun blog sobat,
2. Pilih Rancangan --> Edit Html,
3. Cari kode </head>,
4. Masukan script css di atas kode no.3,
5. Masukan script javascript di atas kode no 3,
6. Nah tinggal pemasangan script html, untuk pemasangan slider ini ada dua cara. Pada tambah gadged dan pada Edit Html,
7. Jika sobat akan memasang pada Add Gadged sobat pindah pada Edit Laman disini sobat mungkin akan mengedit script css untuk mengatur ukuran sldiernya,
8. Setelah itu klik Add Gadged dan pilih Html/Javascript lalu pastekan script html dan simpan.
9. Jika sobat ingin meletakanya di Edit Html silahkan sobat sesuaikan di mana letaknya asalkan di dalam tag <body> dan pastekan script html dan simpan.

Sumber sahabat :http://syamsmobillex.blogspot.com

Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat.

Jangan lupa Comment atau isi buku tamu ya sob..

---

---

---