Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JS] jQuery Zaznaczenie wybranego zdjęcia
tomeknh
post
Post #1





Grupa: Zarejestrowani
Postów: 90
Pomógł: 0
Dołączył: 2.12.2007

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

Witam,

Mam div z zdjęciami:
[HTML] pobierz, plaintext 
  1. <div id="thumbs">
  2. <img src="foto/>
  3. <img src="foto/>
  4. <img src="foto/>
  5. <img src="foto/>
  6. </div>
[HTML] pobierz, plaintext


Oraz kod jQuery

[HTML] pobierz, plaintext 
  1. $(document).ready(function() {
  2.  
  3. $("#thumbs img").click(function() {
  4. $(this).css("border", "1px solid red");
  5. });
  6.  
  7. }
  8. );
[HTML] pobierz, plaintext


Po kliknięciu w dany obrazek robi się w okół niego czerwona ramka. Jak zrobić żeby klikając w nowy obrazek ramka z poprzedniego znikała?(IMG:style_emoticons/default/questionmark.gif) (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




 
[JAVASCRIPT] pobierz, plaintext 
  1. var imgs = $("#thumbs img");
  2. imgs.click(function() {
  3. $(imgs).css('border', 0).filter(this).css("border", "1px solid red");
  4. });
[JAVASCRIPT] pobierz, plaintext

pisane z palca. Nie ma sensu tego tłumaczyć, kod mówi sam za siebie, co robi.

edit@down: tylko że Twoje rozwiązanie wymaga każdorazowego przeszukiwania drzewa. (IMG:style_emoticons/default/winksmiley.jpg)
Powód edycji: [erix]:
Go to the top of the page
+Quote Post
flashdev
post
Post #3





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

Ostrzeżenie: (10%)
X----

Cytat(tomeknh @ 7.08.2010, 00:04:59 ) *
[...]
Po kliknięciu w dany obrazek robi się w okół niego czerwona ramka. Jak zrobić żeby klikając w nowy obrazek ramka z poprzedniego znikała?(IMG:style_emoticons/default/questionmark.gif) (IMG:style_emoticons/default/questionmark.gif)


Skoro umiesz dodać, to co za problem uprzednio usunąć (IMG:style_emoticons/default/winksmiley.jpg) 

[HTML] pobierz, plaintext 
  1. $(document).ready(function() {
  2.  
  3. $("#thumbs img").click(function() {
  4. $(this).parent().children('img').css("border", "0");
  5. $(this).css("border", "1px solid red");
  6. });
  7.  
  8. }
  9. );
[HTML] pobierz, plaintext


edit@up: Stawiam dopiero pierwsze kroki w jQuery, ale dziękuję za zwrócenie słusznej uwagi. Wiem że nie jest to optymalne rozwiązanie jednak w większości przypadków (no przecież to tylko kilka obrazków (IMG:style_emoticons/default/winksmiley.jpg) ) takie wystarczy.

Ten post edytował flashdev 6.08.2010, 23:23:13
Go to the top of the page
+Quote Post
tomeknh
post
Post #4





Grupa: Zarejestrowani
Postów: 90
Pomógł: 0
Dołączył: 2.12.2007

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

Niestety ani jeden ani drugi kod nie działa...kombinuję z tym ale niestety mi nic nie wychodzi (IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
flashdev
post
Post #5





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

Ostrzeżenie: (10%)
X----

Cytat(tomeknh @ 7.08.2010, 00:39:58 ) *
Niestety ani jeden ani drugi kod nie działa...kombinuję z tym ale niestety mi nic nie wychodzi (IMG:style_emoticons/default/sad.gif)


Czyżby?

[HTML] pobierz, plaintext 
  1. <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
  2.  
  3. <script type="text/javascript">
  4. $(document).ready(function() {
  5. 	if( 1 ){
  6. 		$("#thumbs img").click(function() {
  7. 			$(this).parent().children('img').css("border", "0");
  8. 			$(this).css("border", "1px solid red");
  9. 		});
  10. 	}else{
  11. 		var imgs = $("#thumbs img");
  12. 		imgs.click(function() {
  13. 			$(imgs).css('border', 0).filter(this).css("border", "1px solid red");
  14. 		});
  15. 	}
  16. });
  17.  
  18. </script>
  19.  
  20.  
  21. <div id="thumbs">
  22. <img src="http://beach-of-a-woman---screen-saver.smartcode.com/images/sshots/beach_of_a_woman_-_screen_saver_27377.jpeg">
  23. <img src="http://beach-of-a-woman---screen-saver.smartcode.com/images/sshots/beach_of_a_woman_-_screen_saver_27377.jpeg">
  24. <img src="http://beach-of-a-woman---screen-saver.smartcode.com/images/sshots/beach_of_a_woman_-_screen_saver_27377.jpeg">
  25. <img src="http://beach-of-a-woman---screen-saver.smartcode.com/images/sshots/beach_of_a_woman_-_screen_saver_27377.jpeg">
  26. </div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
tomeknh
post
Post #6





Grupa: Zarejestrowani
Postów: 90
Pomógł: 0
Dołączył: 2.12.2007

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

Niestety nie działa...popatrz:


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  4. <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
  5. <title></title>
  6. <style type="text/css">
  7. img {
  8. border:0;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. $(document).ready(function() {
  13. 	if( 1 ){
  14. 		$("#thumbs img").click(function() {
  15. 			$(this).parent().children('img').css("border", "0");
  16. 			$(this).css("border", "1px solid red");
  17. 		});
  18. 	}else{
  19. 		var imgs = $("#thumbs img");
  20. 		imgs.click(function() {
  21. 			$(imgs).css('border', 0).filter(this).css("border", "1px solid red");
  22. 		});
  23. 	}
  24. });
  25.  
  26.  
  27. </script>
  28. </head>
  29. <body>
  30.  
  31. <div style="width:880px;height:665px;margin:0 auto;text-align:left;" id="thumbs">
  32. 	<div>
  33. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 960, 1)">
  34. 		<img src="s_0u2mu5pn.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  35. 		</a>
  36.  
  37. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 960, 2)">
  38. 		<img src="s_zzz5q6n3.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  39. 		</a>
  40.  
  41. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 3)">
  42. 		<img src="s_49bqgdda.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  43. 		</a>
  44.  
  45. 		<a href="java script:void(0);" onclick="show('bz57l6hp.gif', 1024, 4)">
  46. 		<img src="s_q1gjczlh.gif" alt="" style="padding-right:8px;position:relative;top:0px;">
  47. 		</a>
  48.  
  49. 		<img src="files/img/spacer.gif" style="height:60px;width:278px;">
  50.  
  51. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 5)">
  52. 		<img src="s_feqg5ngk.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  53. 		</a>
  54.  
  55. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 500, 6)">
  56. 		<img src="s_up2ygwan.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  57. 		</a>
  58.  
  59. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 7)">
  60. 		<img src="s_bz57l6hp.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  61. 		</a>
  62.  
  63. 		<a href="java script:void(0);" onclick="show('eyx8hgel.jpg', 1024, 8)">
  64. 		<img src="s_eyx8hgel.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  65. 		</a>
  66. 	</div>
  67. </div>
  68.  
  69.  
  70. </body></html>
  71.  
[HTML] pobierz, plaintext


Ten post edytował tomeknh 6.08.2010, 23:57:49
Go to the top of the page
+Quote Post
flashdev
post
Post #7





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

Ostrzeżenie: (10%)
X----

Przzecież masz inny kod (IMG:style_emoticons/default/ph34r.gif)

$("#thumbs img") -> $("#thumbs div img")

Edit:
Dziwnie tworzysz tą stronę, część akcji dodajesz w kodzie js, a część bezpośrednio w html inline.
Kilka dobrych rad:
- wyrzucić style inline
- wyrzucić skrypty inline
- skrypty i style ładować do dokumentu jako zewnętrzne pliki

Ten post edytował flashdev 7.08.2010, 00:02:37
Go to the top of the page
+Quote Post
tomeknh
post
Post #8





Grupa: Zarejestrowani
Postów: 90
Pomógł: 0
Dołączył: 2.12.2007

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

nie zwracaj uwagi na to jak jest stworzone bo to tylko testowy plik i moze tam byc balagan duuuuuuuzy ale chodzi o to zeby dzialalo - potem to przeniose do wlasciwej strony.....

zmieniłem na #thumbs div img i nadal nie dziala......juz nie mam sily do tego (IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
flashdev
post
Post #9





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

Ostrzeżenie: (10%)
X----

Cytat(tomeknh @ 7.08.2010, 01:05:14 ) *
nie zwracaj uwagi na to jak jest stworzone bo to tylko testowy plik i moze tam byc balagan duuuuuuuzy ale chodzi o to zeby dzialalo - potem to przeniose do wlasciwej strony.....

zmieniłem na #thumbs div img i nadal nie dziala......juz nie mam sily do tego (IMG:style_emoticons/default/sad.gif)


Mój błąd, miało być: div a img

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  4. <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
  5. <title></title>
  6. <style type="text/css">
  7. img {
  8. border:0;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. $(document).ready(function() {
  13. 	if( 1 ){
  14. 		$("#thumbs div a img").click(function() {
  15. 			$(this).parent().parent().children('a').children('img').css("border", "0");
  16. 			$(this).css("border", "1px solid red");
  17. 		});
  18. 	}else{
  19. 		var imgs = $("#thumbs div a img");
  20. 		imgs.click(function() {
  21. 			$(imgs).css('border', 0).filter(this).css("border", "1px solid red");
  22. 		});
  23. 	}
  24. });
  25.  
  26.  
  27. </script>
  28. </head>
  29. <body>
  30.  
  31. <div style="width:880px;height:665px;margin:0 auto;text-align:left;" id="thumbs">
  32. 	<div>
  33. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 960, 1)">
  34. 		<img src="s_0u2mu5pn.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  35. 		</a>
  36.  
  37. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 960, 2)">
  38. 		<img src="s_zzz5q6n3.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  39. 		</a>
  40.  
  41. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 3)">
  42. 		<img src="s_49bqgdda.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  43. 		</a>
  44.  
  45. 		<a href="java script:void(0);" onclick="show('bz57l6hp.gif', 1024, 4)">
  46. 		<img src="s_q1gjczlh.gif" alt="" style="padding-right:8px;position:relative;top:0px;">
  47. 		</a>
  48.  
  49. 		<img src="files/img/spacer.gif" style="height:60px;width:278px;">
  50.  
  51. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 5)">
  52. 		<img src="s_feqg5ngk.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  53. 		</a>
  54.  
  55. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 500, 6)">
  56. 		<img src="s_up2ygwan.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  57. 		</a>
  58.  
  59. 		<a href="java script:void(0);" onclick="show('bz57l6hp.jpg', 1024, 7)">
  60. 		<img src="s_bz57l6hp.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  61. 		</a>
  62.  
  63. 		<a href="java script:void(0);" onclick="show('eyx8hgel.jpg', 1024, 8)">
  64. 		<img src="s_eyx8hgel.jpg" alt="" style="padding-right:8px;position:relative;top:0px;">
  65. 		</a>
  66. 	</div>
  67. </div>
  68.  
  69.  
  70. </body></html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
tomeknh
post
Post #10





Grupa: Zarejestrowani
Postów: 90
Pomógł: 0
Dołączył: 2.12.2007

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

Super działa!!! dziękuje Ci bardzo za pomoc!!! pozdrawiam
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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: 18.09.2025 - 01:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn