Permalink
Browse files

Optymalizacja wyświetlania galerii

  • Loading branch information...
1 parent 6d4d91e commit 08b800da789351763db9831626d6b358c1fbfa16 Radosław Zieliński committed Apr 11, 2012
@@ -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]);
}
@@ -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">
@@ -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">
@@ -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>
View
@@ -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 */;
View
@@ -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;

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -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'));
+ });
+});

0 comments on commit 08b800d

Please sign in to comment.