Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Galeria - Kod HTML - EDYTOWANIE - Potrzebujemy małej pomocy
Forum PHP.pl > Forum > Przedszkole
pftprzybylski
26.02.2015, 19:36:22 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. 	<meta charset="utf-8">
  5.  
  6. 	<title>Lightbox</title>
  7.  
  8. 	<meta name="description" lang="en" content="Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."/>
  9. 	<meta name="author" content="Lokesh Dhakar">
  10. 	<meta name="viewport" content="width=device-width, initial-scale=1">
  11.  
  12. 	<link rel="shortcut icon" href="img/demopage/favicon.png">
  13. 	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">
  14. 	<link rel="stylesheet" href="css/screen.css">
  15. 	<link rel="stylesheet" href="css/lightbox.css">
  16. </head>
  17. <body>
  18.  
  19. 	<header>
  20. 		<div class="container">
  21. 			<h1 class="logo">Lightbox</h1>
  22. 			<p class="lead">
  23. 				The original lightbox script.<br />Eight years later &mdash; still going strong!
  24. 			</p>
  25.  
  26. 			<a href="releases/lightbox-2.7.1.zip" class="button">
  27. 				Download
  28. 			</a>
  29.  
  30. 			<a href="https://github.com/lokesh/lightbox2/" class="button">
  31. 				View on Github
  32. 			</a>
  33.  
  34. 		</div>
  35. 	</header>
  36.  
  37. 	<section id="examples" class="examples-section">
  38. 		<div class="container">
  39. 			<h2>Examples</h2>
  40. 			<h3>Two individual images</h3>
  41. 			<div class="image-row">
  42. 				<a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/demopage/image-1.jpg" alt="image-1" /></a>
  43. 				<a class="example-image-link" href="img/demopage/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="img/demopage/image-2.jpg" alt="image-1"/></a>
  44. 			</div>
  45.  
  46. 			<hr />
  47.  
  48. 			<h3 style="clear: both;">Four image set</h3>
  49.  
  50. 			<div class="image-row">
  51. 				<div class="image-set">
  52. 					<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
  53. 					<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
  54. 					<a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
  55. 					<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
  56. 				</div>
  57. 			</div>
  58. 		</div>
  59. 	</section>
  60.  
  61. 	<section id="how-to-use" class="how-to-use-section">
  62. 		<div class="container">
  63. 			<h2>How to use</h2>
  64. 			<h3>Step 1 - Load the Javascript and CSS</h3>
  65. 			<ol>
  66. 				<li>Download and unzip the latest version of Lightbox.</li>
  67. 				<li>Look inside the <code>js</code> folder to find <code>jquery-1.11.0.min.js</code> and <code>lightbox.min.js</code> and load both of these files. Load jQuery first.
  68. <pre><code>&lt;script src=&quot;js/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
  69. &lt;script src=&quot;js/lightbox.min.js&quot;&gt;&lt;/script&gt;</code></pre>
  70. 				</li>
  71. 				<li>Look inside the <code>css</code> folder to find <code>lightbox.css</code> and load it.
  72. 	<pre><code>&lt;link href=&quot;css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
  73. 				</li>
  74. 				<li>Look inside the <code>img</code> folder to find <code>close.png</code>, <code>loading.gif</code>, <code>prev.png</code>, and <code>next.png</code>. These files are used in <code>lightbox.css</code>. By default, <code>lightbox.css</code> will look for these images in a folder called <code>img</code>.</li>
  75. 			</ol>
  76. 			<h3>Step 2 - Turn it on</h3>
  77. 		<ul>
  78. 				<li>Add a <code>data-lightbox</code> attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
  79. 	<pre><code>&lt;a href=&quot;img/image-1.jpg&quot; data-lightbox=&quot;image-1&quot; data-title=&quot;My caption&quot;&gt;Image #1&lt;/a&gt;</code></pre>
  80. 				 <em>Optional:</em> Add a <code>data-title</code> attribute if you want to show a caption.
  81. 				</li>
  82. 				<li>If you have a group of related images that you would like to combine into a set, use the same <code>data-lightbox</code> attribute value for all of the images. For example:
  83. 	<pre><code>&lt;a href=&quot;img/image-2.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #2&lt;/a&gt;
  84. &lt;a href=&quot;img/image-3.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #3&lt;/a&gt;
  85. &lt;a href=&quot;img/image-4.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #4&lt;/a&gt;</code></pre>
  86. 				</li>
  87. 			</ul>
  88. 		</div>
  89. 	</section>
  90.  
  91.  
  92. 	<section id="help" class="questions-section">
  93. 		<div class="container">
  94. 			<h2>Help</h2>
  95.  
  96. 			<h3>Have a feature request?</h3>
  97. 			<p>If you want a feature added, <a href="https://github.com/lokesh/lightbox2/issues">create an issue on Github</a>. Someone else or I might be able to help out. No guarantees.</p>
  98.  
  99. 			<h3>Found a bug?</h3>
  100. 			<p>If you find a bug, <a href="https://github.com/lokesh/lightbox2/issues">create an issue on Github</a>. Include your operating system and browser version along with detailed steps on how to reproduce the bug.</p>
  101.  
  102. 			<h3>Can't get Lightbox working?</h3>
  103. 			<p>If you followed the instructions, but still can't get Lightbox working, <a href="http://stackoverflow.com/">search Stackoverflow</a> to see if other people have run into the same issue as you. If not, post a new question.</p>
  104.  
  105. 			<h3>Looking for older versions?</h3>
  106. 			<p>You can access older versions and see a changelog on the <a href="https://github.com/lokesh/lightbox2/releases">Github releases page</a>.</p>
  107. 		</div>
  108. 	</section>
  109.  
  110. 	<section id="donate" class="donate-section">
  111. 		<div class="container">
  112. 			<h2>Donate</h2>
  113. 			<p>
  114. 				Lightbox is 100% free to use. If you're using Lightbox on a commercial project and feeling generous, consider a donation. Thanks!
  115. 			</p>
  116. 			<form class="donate-button-form" name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  117. 				<fieldset>
  118. 					<input type="hidden" name="cmd" value="_xclick">
  119. 					<input type="hidden" name="business" value="lokesh.dhakar@gmail.com">
  120. 					<input type="hidden" name="item_name" value="Donation for Lightbox">
  121. 					<input type="hidden" name="no_note" value="1">
  122. 					<input type="hidden" name="currency_code" value="USD">
  123. 					<input type="hidden" name="tax" value="0">
  124. 					<input type="hidden" name="bn" value="PP-DonationsBF">
  125. 					<input type="submit" name="submit" class="button donate-button" value="Donate using Paypal" alt="Make payments with PayPal - it's fast, free and secure!">
  126. 				</fieldset>
  127. 			</form>
  128. 		</div>
  129. 	</section>
  130.  
  131. 	<footer>
  132. 		<div class="container">
  133. 			<p>
  134. 				Lightbox is created by Lokesh Dhakar<br />
  135. 				<a href="https://twitter.com/lokesh" class="button button-minor">Follow me on Twitter</a>
  136. 			</p>
  137. 		</div>
  138. 	</footer>
  139.  
  140. 	<div id="sharing" class="sharing-section">
  141. 		<a href="https://twitter.com/share" class="twitter-share-button" data-via="lokesh" data-size="large">Tweet</a>
  142. 		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
  143. 	</div>
  144.  
  145. 	<script src="js/jquery-1.11.0.min.js"></script>
  146. 	<script src="js/lightbox.js"></script>
  147.  
  148. 	<script>
  149. 	var _gaq = _gaq || [];
  150. 	_gaq.push(['_setAccount', 'UA-2196019-1']);
  151. 	_gaq.push(['_trackPageview']);
  152.  
  153. 	(function() {
  154. 		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  155. 		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  156. 		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  157. 	})();
  158. 	</script>
  159.  
  160. </body>
  161. </html>
[HTML] pobierz, plaintext


Jest to galeria

http://lokeshdhakar.com/projects/lightbox2/


Czy jest ktoś w stanie pomóc mi ją edytować ?
Chce mieć tylko te 4 obrazki + oczywiście działajace JS
Potem sobie zmienie obrazki i będzie fajnie git smile.gif
Ale nie wiem co wywalić z kodu by go nie rozwalić
jaca121212
26.02.2015, 19:53:31 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. 	<meta charset="utf-8">
  5.  
  6. 	<title></title>
  7.  
  8.  
  9.  
  10. 	<meta name="viewport" content="width=device-width, initial-scale=1">
  11.  
  12.  
  13. 	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">
  14.  
  15. 	<link rel="stylesheet" href="css/lightbox.css">
  16. </head>
  17. <body>
  18.  
  19.  
  20.  
  21. 	<section id="examples" class="examples-section">
  22.  
  23.  
  24. 			<h3 style="clear: both;">Galeria zdjęć </h3>
  25.  
  26. 			<div class="image-row">
  27. 				<div class="image-set">
  28. 					<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="text"><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
  29. 					<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="text"><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
  30. 					<a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="text"><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
  31. 					<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="text"><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
  32. 				</div>
  33. 			</div>
  34. 		</div>
  35. 	</section>
  36.  
  37.  
  38.  
  39.  
  40. 	<script src="js/jquery-1.11.0.min.js"></script>
  41. 	<script src="js/lightbox.js"></script>
  42.  
  43. 	<script>
  44. 	var _gaq = _gaq || [];
  45. 	_gaq.push(['_setAccount', 'UA-2196019-1']);
  46. 	_gaq.push(['_trackPageview']);
  47.  
  48. 	(function() {
  49. 		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  50. 		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  51. 		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  52. 	})();
  53. 	</script>
  54.  
  55. </body>
  56. </html>
[HTML] pobierz, plaintext
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.