Lappuse 1 no 11
Forums » uCoz sistēma » Vizuālie skripti » Slaideris (slideshow)
Slaideris (slideshow)
Spanky
Datums: Sestdiena, 22.08.2015, 15:35 | Ziņa # 1
Grupa: Administrators
Foruma posti: 550
Reputācija: 88


1. Lapā, kurā vēlamies redzēt slaideri, vēlams starp HEAD tagiem, ievietojam šo kodu:
Code
<script type="text/javascript">

$(document).ready(function() {       
             
       //Execute the slideShow, set 5 seconds for each images
       slideShow(4500);

});

function slideShow(speed) {

       //append a LI item to the UL list for displaying caption
       $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

       //Set the opacity of all images to 0
       $('ul.slideshow li').css({opacity: 0.0});
             
       //Get the first image and display it (set it to full opacity)
       $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
             
       //Get the caption of the first image from REL attribute and display it
       $('#slideshow-caption h3').html($('ul.slideshow li.show').find('img').attr('title'));
       $('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt'));
             
       //Display the caption
       $('#slideshow-caption').css({opacity: 0.8, bottom:0});
             
       //Call the gallery function to run the slideshow       
       var timer = setInterval('gallery()',speed);
             
       //pause the slideshow on mouse over
       $('ul.slideshow').hover(
       function () {
       clearInterval(timer);       
       },       
       function () {
       timer = setInterval('gallery()',speed);       
       }
       );
             
}

function gallery() {

       //if no IMGs have the show class, grab the first image
       var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
             
       //trying to avoid speed issue
       if(current.queue('fx').length == 0) {       
             
       //Get next image, if it reached the end of the slideshow, rotate it back to the first image
       var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
             
       //Get next image caption
       var title = next.find('img').attr('title');       
       var desc = next.find('img').attr('alt');       
             
       //Set the fade in effect for the next image, show class has higher z-index
       next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
             
       //Hide the caption first, and then set and display the caption
       $('#slideshow-caption').slideToggle(400, function () {       
       $('#slideshow-caption h3').html(title);       
       $('#slideshow-caption p').html(desc);       
       $('#slideshow-caption').slideToggle(400);       
       });       
             
       //Hide the current image
       current.animate({opacity: 0.0}, 500).removeClass('show');

       }

}
</script>


2. Iekš CSS ievietojam šo kodu:
Code
ul.slideshow {
       list-style:none;
       width:100%;
       height:350px;
       overflow:hidden;
       position:relative;
       margin-bottom:1px;
       margin-top:1px;
       padding:0;
             
}       

ul.slideshow li {
       position:absolute;
       left:0;
       right:0;
}

ul.slideshow li.show {
       z-index:100;       
}

ul img {
       border:none;       
}

#slideshow-caption {
       width:100%;
       height:50px;
       position:absolute;
       bottom:0;
       left:0;       
       color:#fff;
       background:#000;
       z-index:100;
       font-size:11px;
       font-weight:normal;
       font-family:trebuchet ms,helvetica,sans-serif;
}

#slideshow-caption .slideshow-caption-container {
       padding:5px 10px;       
       z-index:1000;
}

.ulightbox:hover img {
opacity:0.9;
}

.gray-block3 {background:#F8F8F8; padding:6px; border:1px solid #D2D2D2; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}


3. Vietā, kurā vēlamies redzēt slaideri, ievietojam šo:
Code
<div class="gray-block3" style="margin-bottom:1px;"><ul class="slideshow">
<li style="opacity: 0;" class=""><img src="http://labz.id.lv/slider/box2-big.jpg" width="100%" height="350" title="Šonedēļ portālā notiek dažādi uzlabošanas darbi..."></li>
       <li style="opacity: 0;" class=""><a href="http://labz.id.lv/index/serialu_raksti/0-59"><img src="http://labz.id.lv/slider/seriaaligfds43.png" width="100%" height="350" title="Turpmāk visi pašmāju seriālu raksti un jaunumi būs vienuviet - īpašā seriālu rakstu sadaļā!"></a></li>
       <li style="opacity: 0;" class=""><a href="http://labz.id.lv/publ/seriali/noslegusies_vinas_melo_labak_3_sezona/1-1-0-26"><img src="http://labz.id.lv/slider/vml3-sezonas-nosleegums.png" width="100%" height="350" title="Seriāla Viņas melo labāk 3.sezona noslēdzas ar dažādiem pavērsieniem un jaunām intrigām... Noskaties video!"></a></li>
       <li style="opacity: 0;" class=""><a href="http://labz.id.lv/publ/seriali/ugunsgreka_14_sezonas_sakums/1-1-0-23"><img src="http://labz.id.lv/slider/ug-14sez.png" width="100%" height="350" title="Jau 7.septembrī sāksies seriāla UgunsGrēks jaunā 14.sezona. Jau drīzumā anotācijas arī pie mums!"></a></li>
</ul></div>



Pielikumi: 3673990.jpg(81Kb)
DalVeR
Datums: Sestdiena, 22.08.2015, 19:14 | Ziņa # 2
Grupa: Bloķēts
Foruma posti: 24
Reputācija: 11
Žēl šo nevaru pielāgot savam saitam. sad


Ziņu rediģēja - DalVeR - Sestdiena, 22.08.2015, 19:16
DalVeR
Datums: Sestdiena, 22.08.2015, 19:16 | Ziņa # 3
Grupa: Bloķēts
Foruma posti: 24
Reputācija: 11
Tomer aizgaja kad ieliku aizslaidera koda to ko bija jaliek starp head.
Spanky
Datums: Sestdiena, 22.08.2015, 19:36 | Ziņa # 4
Grupa: Administrators
Foruma posti: 550
Reputācija: 88
Quote DalVeR ()
Tomer aizgaja kad ieliku aizslaidera koda to ko bija jaliek starp head.

Nu nez. Man viņš atrodas starp HEAD tagiem...

DalVeR
Datums: Sestdiena, 22.08.2015, 21:40 | Ziņa # 5
Grupa: Bloķēts
Foruma posti: 24
Reputācija: 11
Quote Spanky ()
Nu nez. Man viņš atrodas starp HEAD tagiem...

Tas vispār ir atkarīgs no paša dizaina ka kuram iet. Citam ta iet, bet citam ta.

DalVeR
Datums: Ceturtdiena, 15.10.2015, 15:14 | Ziņa # 6
Grupa: Bloķēts
Foruma posti: 24
Reputācija: 11
Spanky, Uztaisiju šijam informeri. :D
DalVeR
Datums: Otrdiena, 20.10.2015, 18:40 | Ziņa # 7
Grupa: Bloķēts
Foruma posti: 24
Reputācija: 11
Tie kas vēlas izmantot šo slaideri ka informeri.

Mans piemers ka taisiju informeri protams katrs var savadāk uztaisit:

Informer #4 [Informer template]
[ File Catalog · Entries · In random order · Entries: 30 · Columns: 1 ]

Code
<li style="opacity: 0;" class=""><a href="$ENTRY_URL$"><img src="$IMG_URL2$" width="100%" height="350" title="$TITLE$"></a></li>


Šo liekam kur vēlamies redzēt slaideri:

Code
<div class="gray-block3" style="margin-bottom:1px;">
<ul class="slideshow"> $MYINF_Informera skaitlis$</ul>
</div>

Forums » uCoz sistēma » Vizuālie skripti » Slaideris (slideshow)
Lappuse 1 no 11
Meklēšana: