Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][JavaScript][CSS]Porsta galeria - problem
ReeX
post
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 4.08.2013

Ostrzeżenie: (0%)
-----

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ć (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
klima06
post
Post #2





Grupa: Zarejestrowani
Postów: 48
Pomógł: 10
Dołączył: 21.10.2011
Skąd: UK / PL

Ostrzeżenie: (0%)
-----

: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ć.

Ten post edytował klima06 22.10.2013, 22:21:09
Go to the top of the page
+Quote Post
gecior
post
Post #3





Grupa: Zarejestrowani
Postów: 63
Pomógł: 1
Dołączył: 16.08.2007

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/wink.gif)

Ten post edytował gecior 22.10.2013, 22:37:55
Go to the top of the page
+Quote Post
ReeX
post
Post #4





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 4.08.2013

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 05:16
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn