Update Photo Gallery
authorSteve Sutton <steve@gaslightmedia.com>
Fri, 20 Mar 2015 18:32:56 +0000 (14:32 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Fri, 20 Mar 2015 18:32:56 +0000 (14:32 -0400)
To get slideshow working.

Toolkit/Photos/Display.php
Toolkit/Photos/Gallery.php
Toolkit/Photos/application.ini
Toolkit/Photos/css/gallery.css
Toolkit/Photos/js/photoSlideShow.js [new file with mode: 0644]
Toolkit/Photos/templates/photoSlider.html [new file with mode: 0644]

index 5f88ba4..cb6315e 100644 (file)
@@ -108,16 +108,30 @@ class Toolkit_Photos_Display
     // }}}
     public function getSlideShow(array $photoCatIds, $galleries)
     {
+        $GLOBALS['styleSheets'][]
+            = $this->baseURL . 'photoswipe/photoswipe.css';
+        $GLOBALS['bottomScripts'][]
+            = $this->baseURL . 'photoswipe/lib/klass.min.js';
+        $GLOBALS['bottomScripts'][]
+            = $this->baseURL . 'photoswipe/code.photoswipe.jquery-3.0.5.js';
+        $GLOBALS['bottomScripts'][]
+            = $this->baseURL . 'Toolkit/Photos/js/photoGallery.js';
+
         $GLOBALS['styleSheets'][]   = $this->glmAppBaseURL
             . 'libjs/plugins/nivoslider/3.2/prod/nivo-slider.css';
         $GLOBALS['styleSheets'][]   = $this->glmAppBaseURL
             . 'libjs/plugins/nivoslider/themes/default/default.css';
         $GLOBALS['bottomScripts'][] = $this->glmAppBaseURL
             . 'libjs/plugins/nivoslider/3.2/prod/jquery.nivo.slider.js';
+        $GLOBALS['bottomScripts'][] = $this->baseURL
+            . 'Toolkit/Photos/js/photoSlideShow.js';
+        $GLOBALS['styleSheets'][] = $this->baseURL
+            . 'Toolkit/Photos/css/gallery.css';
         $tpl = new HTML_Template_Flexy($this->flexyOptions);
         $tpl->compile(self::PHOTO_SLIDER);
 
         $page                = new stdClass();
+        $page->base_url      = MEDIA_BASE_URL;
 
         // Filter the categories so only slideshow ones are in $categories
         $categories          = $this->getCategories($photoCatIds);
@@ -130,6 +144,7 @@ class Toolkit_Photos_Display
             $slideShowCategories->append($index);
             $photoCatIds[] = $index['id'];
         }
+        //echo '<pre>'.print_r($photoCatIds, true).'</pre>';
         if (empty($photoCatIds)) {
             return false;
         }
@@ -141,7 +156,7 @@ class Toolkit_Photos_Display
         $page->webUrl        = BASE_URL . 'download-photo-web/';
         $page->printUrl      = BASE_URL . 'download-photo-print/';
         $page->photoUrlLarge = FILE_SERVER_URL . IS_OWNER_ID
-            . '/rotatingImagesResized/';
+            . '/photoSlideshow/';
         $page->photoUrlSmall = FILE_SERVER_URL . IS_OWNER_ID
             . '/mediaGallery/';
         $catid               = filter_var($_REQUEST['photoCategoryId']);
index e658738..0bdda04 100644 (file)
@@ -94,7 +94,7 @@ class Toolkit_Photos_Gallery
                 ? " AND exclusive <> true"
                 : '';
             $sql = "
-              SELECT pcb.photocat_id
+              SELECT pcb.photocat_id,pc.slideshow
                 FROM photo_category_bus pcb, photo_category pc
                WHERE buscat_id = :pageId
                  AND pc.id = pcb.photocat_id
@@ -140,12 +140,17 @@ class Toolkit_Photos_Gallery
     public function getPageGallery($pageId)
     {
         $galleries = $this->_getGalleriesAssignedToPage($pageId);
+        //echo '<pre>'.print_r($galleries, true).'</pre>';
 
         $photoCatIds = array();
         foreach ($galleries as $gallery) {
             $photoCatIds[] = $gallery['photocat_id'];
         }
 
+        if ($galleries[0]['slideshow']) {
+            return $this->_photoApp->getSlideShow($photoCatIds, $galleries);
+        }
+
         return !empty($photoCatIds)
             ? $this->_photoApp->toHTML($photoCatIds, $galleries)
             : '';
index d576e1c..778c54a 100644 (file)
@@ -9,7 +9,7 @@ application.application = "Photos/Controllers"
 ; This option also may need other new fields not added yet to the contact table
 settings.mediaExclusive  = Off
 settings.photoNameSearch = Off
-settings.slideShowOption = Off
+settings.slideShowOption = On
 
 ; default Flexy Options for this application
 flexyOptions.templateDir     = BASE "Toolkit/Photos/templates"
index 545a01c..124a118 100755 (executable)
@@ -26,3 +26,13 @@ div.thumb {
 .photocattitle {text-align: center; font-weight: bold;}
 .phototitle {text-align: center; font-weight: normal; width: 110px;}
 .galleryRow {clear: left;}
+#photo_slideshow_wrapper {
+    max-width: 600px;
+    max-height: 400px;
+    margin: 0 auto;
+}
+#photo_slideshow_wrapper .nivo-caption {
+    background-color: rgba(0, 0, 0, 0.7);
+    width: 100%;
+}
+.download_wrapper * {clear: none !important;}
diff --git a/Toolkit/Photos/js/photoSlideShow.js b/Toolkit/Photos/js/photoSlideShow.js
new file mode 100644 (file)
index 0000000..13fb89a
--- /dev/null
@@ -0,0 +1,12 @@
+$(function() {
+    $("#photoSliderCategoryId").change(function(){
+        $(this).parent().submit();
+    });
+    $('#photo-slider').nivoSlider({
+        effect: 'fade',
+        pauseTime: 5000,
+        directionNav: true,
+        controlNav: false,
+        controlNavThumbs: false
+    });
+});
diff --git a/Toolkit/Photos/templates/photoSlider.html b/Toolkit/Photos/templates/photoSlider.html
new file mode 100644 (file)
index 0000000..1dbc18f
--- /dev/null
@@ -0,0 +1,81 @@
+<flexy:toJavascript base_url="base_url" />
+<?php
+
+if (count($t->categories) > 1) {
+    // echo $t->base_url;
+    //echo '<link rel="stylesheet" type="text/css" href="' . $t->base_url . 'Toolkit/Photos/templates/css/photoSlideshow.css">';
+?>
+<div class="sliderFilterWrapper">
+    <div class="sliderCatWrapper">
+        <h2 class="gallery_header">Select an Album</h2>
+        <form
+            method="get"
+            id="photoGallery"
+            action="{searchFormUrl:h}"
+            flexy:ignore="yes">
+            <input type="hidden" name="catid" value="{_REQUEST[catid]}">
+            <label id="photoCategoryLabel"></label><!--/Filter By Category-->
+            <select id="photoSliderCategoryId" name="photoCategoryId">
+                <?php foreach ($t->categories as $category) {
+                echo '<option value="'.$category['id'].'"';
+                if ($_REQUEST['photoCategoryId'] == $category['id']) {
+                echo ' selected';
+                }
+                echo '>'.$category['category'].'</option>';
+                }?>
+            </select>
+        </form>
+    </div>
+</div>
+<?php
+} else {
+echo "<h2 class='gallery_header'>" . $t->categories[0]['category'] . "</h2>";
+}
+?>
+{if:all}
+<div id="photo_slideshow_wrapper" class="showAll">
+{else:}
+<div id="photo_slideshow_wrapper" class="">
+{end:}
+    <div class="photo_slideshow_wrapper_inner">
+        <div class="slider-wrapper theme-default">
+            <div class="ribbon"></div>
+            <div id="photo-slider" class="nivoSlider">
+                {foreach:photos,photo}
+                <a
+                    data-download="<?php if($photo->getDownload()){echo '1';}else{echo '0';}?>"
+                    data-photoid="<?php echo $photo->getId()?>"
+                    data-download="<?php echo $photo->getDownload()?>"
+                    rel="<?php echo htmlspecialchars($photo->getDescription())?>"
+                    title="<?php echo htmlspecialchars($photo->getTitle())?>"
+                    class="photoimg"
+                    href="{photoUrlLarge:h}{photo.getImage():h}" class="photoimg">
+                    <img
+                        alt=""
+                        title="#photoCaption-{photo.getId():h}"
+                        src="{photoUrlLarge:h}{photo.getImage():h}"
+                        data-thumb="{photoUrlSmall:h}{photo.getImage():h}">
+                </a>
+                {end:}
+            </div>
+        </div>
+        {foreach:photos,photo}
+        <div id="photoCaption-{photo.getId():h}" class="nivo-html-caption">
+            <strong flexy:if="photo.getTitle()">{photo.getTitle()}</strong>
+            {photo.getDescription()}
+            {if:photo.getDownload()}
+            <div>Download for <a href="{webUrl:h}{photo.getId():h}/">Web</a>
+                - <a href="{printUrl:h}{photo.getId():h}/">Print</a></div>
+            {end:}
+        </div>
+        {end:}
+    </div>
+    {if:showAllUrl}
+    <div class="view_all_wrapper"><a href="{showAllUrl:h}">View All ({numphotos:h})</a></div>
+    {else:}
+    <style>
+        #category {display: none;}
+        .listings {display: none;}
+    </style>
+    {end:}
+</div><!--.photo_slideshow_wrapper-->