Cześć, poniżej napisałem przykładowy kod Jquery który zmienia obrazek tła po kliknięciu na miniaturke, w wolnej chwili zrobie z tego slider. Pozdrawiam
<style type='text/css'>
/* USTAIWENIA BODY */
body {
-webkit-transition: background-image 0.4s ease-in-out;
-moz-transition: background-image 0.4s ease-in-out;
-ms-transition: background-image 0.4s ease-in-out;
-o-transition: background-image 0.4s ease-in-out;
transition: background-image 0.4s ease-in-out;
background-image:url(http://www.tapeciarnia.pl/tapety/normalne/191225_blondynka_sweter_schody_szpilki.jpg);
background-repeat:no-repeat;
background-position:top center;
background-size:100% 100%;
}
/* POZYCJA SLIDERA */
.header {
overflwo:hidden;
width:800px;
min-width:800px;
max-width:800px;
background-color:#eee;
margin:200px auto 0 auto;
}
/* USTAIWENIA MINIATUREK (SZEROKOSC, WYSOKOSC ITD) */
.slider-image {
float:left;
width:140px;
height:90px;
border:4px solid rgba(0, 0, 0, 0.4);
background-repeat:no-repeat;
background-size:100% 100%;
margin:4px 4px;
cursor:pointer;
}
</style>
<div class='header'>
<div class='slider-body' body='http://www.tapeciarnia.pl/tapety/normalne/194089_kobieta_blondynka_sweter.jpg'>
<div class='slider-image' style='background-image:url(http://www.tapeciarnia.pl/tapety/normalne/194089_kobieta_blondynka_sweter.jpg);'></div>
</div>
<div class='slider-body' body='http://www.tapeciarnia.pl/tapety/normalne/192985_kobieta_blondynka_sweter.jpg'>
<div class='slider-image' style='background-image:url(http://www.tapeciarnia.pl/tapety/normalne/192985_kobieta_blondynka_sweter.jpg);'></div>
</div>
<div class='slider-body' body='http://www.tapeciarnia.pl/tapety/normalne/206865_kobieta_modelka_kolorowy_sweter.jpg'>
<div class='slider-image' style='background-image:url(http://www.tapeciarnia.pl/tapety/normalne/206865_kobieta_modelka_kolorowy_sweter.jpg);'></div>
</div>
<div class='slider-body' body='http://www.tapeciarnia.pl/tapety/normalne/119870_nessa_devil_sweter.jpg'>
<div class='slider-image' style='background-image:url(http://www.tapeciarnia.pl/tapety/normalne/119870_nessa_devil_sweter.jpg);'></div>
</div>
<div class='slider-body' body='http://www.tapeciarnia.pl/tapety/normalne/88299_jennifer_lopez_bialy_sweter.jpg'>
<div class='slider-image' style='background-image:url(http://www.tapeciarnia.pl/tapety/normalne/88299_jennifer_lopez_bialy_sweter.jpg);'></div>
</div>
</div>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript'>
// WYWOŁUJE PO KLIKNIECIU W DIV O KLASIE .slider-body FUNKCJE
$('.slider-body').click(function(){
// POBIERAMY ZAWARTOSC "BODY" BZ DANEGO DIVA I ZAPISUJEMY JA DO ZMIENNEJ body
var body = $(this).attr('body');
// SPRAWDZAMY CZY ZMIENNA BODY ISTNIEJE JEŚLI TAK TO USTAWIAMY TŁO | JEŚLI NIE NIC NIE ROBIMY
if (body){
// USTAWIAMY TŁO (DLA BODY)
$('body').css('background-image','url('+body+')') ;
}
});
</script>
|
v7.02.07
