Monitor Reply

Support

Want to show description in lightbox view of GalleryES View

Permalink Browser Info Environment June 03, 2015 at 1:07 PM

I would like the lightbox view of the gallery_e_s_view to show both the title and description. Currently it repeats the title. You can see it here:

http://mntimeworn.com/products/restaurant-tabletops/rustic-patina/r...

Click the large image to see the lightbox and the double post of the title. I have tried to modify the code in the controller file, but I'm doing something wrong. I think it is in this part:

//FILMSTRIP GALLERY
      if ($this->galleryType == 'filmstrip') {
         $enableLightbox = '0';
         $script_tag = '<script type="text/javascript" src="' . $bv->getBlockURL() . '/javascript/jquery.flexslider-min.js"></script>';
         $lightbox = '<script type="text/javascript" src="' . $bv->getBlockURL() . '/javascript/jquery.magnific.js"></script>';
         $pin = '<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>';
         $this->addHeaderItem($pin);
         $this->addHeaderItem($script_tag);
         $this->addHeaderItem($lightbox);
         $this->addHeaderItem('
            <script type="text/javascript">
               $(window).load(function() {
                 // The slider being synced must be initialized first
                 $("#carousel'.$bID.$this->uniqueID.'").flexslider({
                   animation: "slide",

Viewing 15 lines of 45 lines. View entire code block.

 
      //FILMSTRIP GALLERY
      if ($this->galleryType == 'filmstrip') {
         $enableLightbox = '0';
         $script_tag = '<script type="text/javascript" src="' . $bv->getBlockURL() . '/javascript/jquery.flexslider-min.js"></script>';
         $lightbox = '<script type="text/javascript" src="' . $bv->getBlockURL() . '/javascript/jquery.magnific.js"></script>';
         $pin = '<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>';
         $this->addHeaderItem($pin);
         $this->addHeaderItem($script_tag);
         $this->addHeaderItem($lightbox);
         $this->addHeaderItem('
            <script type="text/javascript">
               $(window).load(function() {
                 // The slider being synced must be initialized first
                 $("#carousel'.$bID.$this->uniqueID.'").flexslider({
                   animation: "slide",
                   controlNav: false,
                   animationLoop: false,
                   slideshow: '.$autoPlayF.',
                   itemWidth: '.$this->filmstripThumb.',
                   itemMargin: 5,
                   asNavFor: "#slider'.$bID.$this->get('uniqueID').'"
                 });
 
                 $("#slider'.$bID.$this->uniqueID.'").flexslider({
                   animation: "slide",
                   controlNav: '.$hideDots.',
                   animationLoop: false,
                   slideshow: '.$autoPlayF.',
                   smoothHeight: true,
                   sync: "#carousel'.$bID.$this->get('uniqueID').'"
                 });
               });
 
               $(window).load(function() {
                  $(".galleryESItem'. $bID .'").magnificPopup({
                       type: "image",
                       gallery:{enabled:true},
                       image: {
                         titleSrc: function(item) {
                           return item.el.attr("title") + "<small>" + item.el.attr("title") + "</small>";
                        }
                     }
                  });
               });
 
            </script>
         ');
 
      }

Please let me know how to fix this.

Type:	Pre-Sale
Status:	Resolved

emirii replied on Jun 3, 2015 at 2:50 pm Permalink Reply

Hi there! I think you were close, but just have to change the selector in the lightbox settings to the title and alt attributes of the image instead. Here's the edited version of code:

//FILMSTRIP GALLERY
  if ($this->galleryType == 'filmstrip') {
     $enableLightbox = '0';
     $script_tag = '<script type="text/javascript" src="' . $bv->getBlockURL() . '/javascript/jquery.flexslider-min.js"></script>';
     $lightbox = '<script type="text/javascript" src="' . $bv->getBlockURL() . '/javascript/jquery.magnific.js"></script>';
     $pin = '<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>';
     $this->addHeaderItem($pin);
     $this->addHeaderItem($script_tag);
     $this->addHeaderItem($lightbox);
     $this->addHeaderItem('
        <script type="text/javascript">
           $(window).load(function() {
             // The slider being synced must be initialized first
             $("#carousel'.$bID.$this->uniqueID.'").flexslider({
               animation: "slide",

Viewing 15 lines of 45 lines. View entire code block.

 
 
 //FILMSTRIP GALLERY
  if ($this->galleryType == 'filmstrip') {
     $enableLightbox = '0';
     $script_tag = '<script type="text/javascript" src="' . $bv->getBlockURL() . '/javascript/jquery.flexslider-min.js"></script>';
     $lightbox = '<script type="text/javascript" src="' . $bv->getBlockURL() . '/javascript/jquery.magnific.js"></script>';
     $pin = '<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>';
     $this->addHeaderItem($pin);
     $this->addHeaderItem($script_tag);
     $this->addHeaderItem($lightbox);
     $this->addHeaderItem('
        <script type="text/javascript">
           $(window).load(function() {
             // The slider being synced must be initialized first
             $("#carousel'.$bID.$this->uniqueID.'").flexslider({
               animation: "slide",
               controlNav: false,
               animationLoop: false,
               slideshow: '.$autoPlayF.',
               itemWidth: '.$this->filmstripThumb.',
               itemMargin: 5,
               asNavFor: "#slider'.$bID.$this->get('uniqueID').'"
                 });
 
                 $("#slider'.$bID.$this->uniqueID.'").flexslider({
               animation: "slide",
               controlNav: '.$hideDots.',
               animationLoop: false,
               slideshow: '.$autoPlayF.',
               smoothHeight: true,
               sync: "#carousel'.$bID.$this->get('uniqueID').'"
                 });
               });
 
               $(window).load(function() {
                  $(".galleryESItem'. $bID .'").magnificPopup({
                       type: "image",
                       gallery:{enabled:true},
                       image: {
                         titleSrc: function(item) {
                           return item.el.find("img").attr("title") + "<small>" + item.el.find("img").attr("alt") + "</small>";
                        }
                     }
                  });
               });
 
            </script>
         ');
 
      }

Let me know if for some reason it didn't work out for you or if you need more help! Thank you.

webicine replied on Jun 3, 2015 at 5:00 pm Permalink Reply

worked perfectly - thank you!

GalleryES (for 5.6)

Support

Want to show description in lightbox view of GalleryES View

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post