New jQuery slideshow plugin for Tidypics not working

New jQuery slideshow plugin for Tidypics not working

Hi, I'm trying to create my first plugin to create a nice jQuery slideshow in Tidypics, but I have problems to get it work.

I'm on Elgg 1.8.16 with Tidypics 1.8.4 and the slideshow is based on PhotoSwipe (http://photoswipe.com/)

The plugin has following structure:

start.php

manifest

languages (folder)

            en.php

vendors (folder)

            photoswipe-master (folder)

                        dist (folder)

                                   my-gallery.js

                                   photoswipe.css

                                   photoswipe.js

                                   photoswipe-ui-default.js

                                   style.css

                                   default-skin (folder)

                                               default-skin.css

                                               default-skin.png

                                               default-skin.svg

                                               preloader.gif

views (folder)

            default (folder)

                        object (folder)

                                               image.php

 

 

  • How and where are you initializing photoswipe.js? Usually jQuery plugins require you to do something like

    $('#some-id').photoswipe({options~});

  • in start.php I have:

    <?php

                    /**

                     * start.php

                     * Photoswipe integration for TidyPics 1.8.4 and Elgg 1.8

                     * Package original by Stefano Pandolfi

                     * Include JS and CSS files for PhotoSwipe (photoswipe.com)

                     * You can find them in dist/ folder of GitHub repository. Sass and uncompiled JS files are in folder src/. I recommend using Sass if you're planning to modify existing styles, as code there is structured and commented.

                     */

     

                     function photoswipe_init() {

                                  

                                   global $CONFIG;

                                  

                                   // Register javascript needed for photoswipe gallery

                                  

                                                   // Core CSS file

                                                   $css_url = 'mod/photoswipe/vendors/photoswipe-master/dist/photoswipe.css';

                                                   elgg_register_css('photoswipe', $css_url);

                                  

                                                   // Skin CSS file (styling of UI - buttons, caption, etc.) In the folder of skin CSS file there are also: - .png and .svg icons sprite, - preloader.gif (for browsers that do not support CSS animations)

                                                   $css_url = 'mod/photoswipe/vendors/photoswipe-master/dist/default-skin/default-skin.css';

                                                   elgg_register_css('default-skin', $css_url);

                                                  

                                                   // My gallery style css

                                                   $css_url = 'mod/photoswipe/vendors/photoswipe-master/dist/style.css';

                                                   elgg_register_css('style', $css_url);

                                                  

                                                   // Core JS file

                                                   $js_url = 'mod/photoswipe/vendors/photoswipe-master/dist/photoswipe.js';

                                                   elgg_register_js('photoswipe', $js_url);

                                                  

                                                   // UI JS file

                                                   $js_url = 'mod/photoswipe/vendors/photoswipe-master/dist/photoswipe-ui-default.js';

                                                   elgg_register_js('photoswipe-ui', $js_url);

                                                  

                                                   // My gallery initilalize js

                                                   $js_url = 'mod/photoswipe/vendors/photoswipe-master/dist/my-gallery.js';

                                                   elgg_register_js('my-gallery', $js_url);

                    }

                   

                                   // Make sure photoswipe_init is called on initialisation

                                   elgg_register_event_handler('init', 'system', 'potoswipe_init');

    ?>

  • then I override Tidypics with image.php where I load also all js and css

    <?php

                    /**

                     * image.php

                     * Tidypics image object views

                     */

                     

                    global $CONFIG;

     

                    $image = $vars['entity'];

                    $image_guid = $image->getGUID();

                    $tags = $image->tags;

                    $title = $image->title;

                    $desc = $image->description;

                    $owner = $image->getOwnerEntity();

                    $friendlytime = friendly_time($image->time_created);

                   

    /********************************************************************

     *

     * search view of an image

     *

     ********************************************************************/

                    if (get_context() == "search") {

     

                                   // gallery view is a matrix view showing just the image - size: small

                                   if (get_input('search_viewtype') == "gallery") {

                                                   ?>

                                                   <div class="tidypics_album_images">

                                                                   <a href="<?php echo $image_guid;?>"><img src="<?php echo $vars['url'].'photos/thumbnail/'.$image_guid;?>" alt="$desc"/></a>

                                                   </div>

                                                   <?php

                                   }

                                   else{

                                                   // list view displays a thumbnail icon of the image, its title, and the number of comments

                                                   $info = '<p><a href="'.$vars['url'].'photos/thumbnail/'.$image_guid.'">'.$title.'</a></p>';

                                                   $info .= "<p class=\"owner_timestamp\"><a href=\"{$vars['url']}pg/profile/{$owner->username}\">{$owner->name}</a> {$friendlytime}";

                                                   $numcomments = elgg_count_comments($image);

                                                   if ($numcomments)

                                                                   $info .= ", <a href=\"{$image->getURL()}\">" . sprintf(elgg_echo("comments")) . " (" . $numcomments . ")</a>";

                                                   $info .= "</p>";

                                                   $icon = "<a href=\"{$image->getURL()}\">" . '<img src="'.$vars['url'].'photos/thumbnail/'.$image_guid.'" /></a>';

                                                  

                                                   echo elgg_view_listing($icon, $info);

                                   }

     

    /***************************************************************

     *

     * front page view

     *

     ****************************************************************/

                    } else if (get_context() == "front") {

                                   // the front page view is a clikcable thumbnail of the image

    ?>

    <a href="<?php echo $image->getURL(); ?>">

    <img src="<?php echo $vars['url'];?>photos/thumbnail/<?php echo $image_guid;?>" class="tidypics_album_cover" alt="<?php echo $title; ?>" title="<?php echo $title; ?>" />

    </a>

    <?php

                    } else {

     

    /********************************************************************

     *

     *  listing of photos in an album

     *

     *********************************************************************/

                                   if (!$vars['full']) {

                                                  

    ?>

    <?php

                    // plugins can override the image link to add lightbox code here

                    $image_html = false;

                    $image_html = trigger_plugin_hook('tp_thumbnail_link', 'album', array('image' => $image), $image_html);

                   

                    if ($image_html) {

                                   echo $image_html;

                    } else {

                                   // default link to image if no one overrides

                                  

                                   //trim the image title to get it fited inside the slide

                                   $title2 = $image->title;

                                   $title2 = substr($image->title,0,25);

                                   if (strlen($title2) > 24) $title2 .= "...";

                                  

                    // load the js and css for PhotoSwipe gallery

                    elgg_load_css('photoswipe');

                    elgg_load_css('default-skin');

                    elgg_load_css('style');

                    elgg_load_js('photoswipe');

                    elgg_load_js('photoswipe-ui');

                    elgg_load_js('my-gallery');  

                                  

    ?>

                    <div class="tidypics_album_images">

     

                    <!-- PHOTOSWIPE START -->

                                   <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"&gt;

                                   <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"&gt;

                                                   <a href="<?php echo $vars['url'].'photos/thumbnail/'.$image_guid.'/master';?>" itemprop="contentUrl" data-size="600x400" />

                                                   <img src="<?php echo $vars['url'].'photos/thumbnail/'.$image_guid.'/small';?>" class="elgg-photo" itemprop="thumbnail" alt="<?php echo $desc ?>" /></a>

                                       <figcaption itemprop="caption description">Image caption</figcaption>

                                   </figure>

                                   </div>

                   

                    <!-- Root element of PhotoSwipe. Must have class pswp. -->

                    <div class="pswp" style="margin-bottom:10px">

                   

                                   <!-- Background of PhotoSwipe.

             It's a separate element as animating opacity is faster than rgba(). -->

                                   <div class="pswp__bg"></div>

                                   

                                   <!-- Slides wrapper with overflow:hidden. -->

                                   <div class="pswp__scroll-wrap">

                                  

                                                   <!-- Container that holds slides.

                                                   PhotoSwipe keeps only 3 of them in the DOM to save memory.

                                                   Don't modify these 3 pswp__item elements, data is added later on. -->

                                                   <div class="pswp__container">

                                                                   <div class="pswp__item"></div>

                                                                   <div class="pswp__item"></div>

                                                                   <div class="pswp__item"></div>

                                                   </div>

                                                                   <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->

                                                                   <div class="pswp__ui pswp__ui--hidden">

                                                                                  <div class="pswp__top-bar">

     

                                                                                                  <!--  Controls are self-explanatory. Order can be changed. -->

                                                                                                  <div class="pswp__counter"></div>

                                                                                                  <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                                                                                                  <button class="pswp__button pswp__button--share" title="Share"></button>

                                                                                                  <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                                                                                                  <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                                                                  

                                                                                                  <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->

                                                                                                  <!-- element will get class pswp__preloader--active when preloader is running -->

                                                                                                  <div class="pswp__preloader">

                                                                                                                  <div class="pswp__preloader__icn">

                                                                                                                  <div class="pswp__preloader__cut">

                                                                                                                                 <div class="pswp__preloader__donut"></div>

                                                                                                                  </div>

                                                                                                                  </div>

                                                                                                  </div>

                                                                                  </div>

     

                                                                                  <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">

                                                                                                  <div class="pswp__share-tooltip"></div>

                                                                                  </div>

     

                                                                                  <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">

                                                                                  </button>

     

                                                                                  <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">

                                                                                  </button>

     

                                                                                  <div class="pswp__caption">

                                                                                                  <div class="pswp__caption__center"></div>

                                                                                  </div>

     

                                                                   </div>

     

                                   </div>

     

                    </div>

                    <!-- /PHOTOSWIPE -->

     

                    </div>

    <?php  

                    }

    ?>

    <?php

                                   } else {

     

    /********************************************************************

     *

     *  listing individual image

     *

     *********************************************************************/

     

                                  

                                                   $image = $photo = $vars['entity'];

                                                   $album = $photo->getContainerEntity();

                                                   $next_photo = $album->getNextImage($photo->getGUID());

                                                  

                                                   $img = elgg_view_entity_icon($image, 'large', array(

                                                                   'href' => $next_photo->getURL(),

                                                                   'img_class' => 'tidypics-photo',

                                                                   'link_class' => 'tidypics-lightbox',

                                                   ));

                                                  

                                                   $owner_link = elgg_view('output/url', array(

                                                                   'href' => "photos/owner/" . $photo->getOwnerEntity()->username,

                                                                   'text' => $photo->getOwnerEntity()->name,

                                                   ));

                                                   $author_text = elgg_echo('byline', array($owner_link));

                                                  

                                                   $owner_icon = elgg_view_entity_icon($photo->getOwnerEntity(), 'tiny');

                                                  

                                                   $metadata = elgg_view_menu('entity', array(

                                                                   'entity' => $vars['entity'],

                                                                   'handler' => 'photos',

                                                                   'sort_by' => 'priority',

                                                                   'class' => 'elgg-menu-hz',

                                                   ));

                                                  

                                                   $subtitle = "$author_text $date $categories $comments_link";

                                                  

                                                   $params = array(

                                                                   'entity' => $photo,

                                                                   'title' => false,

                                                                   'metadata' => $metadata,

                                                                   'subtitle' => $subtitle,

                                                                   'tags' => $tags,

                                                   );

                                                   $list_body = elgg_view('object/elements/summary', $params);

                                                  

                                                   $params = array('class' => 'mbl');

                                                   $summary = elgg_view_image_block($owner_icon, $list_body, $params);

                                                  

                                                   echo $summary;

                                                  

                                                   echo '<div class="tidypics-photo-wrapper center">';

                                                   echo elgg_view('photos/tagging/help', $vars);

                                                   echo elgg_view('photos/tagging/select', $vars);

                                                   echo $img;

                                                   echo elgg_view('photos/tagging/tags', $vars);

                                                   echo '</div>';

                                                  

                                                   if ($photo->description) {

                                                                   echo elgg_view('output/plaintext', array(

                                                                                  'value' => $photo->description,

                                                                                  'class' => 'description',

                                                                   ));

                                                   }

                                                  

                                                   echo elgg_view('object/image/navigation', $vars);

                                                  

                                                   echo elgg_view_comments($photo,true);

     

                                   } // end of individual image display

                    }

    ?>

  • following instructions at http://photoswipe.com/documentation/getting-started.html

    initialization should be made by initPhotoSwipeFromDOM('.my-gallery'); in my-gallery.js

    var initPhotoSwipeFromDOM = function(gallerySelector) {

        // parse slide data (url, title, size ...) from DOM elements
        // (children of gallerySelector)
        var parseThumbnailElements = function(el) {
            var thumbElements = el.childNodes,
                numNodes = thumbElements.length,
                items = [],
                figureEl,
                childElements,
                linkEl,
                size,
                item;

            for(var i = 0; i < numNodes; i++) {


                figureEl = thumbElements[i]; // <figure> element

                // include only element nodes
                if(figureEl.nodeType !== 1) {
                    continue;
                }

                linkEl = figureEl.children[0]; // <a> element
                
                size = linkEl.getAttribute('data-size').split('x');

                // create slide object
                item = {
                    src: linkEl.getAttribute('href'),
                    w: parseInt(size[0], 10),
                    h: parseInt(size[1], 10)
                };

                

                if(figureEl.children.length > 1) {
                    // <figcaption> content
                      item.title = figureEl.children[1].innerHTML;
                }
     
                if(linkEl.children.length > 0) {
                    // <img> thumbnail element, retrieving thumbnail url
                    item.msrc = linkEl.children[0].getAttribute('src');
                }
               
                item.el = figureEl; // save link to element for getThumbBoundsFn
                items.push(item);
            }

            return items;
        };

        // find nearest parent element
        var closest = function closest(el, fn) {
            return el && ( fn(el) ? el : closest(el.parentNode, fn) );
        };

        // triggers when user clicks on thumbnail
        var onThumbnailsClick = function(e) {
            e = e || window.event;
            e.preventDefault ? e.preventDefault() : e.returnValue = false;

            var eTarget = e.target || e.srcElement;

            var clickedListItem = closest(eTarget, function(el) {
                return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
            });

            if(!clickedListItem) {
                return;
            }


            // find index of clicked item
            var clickedGallery = clickedListItem.parentNode,
                childNodes = clickedListItem.parentNode.childNodes,
                numChildNodes = childNodes.length,
                nodeIndex = 0,
                index;

            for (var i = 0; i < numChildNodes; i++) {
                if(childNodes[i].nodeType !== 1) {
                    continue;
                }

                if(childNodes[i] === clickedListItem) {
                    index = nodeIndex;
                    break;
                }
                nodeIndex++;
            }

     

            if(index >= 0) {
                openPhotoSwipe( index, clickedGallery );
            }
            return false;
        };

        // parse picture index and gallery index from URL (#&pid=1&gid=2)
        var photoswipeParseHash = function() {
            var hash = window.location.hash.substring(1),
            params = {};

            if(hash.length < 5) {
                return params;
            }

            var vars = hash.split('&');
            for (var i = 0; i < vars.length; i++) {
                if(!vars[i]) {
                    continue;
                }
                var pair = vars[i].split('=');  
                if(pair.length < 2) {
                    continue;
                }           
                params[pair[0]] = pair[1];
            }

            if(params.gid) {
                params.gid = parseInt(params.gid, 10);
            }

            if(!params.hasOwnProperty('pid')) {
                return params;
            }
            params.pid = parseInt(params.pid, 10);
            return params;
        };

        var openPhotoSwipe = function(index, galleryElement, disableAnimation) {
            var pswpElement = document.querySelectorAll('.pswp')[0],
                gallery,
                options,
                items;

            items = parseThumbnailElements(galleryElement);

            // define options (if needed)
            options = {
                index: index,

                // define gallery index (for URL)
                galleryUID: galleryElement.getAttribute('data-pswp-uid'),

                getThumbBoundsFn: function(index) {
                    // See Options -> getThumbBoundsFn section of docs for more info
                    var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                        pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                        rect = thumbnail.getBoundingClientRect();

                    return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
                },

                // history & focus options are disabled on CodePen
                   // remove these lines in real life:
               history: false,
               focus: false    

            };

            if(disableAnimation) {
                options.showAnimationDuration = 0;
            }

            // Pass data to PhotoSwipe and initialize it
            gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
            gallery.init();
        };

        // loop through all gallery elements and bind events
        var galleryElements = document.querySelectorAll( gallerySelector );

        for(var i = 0, l = galleryElements.length; i < l; i++) {
            galleryElements[i].setAttribute('data-pswp-uid', i+1);
            galleryElements[i].onclick = onThumbnailsClick;
        }

        // Parse URL and open gallery if it contains #&pid=3&gid=1
        var hashData = photoswipeParseHash();
        if(hashData.pid > 0 && hashData.gid > 0) {
            openPhotoSwipe( hashData.pid - 1 ,  galleryElements[ hashData.gid - 1 ], true );
        }
    };

    // execute above function
    initPhotoSwipeFromDOM('.my-gallery');

  • Fixing my post, saw you used elgg_load_js and css. Does firebug or console output anything?

  • I'm loading all CSS and JS in image.php from line 83 to 88.

    I know this is and advanced script, but after long search PhotoSwipe seems to be the slideshow script which can satisfy my needs ...

  • No particular output from firebug ...

    I'm clearly not experienced in Elgg and JavaScript and I'm not sure I did well parsing DOM ...

    If an Elgg specialist can fix my pluging I can hire his service ...

  • Yeah wish I can help but I stopped using Tidypics back in 1.7

  • I'm open to any better photogallery plugin for Elgg 1.8 where you could add PhotoSwipe slideshow ...

  • Is it just a typo here in your posting or does the init call in start.php is really

    elgg_register_event_handler('init', 'system', 'potoswipe_init');

    If you have "potoswipe_init" in this call the init function will not get executed.

    Apart from that I can't say much right now. It difficult to say what might be wrong by just looking at the code here.

    General remark: if I would have had some free time I would already have replaced the slideshow currently implemented in Tidypics...