Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript][CSS]Porsta galeria - problem
Forum PHP.pl > Forum > Przedszkole
ReeX
22.10.2013, 21:33:17
Witam

probuje zrobić mały slider zdjec demo :

http://najlepszewczasy.pl/

kod pod poniżej:

JS

Kod
<script type="text/javascript">
        $(function() {
            
            $('.miniatury ul li:first-child a img').css('opacity',0.5);
            
            $(".miniatury a").click(function(){
                
                $('.miniatury a img').css('opacity',1);
                $(this).children().css('background',0.5);
                
                var sciezka = $(this).attr("href");
                var tytul = $(this).attr("title");
                
                $(".duzy").attr({ src: sciezka, alt: tytul });
                $("#opis").html(tytul);

        return false;
            });
            
        });
    </script>


html

Kod
<body>

    <div id="kontener">
        
        <div class="galeria">
            <img class="duzy" src="images/big/img1.jpg" alt="Duże zdjęcie Obrazek 1" />
        </div>
        
        <div class="miniatury">
            <ul>
                <li>
                    <div id="opis"><span> Opis pierwszej fotki</span></div>
                    <a href="images/big/img1.jpg" title="Obrazek 1"><img src="images/min/min1.jpg" alt="miniaturka Obrazek 1" /></a></li>
                <li><a href="images/big/img2.jpg" title="Obrazek 2"><img src="images/min/min2.jpg" alt="miniaturka Obrazek 2" /></a></li>
                <li><a href="images/big/img3.jpg" title="Obrazek 3"><img src="images/min/min3.jpg" alt="miniaturka Obrazek 3" /></a></li>
                <li><a href="images/big/img4.jpg" title="Obrazek 4"><img src="images/min/min4.jpg" alt="miniaturka Obrazek 4" /></a></li>
            </ul>
        </div>
        
    </div>
    
</body>



no i tutaj zaczyna sie moj mały problem :/ pomimo ustawienia w css

Kod
a:active{
  background-image: url("../images/slider-active.png");
    background: #ffae00;
   }


ramka po kliknięciu przez chwile ma wybrany kolor, po opuszczeniu przycisku kolor znika. Co zrobić questionmark.gif
klima06
22.10.2013, 22:15:59
:active jest wyłącznie wtedy kiedy użytkownik naciska dany link, potem :active jest dezaktywowane.

CSS:
Kod
a:active, a.current{
    background-image: url("../images/slider-active.png");
    background: #ffae00;
}


JS (dodaj linijkę do click'a):
[PHP] pobierz, plaintext 
  1. $(this).attr("class","current");
[PHP] pobierz, plaintext


Nie testowałem, ale mam nadzieję, że będzie działać.
gecior
22.10.2013, 22:17:32
Podaję kod (testowany i działa jak należy):

[HTML] pobierz, plaintext 
  1.  
  2.  <style>
  3.  .ramka {border:5px solid red !important;}
  4.  </style>
  5.  
  6. 	<script type="text/javascript">
  7. 		$(function() { 
  8.  
  9. 			$('.miniatury ul li:first-child a').css('opacity',0.5).addClass('ramka');
  10. 			$(".miniatury a").click(function(){
  11.  
  12.  
  13.       $(this).css('opacity',0.5).addClass('ramka');
  14. 			$(".miniatury a").not(this).css('opacity',1).removeClass('ramka');
  15.  
  16. 				var sciezka = $(this).attr("href");
  17. 				var tytul = $(this).attr("title");
  18.  
  19. 				$(".duzy").attr({ src: sciezka, alt: tytul });
  20. 				$("#opis").html(tytul);
  21.  
  22. 		return false;
  23. 			});
  24.  
  25. 		});
  26. 	</script>
  27.  
[HTML] pobierz, plaintext


Musisz dostosować sobie działanie/style. Usuń też opacity z img w kodzie html. Generalnie sens tego co potrzebujesz jest zachowany wink.gif
ReeX
23.10.2013, 18:55:50
Cytat(gecior @ 22.10.2013, 23:17:32 ) *
Podaję kod (testowany i działa jak należy):

[HTML] pobierz, plaintext 
  1.  
  2.  <style>
  3.  .ramka {border:5px solid red !important;}
  4.  </style>
  5.  
  6. 	<script type="text/javascript">
  7. 		$(function() { 
  8.  
  9. 			$('.miniatury ul li:first-child a').css('opacity',0.5).addClass('ramka');
  10. 			$(".miniatury a").click(function(){
  11.  
  12.  
  13.       $(this).css('opacity',0.5).addClass('ramka');
  14. 			$(".miniatury a").not(this).css('opacity',1).removeClass('ramka');
  15.  
  16. 				var sciezka = $(this).attr("href");
  17. 				var tytul = $(this).attr("title");
  18.  
  19. 				$(".duzy").attr({ src: sciezka, alt: tytul });
  20. 				$("#opis").html(tytul);
  21.  
  22. 		return false;
  23. 			});
  24.  
  25. 		});
  26. 	</script>
  27.  
[HTML] pobierz, plaintext


Musisz dostosować sobie działanie/style. Usuń też opacity z img w kodzie html. Generalnie sens tego co potrzebujesz jest zachowany wink.gif


Wszytko ładnie działa, tylko nasuwa sie kolejny problem. Jak zrobić zeby przy każdym uruchomieniu stronki kolejność zdjęć była mieszana i w innej kolejności pokazywana. Obecnie kolejność zdjęć jest ustawiona sztywno i na początku zamiast pojawić sie etykieta pierwszego zdjecia to ukazuje sie inny napis.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.