Պատրաստում ենք Jquery սլայդեր

Tweet

Հարգելի բլոգգերասերներ, արդեն մի քանի օր է, ինչ չեմ ներկայացրել նյութ կապված Blogger-ի հետ և այսօր որոշեցի ներկայացնել մի հետաքրքիր եղանակ սլայդ պատրաստելու համար: Իսկ ինչպես տեղադրել  Jquery  սլյադերը? Կոդերը տեղադրելու համար կատարում ենք 4 քայլ՝  a. CSS կոդի տեղադրում և կարգավորում b. Jquery կոդի տեղադրում c. Javascript-ի տեղադրում  d. Slider Widget-ի տեղադրում CSS կոդի տեղադրում և կարգավորում 1. Բացում ենք  Blogger Dashboard > Design > Edit HTML 2. Փնտրում ենք ]]></b:skin> կոդը և նրա անմիջապես վերևում ավելացնում ենք ներքևի կոդը՝ #gallery { position:relative; height:320px; /* Set Height */ width:540px; /* Set Width */ overflow:hidden; } #gallery a { float:left; position:absolute; } #gallery a img { border:none; } #gallery a.show { z-index:500; } #gallery .caption { z-index:600; background-color:#000; color:#ffffff; height:100px; width:100%; position:absolute; bottom:0; } #gallery .caption .content { margin:5px; } #gallery .caption .content h3 { margin:0; padding:0; color:#1DCCEF; } Jquery կոդի տեղադրում Եթե Ձեր բլոգում արդեն տեղադրված է այս կոդը, ապա այս քայլը բաց թողեք: Գտեք այս կոդը </head> և նրա վերևում տեղադրեք ներքևի կոդը: Javascript-ի տեղադրում  Կրկին փորձում ենք գտնել  </head>  կոդը և նրա վերևում տեղադրում ենք ներքևում գրված կոդը <script type="text/javascript"> //<!-- $(document).ready(function() { slideShow(); }); function slideShow() { var dur= 5000; $('#gallery a').css({opacity: 0.0}); $('#gallery a:first').css({opacity: 1.0}); $('#gallery .caption').css({opacity: 0.7}); $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); setInterval('gallery()', dur); } function gallery() { var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); var caption = next.find('img').attr('rel'); next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000) .removeClass('show'); $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 ); $('#gallery .content').html(caption); } //--> </script> Slider Widget-ի տեղադրում 1. Բացում ենք ՝ Blogger Dashboard > Design > Page Elements  2. Ավելացնում ենք HTML/JavaScript գադջիթը 3. Գաթջիթի անվանման հատվածը չենք լրացնում 4.Ավելացնում ենք ներքևի կոդը և տալիս ենք համապատասխան կարգավորումներ <div id="gallery"> <!-- Image Slide 1 and must have a class='show' --> <a href="Link url" class="show"> <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/> </a> <!-- Image Slide 2 --> <a href="Link Url" > <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/> </a> <!-- You can add more n more images as link above --> <div class="caption"><div class="content"></div></div> <div style='clear:both;'/> </div>Կարգավորումներ 1.Link Url-ի փոխարեն ավելացնում եք ձեր ցանկացած հղումը 2.Image url here-ի փոխարեն ավելացնում եք նկարի հղումը և տալիս եք համապատասխան չափսը 3.This is Title-ի փոխարեն գրում եք անվանումը 4.This is Description-ի փոխարեն գրում եք նյութի նկարագրությունը Բացի այդ, եթե ցանկանում եք ավելացնել նոր սլայդներ, ապա պետք է գադջիթում ավելացնեք ներքևի կոդը և անեք համապատասխան կարգավորումները: <!-- Image Slide --> <a href="Link Url" > <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/> </a> Շնորհակալություն queness բլոգին:

#gallery {
    position:relative;
    height:320px; /* Set Height   */
    width:540px;  /* Set Width    */
    overflow:hidden;
}
#gallery a {
    float:left;
    position:absolute;
}
#gallery a img {
    border:none;
}
#gallery a.show {
    z-index:500;
}
#gallery .caption {
    z-index:600;
    background-color:#000;
    color:#ffffff;
    height:100px;
    width:100%;
    position:absolute;
    bottom:0;
}
#gallery .caption .content {
    margin:5px;
}
#gallery .caption .content h3 {
    margin:0;
    padding:0;
    color:#1DCCEF;
}

<script type="text/javascript">
//<!--
$(document).ready(function() {  
 slideShow();
});
function slideShow() {
    var dur= 5000;
 $('#gallery a').css({opacity: 0.0});
 $('#gallery a:first').css({opacity: 1.0});
 $('#gallery .caption').css({opacity: 0.7});
 $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
 $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
 .animate({opacity: 0.7}, 400);
 setInterval('gallery()', dur);
}
function gallery() {
 var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
 var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); 
 var caption = next.find('img').attr('rel'); 
 next.css({opacity: 0.0})
 .addClass('show')
 .animate({opacity: 1.0}, 1000);
 current.animate({opacity: 0.0}, 1000)
 .removeClass('show');
 $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); 
 $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
 $('#gallery .content').html(caption);
}
//-->
</script>

<div id="gallery">

<!-- Image Slide 1 and must have a class='show' -->
 <a href="Link url" class="show">
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>

<!-- Image Slide 2 -->
 <a href="Link Url" >
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>

<!-- You can add more n more images as link above  -->

 <div class="caption"><div class="content"></div></div>
 <div style='clear:both;'/>
</div>Կարգավորումներ
1.Link Url-ի փոխարեն ավելացնում եք ձեր ցանկացած հղումը 
2.Image url here-ի փոխարեն ավելացնում եք նկարի հղումը և տալիս եք համապատասխան չափսը 
3.This is Title-ի փոխարեն գրում եք անվանումը 
4.This is Description-ի փոխարեն գրում եք նյութի նկարագրությունը
Բացի այդ, եթե ցանկանում եք ավելացնել նոր սլայդներ, ապա պետք է գադջիթում ավելացնեք ներքևի կոդը և անեք համապատասխան կարգավորումները:

<!-- Image Slide -->
 <a href="Link Url" >
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>

Շնորհակալություն queness բլոգին:

Նյութի հեղինակ` Hayk, գլեվել է` 17:28. Պիտակ` Blogger, Նորություններ . Գրանցվեք և ստացեք նոր գրառումները էլ. փոստի միջոցով RSS 2.0