Optymalizacja wyświetlania galerii

application/controllers/GalleryController.php

@@ -18,6 +18,7 @@ public function init()
 	public function indexAction() {
 		$mapper = new Application_Model_GalleryMapper();
 		$this->view->galleries = $mapper->fetchAll(null, 'folder_date DESC', 20);
+
 		foreach ($this->view->galleries as $key => $gallery) {
 			if (!$gallery->getPhotos()) unset($this->view->galleries[$key]);
 		}

application/layouts/scripts/layout.phtml

@@ -6,6 +6,7 @@
 	<?php echo $this->headLink()->appendStylesheet('/css/global.css') ?>
 	<?php echo $this->headScript()
 		->prependFile('/js/main.js')
+		->prependFile('/js/jquery-ui-1.8.18.min.js')
 		->prependFile('/js/jquery-1.7.2.min.js') ?>
 
 	<script type="text/javascript">

application/layouts/scripts/layout_en.phtml

@@ -6,6 +6,7 @@
 	<?php echo $this->headLink()->appendStylesheet('/css/global.css') ?> 
 	<?php echo $this->headScript()
 		->prependFile('/js/main.js')
+		->prependFile('/js/jquery-ui-1.8.18.min.js')
 		->prependFile('/js/jquery-1.7.2.min.js') ?>
 
 	<script type="text/javascript">

application/views/scripts/gallery/index.phtml

@@ -1,12 +1,20 @@
-<div id="galleries" class="clearfix">
-	<?php foreach ($this->galleries as $gallery) : ?>
-		<div class="gallery">
-			<div class="preview">
-				<img src="<?php echo $this->escape($gallery->getMainPhoto()->getName()) ?>" />
+<table id="galleries">
+	<tr>
+		<?php foreach ($this->galleries as $gallery) : ?>
+		<td>
+			<div class="gallery">
+				<div class="clearfix">
+					<div class="preview">
+						<img src="<?php echo $this->escape($gallery->getMainPhoto()->getName()) ?>" />
+					</div>
+					<div class="thumbnails clearfix">
+						<?php foreach ($gallery->getPhotos() as $photo) : ?>
+							<div class="thumbnail"><img src="<?php echo $photo->getName() ?>" /></div>
+						<?php endforeach ?>
+					</div>
+				</div>
 			</div>
-			<?php foreach ($gallery->getPhotos() as $photo) : ?>
-				<div class="thumbnail"><img src="<?php echo $photo->getName() ?>" /></div>
-			<?php endforeach ?>
-		</div>
+		</td>
 		<?php endforeach ?>
-</div>
+	</tr>
+</table>

baza/buffet_dml.sql

@@ -140,7 +140,25 @@ INSERT INTO `picture` (`id`, `name`, `information`, `main_picture`, `gallery_id`
 (55, '/galleries/1/photo20.jpg', NULL, NULL, 1, '2012-03-31 00:00:00', 'seta', NULL),
 (56, '/galleries/1/photo21.jpg', NULL, NULL, 1, '2012-03-31 00:00:00', 'seta', NULL),
 (57, '/galleries/1/photo22.jpg', NULL, NULL, 1, '2012-03-31 00:00:00', 'seta', NULL),
-(58, '/galleries/1/photo23.jpg', NULL, NULL, 1, '2012-03-31 00:00:00', 'seta', NULL);
+(58, '/galleries/1/photo23.jpg', NULL, NULL, 1, '2012-03-31 00:00:00', 'seta', NULL),
+(59, '/galleries/1/photo1.jpg', NULL, NULL, 3, '2012-03-31 00:00:00', 'seta', NULL),
+(60, '/galleries/1/photo2.jpg', NULL, 'Y', 3, '2012-03-31 00:00:00', 'seta', NULL),
+(61, '/galleries/1/photo3.jpg', NULL, NULL, 3, '2012-03-31 00:00:00', 'seta', NULL),
+(62, '/galleries/1/photo4.jpg', NULL, NULL, 3, '2012-03-31 00:00:00', 'seta', NULL),
+(63, '/galleries/1/photo5.jpg', NULL, NULL, 3, '2012-03-31 00:00:00', 'seta', NULL),
+(64, '/galleries/1/photo6.jpg', NULL, NULL, 3, '2012-03-31 00:00:00', 'seta', NULL),
+(65, '/galleries/1/photo7.jpg', NULL, NULL, 3, '2012-03-31 00:00:00', 'seta', NULL),
+(66, '/galleries/1/photo8.jpg', NULL, NULL, 3, '2012-03-31 00:00:00', 'seta', NULL),
+(67, '/galleries/1/photo9.jpg', NULL, NULL, 3, '2012-03-31 00:00:00', 'seta', NULL),
+(68, '/galleries/1/photo10.jpg', NULL, NULL, 4, '2012-03-31 00:00:00', 'seta', NULL),
+(69, '/galleries/1/photo11.jpg', NULL, NULL, 4, '2012-03-31 00:00:00', 'seta', NULL),
+(70, '/galleries/1/photo12.jpg', NULL, NULL, 4, '2012-03-31 00:00:00', 'seta', NULL),
+(71, '/galleries/1/photo13.jpg', NULL, NULL, 4, '2012-03-31 00:00:00', 'seta', NULL),
+(72, '/galleries/1/photo14.jpg', NULL, NULL, 4, '2012-03-31 00:00:00', 'seta', NULL),
+(73, '/galleries/1/photo15.jpg', NULL, NULL, 4, '2012-03-31 00:00:00', 'seta', NULL),
+(74, '/galleries/1/photo16.jpg', NULL, NULL, 4, '2012-03-31 00:00:00', 'seta', NULL),
+(75, '/galleries/1/photo17.jpg', NULL, NULL, 4, '2012-03-31 00:00:00', 'seta', NULL),
+(76, '/galleries/1/photo18.jpg', NULL, 'Y', 4, '2012-03-31 00:00:00', 'seta', NULL);
 
 /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
 /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

public/css/global.css

@@ -568,26 +568,57 @@ color		: #FFFFFF;
 }
 
 #galleries {
-	height: 600px;
-	background: blue;
-	overflow: hidden
+	border-collapse: collapse;
+	border-spacing: 0px;
 }
 
 #galleries .gallery {
-	float: left;
+	width: 230px;
+	height: 600px;
+	overflow: hidden;
+	margin: 4px;
+	margin-top: 0px;
+}
+
+#galleries .gallery > div {
+	width: 620px;
+	text-align: center;
+	margin-left: -55%;
+}
+
+#galleries .gallery > div.active {
+	margin-left: 0;
+}
+
+#galleries tr:first-child .gallery {
+	margin-left: 0px;
+}
+
+#galleries .gallery.active {
 	width: 620px;
 }
 
 #galleries .gallery .preview {
 	width: 500px;
 	float: left;
 	overflow: hidden;
+	position: relative;
+}
+
+#galleries .gallery.active .preview {
+	left: 0;
 }
 
 #galleries .gallery .preview img {
 	height: 600px;
 }
 
+#galleries .gallery .thumbnails {
+	float: left;
+	width: 120px;
+	overflow: hidden;
+}
+
 #galleries .gallery .thumbnail {
 	float: left;
 	width: 50px;

public/js/main.js

@@ -0,0 +1,18 @@
+$(function () {
+	$('#galleries .gallery').on('click', function () {
+		var slideTime = 700, 
+			$active = $('#galleries .gallery.active');
+
+		if ($active.length && $active.get(0) == this) {
+			return;
+		}
+		$active.removeClass("active", slideTime );
+		$active.children().removeClass("active", slideTime );
+		$(this).addClass( "active", slideTime );
+		$(this).children().addClass( "active", slideTime );
+	});
+
+	$('#galleries .thumbnail img').on('click', function () {
+		$(this).parents('.gallery').find('.preview img').attr('src', $(this).attr('src'));
+	});
+});