Forum PHP.pl > [JQUERY] galeria z miniaturami

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JQUERY] galeria z miniaturami

Terrorizer

23.09.2014, 04:32:16

Kupiłem pewną książkę o jquery, która okazała się dla mnie kompletnym niewypałem.
Zamiast opisów i czegokolwiek treściwego są gotowce ledwie opisywane manualowym językiem.
Postanowiłem użyć skryptu do galerii z miniaturkami, jednak mam wrażenie ,że ten skrypt w ogóle nie chodzi.
Tzn. załączenie skryptu kompletnie nic nie wnosi. Mam na ekranie jedynie jakieś jedno obcięte zdjęcie i tyle
Mógłby ktoś na to zerknąć? Kod właściwie przepisany z książki od dechy do dechy.
Dodam ,że nie mam pojęcia o js i jquery, chciałem jedynie zaczerpnąć czegokolwiek z książki która była reklamowana jako przewodnik "dla każdego" .......

[HTML] pobierz, plaintext 
...
<head>
<link rel="stylesheet" href="css/gallery.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery_easing.1.3.js"></script>
<script src="jquery_functions.js"></script>
</head>
 
<div id="gallerybox">
<div id="gallery">
 
<div id="photos">
<div id="bigphotos">
<div><img src="gfx/back1.jpg" alt="img1"></div>
<div><img src="gfx/back1.jpg" alt="img2"></div>
<div><img src="gfx/back1.jpg" alt="img3"></div>
<div><img src="gfx/back1.jpg" alt="img4"></div>
</div>
 
<div id="smallphotos">
<div><a href="#"><img src="gfx/back2.jpg" alt="img1"></a></div>
<div><a href="#"><img src="gfx/back2.jpg" alt="img2"></a></div>
<div><a href="#"><img src="gfx/back2.jpg" alt="img3"></a></div>
<div><a href="#"><img src="gfx/back2.jpg" alt="img4"></a></div>
</div>
</div>
 
</div>
</div>
[HTML] pobierz, plaintext

functions:

[PHP] pobierz, plaintext 
$(document)ready.(function(){
 
var liczba_fotografii = $("#bigphotos div");
 
var pokaz_fotografie = $("#smallphotos a");
 
var aktualna_pozycja_fotografii;
 
var przesun_fotografie = $("#photos");
 
var szerokosc_fotografii = 600; 
 
pokaz_fotografie.on('click'.zmienna_fotografii);
 
function zmienna_fotografii() {
aktualna_pozycja_fotografii = liczba_fotografii.eq( pokaz_fotografie.index( this) ).position();
przesun_fotografie.animate({'scrollLeft' : aktualna_pozycja_fotografii.left}.2500.'easeOutElastic');}
 
$("#bigphotos").css('width'.liczba_fotografii.length * szerokosc_fotografii);
});
[PHP] pobierz, plaintext

gallery.css:

[PHP] pobierz, plaintext 
img{
margin:0px;
padding:0px;
border:0px;
}
div#gallerybox{
width:800px;
margin-top:50px;
margin-bottom:0px;
margin-right:auto;
margin-left:auto;
padding:0px;
}
div#gallery{
width:600px;
height:400px;
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
padding-bottom:10px;
}
div#photos{
width:600px;
height:400px;
position:relative;
overflow:hidden;
}
 
 
div#bigphotos{
position:relative;
}
div#bigphotos div{
width:600px;
height:400px;
float:left;
position:relative;
}
div#smallphotos a:hover{
border-bottom:3px solid #ff0000;
}
div#smallphotos{
text-align:center;
}
[PHP] pobierz, plaintext

in5ane

23.09.2014, 07:21:13

Nie zagłębiałem się na razie w ogóle w kod, ale czy masz plik jquery_easing.1.3.js?

Terrorizer

23.09.2014, 12:37:05

Mam plik easing w którym mam wklejony kod z tego linku: http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

trueblue

23.09.2014, 13:18:42

$(document)ready.(function(){

pokaz_fotografie.on('click'.zmienna_fotografii);

przesun_fotografie.animate({'scrollLeft' : aktualna_pozycja_fotografii.left}.2500.'easeOutElastic');}

$("#bigphotos").css('width'.liczba_fotografii.length * szerokosc_fotografii);

Terrorizer

23.09.2014, 13:31:11

Dziękuje za uwagi, przepisywałem kod o 5 rano i nie rozróżniałem już kropki od przecinka

Przeanalizowałem całość po raz kolejny i nie dostrzegam już żadnych błędów.
W każdym razie wciąż nie ma to żadnego wpływu na html.
Wyświetla mi się jedno zdjęcie i to w dodatku poobcinane z każdej strony przez arkusz css

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.