Skocz do zawartości

Zdjęcie
- - - - -

Przesuwana galeria jQuery


3 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
^Krzysiek
2
Neutralna

Napisano 07 kwietnia 2015 - 00:48

#1

Witajcie. Chcę dodać na swoją stronę przesuwaną galerię bazującą na jQuery. Dokładnie jest to:

http://bxslider.com/examples/manual-show-without-infinite-loop

Na stronie głównej podana jest instrukcja. Nie bardzo wiem, co mam zrobić z punktem 3cim, gdzie umieścić ten kod:

$(document).ready(function(){
  $('.bxslider').bxSlider();
}); 

http://bxslider.com/

Tak wygląda mój index.html :

<!DOCTYPE HTML>
<html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Usługi Transportowe Andrzej Bielawski</title>
    <link rel="stylesheet" href="css/style.css">
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="lib/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$('.bxslider').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true
});
</script>
</head>
 
   <body oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'">
      <div id="wrappaer"></div>
      <div class="body"></div>
      <div class="top">
         <div class="flag1"></div>
         <div class="flag2"></div>
         <div class="flag3"></div>
         <div class="butt"></div>
      </div>
      <div class="line"></div>
      <footer></footer>
<ul class="bxslider">
  <li><img src="images/fot1.jpg" /></li>
  <li><img src="images/fot2.jpg" /></li>
  <li><img src="images/fot3.jpg" /></li>
</ul>
   </body>
</html>

Plik jquery.bxslider.min.js mam w katalogu o nazwie "js", natomiast jquery.bxslider.css w "lib".

Zdjęcia wyświetlają mi się normalnie, a nie w sliderze.


  • 0

przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 07 kwietnia 2015 - 08:57

#2

Z tego co widzę to za wcześnie inicjujesz ten skrypt.

<script type="text/javascript">
$('.bxslider').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true
});
</script>

Ten fragment daj sobie na sam dół przed znacznikiem </body>


  • 0

^Krzysiek
2
Neutralna

Napisano 07 kwietnia 2015 - 14:59

#3

Zmienione, ale i tak nie działa. Teraz kod html wygląda tak:

<!DOCTYPE HTML>
<html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Usługi Transportowe Andrzej Bielawski</title>
    <link rel="stylesheet" href="css/style.css">
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="lib/jquery.bxslider.css" rel="stylesheet" />
</head>
 
   <body oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'">
      <div id="wrappaer"></div>
      <div class="body"></div>
      <div class="top">
         <div class="flag1"></div>
         <div class="flag2"></div>
         <div class="flag3"></div>
         <div class="butt"></div>
      </div>
      <div class="line"></div>
      <footer></footer>
<ul class="bxslider">
  <li><img src="images/fot1.jpg" /></li>
  <li><img src="images/fot2.jpg" /></li>
  <li><img src="images/fot3.jpg" /></li>
</ul>
<script type="text/javascript">
$('.bxslider').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true
});
</script>
   </body>
</html>

  • 0

przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 08 kwietnia 2015 - 08:56

#4

Musisz zobaczyć co Ci w konsoli pokazuje. Może jQuery sie nie ładuje poprawnie. Jeśli testujesz stronę lokalnie bez serwera to pobieraj jQuery tak:

http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js 

a nie

//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

  • 2





Podone tematy Collapse

  Temat Forum Autor Podsumowanie Ostatni post

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych