Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Podstawowy kod w AJAXie
Forum PHP.pl > Forum > XML, AJAX > AJAX
jigy
21.11.2009, 23:15:17
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
ziqzaq
21.11.2009, 23:51:00
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".
jigy
22.11.2009, 01:01:59
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 :/
ziqzaq
22.11.2009, 08:55:26
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).

jigy
22.11.2009, 12:00:21
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... :|
ziqzaq
22.11.2009, 13:53:19
Nie wiadomo czego próbowałeś, więc pokaż kod.
jigy
22.11.2009, 14:32:54
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

ziqzaq
22.11.2009, 15:11:36
Pierwszy krok w instalacji greyboxa.
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.