Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Podstawowy kod w AJAXie
jigy
post
Post #1





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 21.11.2009

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

Witam ,na wstepie chce powiedziec, ze jestem zupelnie zielony w js.
Na swojej stronie uzywam kodu takiego jak tutaj!, aby nie przeladowywac ciagle stronki ,przy podstronach, tylko wrzucac do diva.
Nastepnie wymyslilem sobie ,ze chce miec przegladarke grafik (miniaturki po kliknieciu wyskakuja duze zdjecia ,ktore mozna przerzucac dalej) w js, znalazlem taki kod, ze wszystkimi plikami, stylami itp:
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

    <script type="text/javascript">
        var GB_ROOT_DIR = "./greybox/";
    </script>

    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="static_files/help.js"></script>
    <link href="static_files/help.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>

        <a href="static_files/night_valley.jpg" rel="gb_imageset[nice_pics]">
            <img src="static_files/night_valley_thumb.jpg" />
        </a>

        <a href="static_files/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">
            <img src="static_files/salt_thumb.gif" />
        </a>

</body>
</html>

Oddzielnie wszystko ladnie hula. Natomiast u mnie na stronie po wrzuceniu do diva widac miniaturki, lecz po kliknieciu nie wyskakuje okno ,tylko otwiera mi nowa karte i w niej widac obrazek. Nie wiem gdzie lezy blad, moze sie ktos spotkal z czyms takim ?
A moze po prostu robie cos glupiego tongue.gif?
Pozdrawiam

Ten post edytował jigy 21.11.2009, 23:16:04
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
ziqzaq
post
Post #2





Grupa: Zarejestrowani
Postów: 428
Pomógł: 128
Dołączył: 17.06.2007

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

Witam.
Poprostu darzenia "onclick" greyboxa nie są podpięte do dynamicznie dodanych (przez ajax) linków z obrazkami, dlatego linki zamiast uruchamiać greyboxa (po kliknięciu na nie) przenoszą cię do obrazków.
Polecam zobaczyć FAQ greyboxa pod tytułem "How do I use Greybox together with Ajax or dynamic content".
Go to the top of the page
+Quote Post
jigy
post
Post #3





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 21.11.2009

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

Dzieki za podpowiedz smile.gif
Cytat
Q. How do I use Greybox together with Ajax or dynamic content?

Use the Advanced Method, onclick instead of rel, see advance_usage.html in your downloaded GreyBox package for examples.


Zmienilem wg polecenia z :
rel="gb_imageset[nice_pics]" na onclick="gb_imageset[nice_pics]"
niestety nic nie dalo :/
Go to the top of the page
+Quote Post
ziqzaq
post
Post #4





Grupa: Zarejestrowani
Postów: 428
Pomógł: 128
Dołączył: 17.06.2007

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

Taaak. Mam wrażenie jakbyś w ogóle nie przejrzał tych zaawansowanych zastosowań greyboxa.
Pokaż mi skąd wziałeś taki kod:
Kod
rel="gb_imageset[nice_pics]" na onclick="gb_imageset[nice_pics]"

Bo ja nigdzie w advance_usage.html nie widzę podobnych rzeczy. Masz tam przykłady użycia, więc znajdź ten z odnoszący się do obrazków, przeczytaj ze zrozumieniem i zastosuj go u siebie.
PS. Jeśli chcesz pokazywać set (grupę) zdjęć to samo onclick nie wystarczy (w advance_usage.html masz przykład do takiego przypadku).
Go to the top of the page
+Quote Post
jigy
post
Post #5





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 21.11.2009

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

Zasugerowalem sie zdaniem w ktorym pisalo onclick instead of rel i dlatego sprobowalem zamiany. Przejrzalem te advanced_usage i probowalem przykladow ze zdjeciami, nie chodza. Moze nie robie tego tak jak powinienem... :|
Go to the top of the page
+Quote Post
ziqzaq
post
Post #6





Grupa: Zarejestrowani
Postów: 428
Pomógł: 128
Dołączył: 17.06.2007

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

Nie wiadomo czego próbowałeś, więc pokaż kod.
Go to the top of the page
+Quote Post
jigy
post
Post #7





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 21.11.2009

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

Dla jasnosci, tak wyglada moj index :
[HTML] pobierz, plaintext 
  1.  
  2. <script type="text/javascript"> // pierwsza część kodu var ObiektXMLHttp = false;
  3. if (window.XMLHttpRequest) 
  4.   { 
  5.    ObiektXMLHttp = new XMLHttpRequest(); 
  6.   } 
  7.    else if (window.ActiveXObject) 
  8.       { 
  9.        ObiektXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  10. 	  } 
  11.  
  12. // druga część kodu 
  13. function getData(zrodlo, cel) 
  14. 	{ 
  15.  	if(ObiektXMLHttp) 
  16.   		{
  17.    		var cel = document.getElementById(cel);
  18.    		ObiektXMLHttp.open("GET", zrodlo);
  19. 		ObiektXMLHttp.onreadystatechange = function() 
  20. 			{
  21. 			if (ObiektXMLHttp.readyState == 4)
  22.    					{
  23.     				cel.innerHTML = ObiektXMLHttp.responseText; 
  24.    					}  					
  25. 			} 
  26. // trzecia część kodu 
  27. 		ObiektXMLHttp.send(null); 
  28. 		}
  29. 	} 
  30. </script> 
  31.  
  32. </head>
  33.  
  34. <body>
  35. <div id="kontener">
  36. <div id="head"></div>
  37.  
  38. <div id="linki">
  39.  	<ul>
  40. 	<li><a href="" onclick="getData('start.php', 'srodekHome'); return false">START</a></li>
  41. 	<li><a href="" onclick="getData('news.php', 'srodekHome'); return false">NEWS</a></li>
  42. 	<li><a href="index.html">PHOTO</a>
  43. 		<ul>
  44. 		<li><a href="" onclick="getData('examples.html', 'srodekHome'); return false">FISCHES</a></li>
  45. 		<li><a href="" onclick="getData('bike.php', 'srodekHome'); return false">BIKE</a></li>
  46. 		</ul>
  47. 	</li>	
  48. 	<li><a href="" onclick="getData('films.php', 'srodekHome'); return false">FILMS</a></li>
  49. 	<li><a href="" onclick="getData('contact.php', 'srodekHome'); return false">CONTACT</a></li>
  50. 	<li><a href="">FILES</a>
  51. 	     <ul>
  52. 	     <li><a href="" onclick="getData('download.php', 'srodekHome'); return false">DOWNLOAD</a>
  53. 	     <li><a href="" onclick="getData('links.php', 'srodekHome'); return false">LINKS</a>
  54. 	     </ul>
  55. 	</li>
  56. 	<li><a href="" onclick="getData('login.php', 'srodekHome'); return false">LOG IN</a></li>
  57. 	</ul>
  58. </div>	
  59.  
  60. <div id="srodek">
  61. 	<div id="lewySrodek">
  62. 		<div id="srodekHome"> 
  63.  
  64.                                                            TU WRZUCA PODSTRONY
  65. 		</div>                
  66. 	</div>
  67.     <div id="prawySrodek"></div>
  68. </div>
[HTML] pobierz, plaintext


A tak podstrona z galeria, z 3 sposobami wyswietlania, kazdy wyrzuca obrazek w nowym oknie przegladarki :
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.  
  5. <script>
  6. var image_set = [{'caption': 'Flower', 'url': 'http://static.flickr.com/119/294309231_a3d2a339b9.jpg'},
  7.     {'caption': 'Nice waterfall', 'url': 'http://www.widerange.org/images/large/gozdMartuljek.jpg'}];
  8. </script>
  9.  
  10.     <script type="text/javascript" src="greybox/AJS.js"></script>
  11.     <script type="text/javascript" src="greybox/AJS_fx.js"></script>
  12.     <script type="text/javascript" src="greybox/gb_scripts.js"></script>
  13.     <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
  14.     <script type="text/javascript" src="static_files/help.js"></script>
  15.     <link href="static_files/help.css" rel="stylesheet" type="text/css" media="all" />
  16. </head>
  17. <body>
  18.  
  19. //1
  20.         <a href="static_files/night_valley.jpg" onclick="gb_imageset[nice_pics]">
  21.             <img src="static_files/night_valley_thumb.jpg" />
  22.         </a>
  23.  
  24.         <a href="static_files/salt.jpg" onclick="gb_imageset[nice_pics]" >
  25.             <img src="static_files/salt_thumb.gif" />
  26.         </a>
  27.  
  28. //2        
  29.  
  30.          <a href="http://static.flickr.com/119/294309231_a3d2a339b9.jpg"
  31. 		onclick="return GB_showImage('Flower', this.href)">A flower in my hand</a>
  32.  
  33. //3
  34.  
  35. 		<a href="static_files/salt.jpg" onclick="return GB_showImageSet(image_set, 1)">
  36. 		Show first picture in image_set</a>
  37.  
  38. </body>
  39. </html>
  40.  
[HTML] pobierz, plaintext

Go to the top of the page
+Quote Post
ziqzaq
post
Post #8





Grupa: Zarejestrowani
Postów: 428
Pomógł: 128
Dołączył: 17.06.2007

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

Pierwszy krok w instalacji greyboxa.
Go to the top of the page
+Quote Post
« Następny starszy · AJAX · Następny nowszy »
 

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

 

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

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

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