Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: galeria miniatury
Forum PHP.pl > Forum > Po stronie przeglądarki
john_doe
12.05.2012, 15:49:13
Witam,

chciałbym stworzyć galerie w taki sposób:

1. tworze div id="gallery"
2. wewnątrz tworzę div ( generowane z bazy ), class="mini" wewnątrz z miniaturą obrazu
3. napisałem przykładowy kod, który miniatury ustawia w pasku i po kliknięciu dostaniemy normalny obraz w stałych divie

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. 	<title>krystian gallery js</title>
  5. 	<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  6.  
  7. 	<style type="text/css">
  8. 		#gallery{ border: 2px solid green; overflow: hidden;  width: 840px; height: 120px; }
  9. 		.mini{ float: left; border: 1px solid red; }
  10. 		#normal-pic-size{ width: 584px; height: 422px; border: 2px solid pink; }
  11. 	</style>
  12.  
  13. 	<script type="text/javascript">
  14.  
  15. 		$(document).ready(function(){
  16.  
  17. 			$('.mini').click(function(){
  18.  
  19. 				var	fileName = 	$(this).children('img').attr('src');
  20.  
  21.     			$("#normal-pic-size").html('<img src="' + fileName.replace("mini_", "") + '" />');
  22.  
  23. 			});
  24.  
  25. 		});
  26.  
  27. 	</script>
  28.  
  29. </head>
  30.  
  31. <body>
  32.  
  33. 		<div id="normal-pic-size"></div>
  34.  
  35. 		<div id="gallery">
  36.  
  37. 			<div class="mini">
  38. 				<img src="mini_zaraz.jpg" alt="" />
  39. 			</div>
  40. 			<div class="mini">
  41. 				<img src="mini_zaraz.jpg" alt="" />
  42. 			</div>
  43. 			<div class="mini">
  44. 				<img src="mini_zaraz.jpg" alt="" />
  45. 			</div>
  46. 			<div class="mini">
  47. 				<img src="mini_zaraz.jpg" alt="" />
  48. 			</div>
  49. 			<div class="mini">
  50. 				<img src="mini_zaraz.jpg" alt="" />
  51. 			</div>
  52. 			<div class="mini">
  53. 				<img src="mini_zaraz.jpg" alt="" />
  54. 			</div>
  55. 			<div class="mini">
  56. 				<img src="mini_zaraz.jpg" alt="" />
  57. 			</div>
  58. 			<div class="mini">
  59. 				<img src="mini_zaraz.jpg" alt="" />
  60. 			</div>
  61. 			<div class="mini">
  62. 				<img src="mini_zaraz.jpg" alt="" />
  63. 			</div>
  64. 			<div class="mini">
  65. 				<img src="mini_zaraz.jpg" alt="" />
  66. 			</div>
  67.  
  68. 		</div>
  69.  
  70. </body>
  71.  
  72. </html>
  73.  
  74.  
[HTML] pobierz, plaintext


gdy w css mam ustawiony overflow: hidden nie wyświetla mi wszystkich obrazów w moim poziomym pasku miniatur.
proszę o wskazówki jak zrobić przesunięcie niewidocznej częsci divów za pomocą przycisku prawo-lewo
pczeglik
15.05.2012, 18:01:47
Hej,

Zasada jest taka. Pozycjonujesz relatywnie kontener, który przechowuje wszystkie zdjęcia, czyli #gallery. W nim umieszczasz jakiś sub-kontener np. div.gallery-content, który pozycjonujesz relatywnie.
Później, gdy wykryjesz kliknięcie w przycisk prawo / lewo zmieniasz wartość css left div.gallery-content na odpowiednio wyliczoną.

Zerknij na poniższy kawałek kodu. Napisałem to na szybko i pewnie sporo jest tutaj rzeczy wymagających poprawienia, optymalizacji, ale chciałem Ci pokazać zasadę, a dostosujesz sobie to już wg potrzeb.
Poza tym są biblioteki, pluginy jQuery, które ułatwiają robienie takich galerii. 

[HTML] pobierz, plaintext 
  1. <div class="content">
  2.     <div id="normal-pic-size"></div>
  3.     <div id="gallery">
  4.         <div class="gallery-content">
  5.             <div class="mini">
  6.                 <div class="img"></div>
  7.             </div>
  8.             <div class="mini">
  9.                 <div class="img"></div>
  10.             </div>
  11.             <div class="mini">
  12.                 <div class="img"></div>
  13.             </div>
  14.             <div class="mini">
  15.                 <div class="img"></div>
  16.             </div>
  17.             <div class="mini">
  18.                 <div class="img"></div>
  19.             </div>
  20.             <div class="mini">
  21.                 <div class="img"></div>
  22.             </div>
  23.             <div class="mini">
  24.                 <div class="img"></div>
  25.             </div>
  26.             <div class="mini">
  27.                 <div class="img"></div>
  28.             </div>
  29.             <div class="mini">
  30.                 <div class="img"></div>
  31.             </div>
  32.             <div class="mini">
  33.                 <div class="img"></div>
  34.             </div>
  35.         </div>
  36.     </div>   
  37.     <div class="nav">
  38.         <a href="#" class="back">wstecz</a> | <a href="#" class="next">dalej</a>
  39.     </div>
  40. </div>
  41.  
  42. <style>
  43. #gallery{ border: 2px solid green; overflow: hidden;  width: 600px; height: 100px; position:relative; }
  44. #normal-pic-size{ width: 600px; height: 422px; border: 2px solid pink; }
  45. .content {padding:20px;font:12px/16px Tahoma, Verdana, sans-serif;width:602px;margin:auto;}
  46. .gallery-content {position:absolute;}
  47. .mini{ float:left; width:150px;height:100px; }
  48. .mini .img {width:100%;height:100px;background:#CCC;}
  49. .nav {text-align:center;margin:20px 0 0;}
  50. </style>
  51. <script>
  52. (function($) {
  53.     "use strict";
  54.  
  55.     $('.img:odd').css('background', '#FF0000');
  56.  
  57.     var next = $('.next'),
  58.         back = $('.back'),
  59.         galleryControl = {
  60.             imgWidth: 0,
  61.             imgCount: 0,
  62.             galleryContent: '',
  63.             current: 0,
  64.             maxSteps: 0,
  65.             init: function(options) {
  66.                 this.galleryContent = options.galleryContent || '';
  67.                 this.imgWidth = options.imgWidth || 100;                
  68.                 this.imgCount = this.galleryContent.find('.img').length;
  69.                 this.maxSteps = this.imgCount - parseInt(parseInt(this.galleryContent.css('width'), 10) / this.imgWidth, 10);
  70.             },
  71.             move: function(dir) {
  72.                 if (dir === 'next') {
  73.                     if (this.current < this.maxSteps) {
  74.                         this.current += 1;
  75.                     }
  76.                 }
  77.                 if (dir === 'back') {
  78.                     if (this.current > 0) {
  79.                         this.current -= 1;
  80.                     }
  81.                 }
  82.                 if (this.galleryContent !== '') {
  83.                     this.galleryContent.css({
  84.                         'left': ~ (this.current * this.imgWidth)
  85.                     });
  86.                 }
  87.             }
  88.         };
  89.     // Inicjalizacja
  90.     galleryControl.init({
  91.         imgWidth: parseInt($('.img').css('width'), 10),
  92.         galleryContent: $('.gallery-content')
  93.     });
  94.  
  95.     // obsługa zdarzeń
  96.     back.on('click', function() {
  97.         galleryControl.move('back');
  98.     });
  99.     next.on('click', function() {
  100.         galleryControl.move('next');
  101.     });
  102. }(jQuery));
  103. </script>
[HTML] pobierz, plaintext


Funkcjonujący przykład możesz zobaczyć tutaj: jsFiddle - przesuwanie zdjęć
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.