Lightbox Enhancement

denney · Novice Joined: Dec 24, 2007 Posts: 28

I don't know if you would want to integrate this but I think some people here might benefit from it.

What this does is displays the link "View Item Details" below the image in Lightbox which takes you to the image page in Gallery2. If the user doesn't have Javascript enabled, it takes them directly to the image in Gallery2.

I wasn't able to get the "View Item Details" text to work when it was in the language file so maybe you can have a shot at it.

Code: › #
#-----[ OPEN ]------------------------------------------
#
g2image/scripts/functions.js

#
#-----[ FIND ]------------------------------------------
#
            htmlCode += '[lburl=' + fullsize_img[i] + ']';

#
#-----[ REPLACE WITH ]------------------------------------------
#
            htmlCode += '[lburl=' + image_url[i] + ',' + fullsize_img[i] + ']';

#
#-----[ OPEN ]------------------------------------------
#
g2image/scripts/lightbox.js

#
#-----[ FIND ]------------------------------------------
#
      if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){

#
#-----[ REPLACE WITH ]------------------------------------------
#
      if (anchor.getAttribute('imgLink') && (relAttribute.toLowerCase().match('lightbox'))){

#
#-----[ FIND ]------------------------------------------
#
      if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){

#
#-----[ REPLACE WITH ]------------------------------------------
#
      if (area.getAttribute('imgLink') && (relAttribute.toLowerCase().match('lightbox'))){

#
#-----[ FIND ]------------------------------------------
#
      imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));

#
#-----[ REPLACE WITH ]------------------------------------------
#
      imageArray.push(new Array(imageLink.getAttribute('imgLink'), imageLink.getAttribute('title')));

#
#-----[ FIND ]------------------------------------------
#
         if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
            imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));

#
#-----[ REPLACE WITH ]------------------------------------------
#
         if (anchor.getAttribute('imgLink') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
            imageArray.push(new Array(anchor.getAttribute('imgLink'), anchor.getAttribute('title')));

#
#-----[ FIND ]------------------------------------------
#
      while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}

#
#-----[ REPLACE WITH ]------------------------------------------
#
      while(imageArray[imageNum][0] != imageLink.getAttribute('imgLink')) { imageNum++;}

#
#-----[ OPEN ]------------------------------------------
#
includes/bbcode.php

#
#-----[ FIND ]------------------------------------------
#
                  '#\[lburl=([^\[]+?):$uid\](.*?)\[/lburl:$uid\]#s' => $this->bbcode_tpl('lburl', $bbcode_id),

#
#-----[ REPLACE WITH ]------------------------------------------
#
                  '#\[lburl=([^\[]+?),([^\[]+?):$uid\](.*?)\[/lburl:$uid\]#s' => $this->bbcode_tpl('lburl', $bbcode_id),

#
#-----[ FIND ]------------------------------------------
#
      'lburl'             => array('{LBURL}'    => '$1', '{DESCRIPTION}' => '$2'),

#
#-----[ REPLACE WITH ]------------------------------------------
#
      'lburl'             => array('{URL}'    => '$1', '{LBURL}'       => '$2', '{DESCRIPTION}' => '$3'),

#
#-----[ OPEN ]------------------------------------------
#
styles/prosilver/template/bbcode.html

#
#-----[ FIND ]------------------------------------------
#
<a href="{LBURL}" rel="lightbox[g2image]" class="postlink">{DESCRIPTION}</a>

#
#-----[ REPLACE WITH ]------------------------------------------
#
<a href="{URL}" imgLink="{LBURL}" rel="lightbox[g2image]" title="<a href="{URL}">View Item Details</a>" class="postlink">{DESCRIPTION}</a>

AdBot

denney · Novice Joined: Dec 24, 2007 Posts: 28

If you use the enhancement above, this one goes hand in hand.

This enhancement adds Lightbox support to Gallery2 using the integrations Lightbox copy. This won't work if you access your Gallery2 from OUTSIDE of the integration (eg. Via /gallery2/index.php directly). It could be modified to work but hey, what's the point of this integration then?!?!

Anyway, here is the code (don't forget to copy your "album.tpl" to "local/album.tpl":

Code: › #
#-----[ OPEN ]------------------------------------------
#
g2image/jscripts/lightbox.js

#
#-----[ FIND ]------------------------------------------
#
   var objBottomNavCloseImage = document.createElement("img");
   objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
   objBottomNavCloseLink.appendChild(objBottomNavCloseImage);

#
#-----[ AFTER, ADD ]------------------------------------------
#
   var objMainLink = document.createElement("a");
   objMainLink.setAttribute('id','mainLink');
   objMainLink.setAttribute('href','#');
   objHoverNav.appendChild(objMainLink);

#
#-----[ FIND ]------------------------------------------
#
      imageArray.push(new Array(imageLink.getAttribute('imgLink'), imageLink.getAttribute('title')));

#
#-----[ REPLACE WITH ]------------------------------------------
#
      imageArray.push(new Array(imageLink.getAttribute('imgLink'), imageLink.getAttribute('title'), imageLink.getAttribute('pageLink')));

#
#-----[ FIND ]------------------------------------------
#
            imageArray.push(new Array(anchor.getAttribute('imgLink'), anchor.getAttribute('title')));

#
#-----[ REPLACE WITH ]------------------------------------------
#
            imageArray.push(new Array(anchor.getAttribute('imgLink'), anchor.getAttribute('title'), anchor.getAttribute('pageLink')));

#
#-----[ FIND ]------------------------------------------
#
updateNav: function() {

   Element.show('hoverNav');

#
#-----[ AFTER, ADD ]------------------------------------------
#
   Element.show('mainLink');
   document.getElementById('mainLink').onclick = function() { window.location.href=imageArray[activeImage][2]; return false; }

#
#-----[ FIND ]------------------------------------------
#
   // if not last image in set, display next image button
   if(activeImage != (imageArray.length - 1)){
      Element.show('nextLink');
      document.getElementById('nextLink').onclick = function() {
         myLightbox.changeImage(activeImage + 1); return false;
      }
   }

#
#-----[ AFTER, ADD ]------------------------------------------
#
   // When there's only one button (first or last)
   if(activeImage == 0 || activeImage == (imageArray.length - 1)) {
      document.getElementById('mainLink').style.width = "80%";
   } else {
      document.getElementById('mainLink').style.width = "60%";
   }

#
#-----[ OPEN ]------------------------------------------
#
styles/prosilver/template/overall_header.html

#
#-----[ FIND ]------------------------------------------
#

{GALLERY2_CSS}
<link rel="stylesheet" type="text/css" href="{T_THEME_PATH}/g2embed_overrides.css" />
{GALLERY2_JAVASCRIPT}

#
#-----[ AFTER, ADD ]------------------------------------------
#
<script type="text/javascript">
// <![CDATA[
var fileLoadingImage = "{ROOT_PATH}g2image/images/loading.gif";
var fileBottomNavCloseImage = "{ROOT_PATH}g2image/images/closelabel.gif";
// ]]>
</script>
<script type="text/javascript" src="{ROOT_PATH}g2image/jscripts/prototype.js"></script>
<script type="text/javascript" src="{ROOT_PATH}g2image/jscripts/scriptaculous.js?load=effects"></script>
&ltscript type="text/javascript" src="{ROOT_PATH}g2image/jscripts/lightbox.js">&lt/script>
<link rel="stylesheet" href="{ROOT_PATH}g2image/css/lightbox.css" type="text/css" media="screen" />

#
#-----[ OPEN ]------------------------------------------
#
gallery2/themes/matrix/theme.inc

#
#-----[ FIND ]------------------------------------------
#
/* Add in our extra stuff */
$theme =& $template->getVariableByReference('theme');
$theme['columnWidthPct'] = floor(100 / $params['columns']);

#
#-----[ AFTER, ADD ]------------------------------------------
#
/* Add resizedId to child values, required for Lightbox JS */
if ( $theme['children'] ){
   foreach ( $theme['children'] as $key => $value ){
      if ( $value['id'] ){
         list($ret,$resizedIds) = GalleryCoreApi::fetchResizesByItemIds(array($value['id']));
         if ($ret)
            return $ret;
      }
      $theme['children'][$key]['resizedId'] = $value['id'];
      if ( $resizedIds ){
         /* Find the best resized option
         *
         * Use width/height max=800; */
         $lboxMaxEdge = 800;
         $resizedEdge = NULL;
         $resizedId = NULL;
         foreach ( $resizedIds[$value['id']] as $resize ){
            $width = $resize->getWidth();
            $height = $resize->getHeight();
            $edge = ( $width > $height )? $width : $height;
            if ( $edge <= $lboxMaxEdge ){
               if ( !isset($resizedEdge) ){
                  $resizedId = $resize->getId();
                  $resizedEdge = $edge;
               } else if ( $edge > $resizedEdge ){
                  $resizedId = $resize->getId();
                  $resizedEdge = $edge;
               }
            }
         }
         $theme['children'][$key]['resizedId'] = $resizedId;
      }
   }
}
/* end add resizedId to child values, required for Lightbox JS */

#
#-----[ OPEN ]------------------------------------------
#
gallery2/themes/matrix/templates/local/album.tpl

#
#-----[ FIND ]------------------------------------------
#
   <div>
      {if isset($theme.params.$frameType) && isset($child.thumbnail)}
      {g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType
            width=$child.thumbnail.width height=$child.thumbnail.height}
      <a href="{$linkUrl}">
      {g->image id="%ID%" item=$child image=$child.thumbnail
      class="%CLASS% giThumbnail"}
      </a>
      {/g->container}
      {elseif isset($child.thumbnail)}
      <a href="{$linkUrl}">
      {g->image item=$child image=$child.thumbnail class="giThumbnail"}
      </a>
      {else}
      <a href="{$linkUrl}" class="giMissingThumbnail">
      {g->text text="no thumbnail"}
      </a>
      {/if}
   </div>

#
#-----[ REPLACE WITH ]------------------------------------------
#
   <div>
      {if isset($theme.params.$frameType) && isset($child.thumbnail)}
         {g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType
            width=$child.thumbnail.width height=$child.thumbnail.height}
         {if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem' || $child.entityType == 'GalleryMovieItem')}
            <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >
            {g->image id="%ID%" item=$child image=$child.thumbnail
               class="%CLASS% giThumbnail"}
         {else}
            <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
               imgLink="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}"
               title="{$child.title|markup}<br /><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">View Item Details</a>"
               pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
               rel="lightbox[photos]" >
            {g->image id="%ID%" item=$child image=$child.thumbnail
               class="%CLASS% giThumbnail"}
            <br />
            <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">View Item Details
         {/if}
         </a>
         {/g->container}
         {elseif isset($child.thumbnail)}
            {if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem' || $child.entityType == 'GalleryMovieItem')}
               <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" >
               {g->image item=$child image=$child.thumbnail class="giThumbnail"}
            {else}
               <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
                  imgLink="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$child.resizedId`"}"
                  title="{$child.title|markup}<br /><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">View Item Details</a>"
                  pageLink="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
                  rel="lightbox[photos]" >
               {g->image item=$child image=$child.thumbnail class="giThumbnail"}
               <br />
               <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">View Item Details
            {/if}
         </a>
         {else}
            <a href="{$linkUrl}" class="giMissingThumbnail">
               {g->text text="no thumbnail"}
            </a>
      {/if}
   </div>

Edit: Replace the < with <

The forum won't let me post script tags (even inside [code] blocks!).

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

Wow! That's some impressive work!

I noticed when I visited your site a while back when you were having some issue I don't remember, that you had the lightbox effect working on your gallery pages. Really cool!

You mind if I add this as an optional feature of the integration?

denney · Novice Joined: Dec 24, 2007 Posts: 28

Go ahead mate. I have no problem with you adding it.

Yeah, I was having issues a while ago but that was because I had 2 copies of Lightbox installed (one from the integration and one from the gallery iteself).

Once I figured out how to use the integration's Lightbox, it was all fixed.

My website will be back online in around 2 days time (Sunday night) if you're interested. It will have this current implementation installed. I'll let you know here when it is (also works as a "demo" for people interested). Razz

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

Awesome! I'll make this an optional mod in the next version and credit you as author.

Post up a link to your site when it's back online, I'm sure people would like to see it in action! Smile

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

I just tried the first mod posted above and got it to work, but had to change one line to eliminate some quotation marks from inside the title attribute, else it would not render properly...

Above:

Code: › <a href="{URL}" imgLink="{LBURL}" rel="lightbox[g2image]" title="<a href="{URL}">View Item Details</a>" class="postlink">{DESCRIPTION}</a>

Mine:

Code: › <a href="{URL}" imgLink="{LBURL}" rel="lightbox[g2image]" title="<a href={URL}>View Item Details</a>" class="postlink">{DESCRIPTION}</a>

denney · Novice Joined: Dec 24, 2007 Posts: 28

Those quotation marks and < > brackets are actually the HTML entities. Seems this forum converts them.

The < > should be &lt ; and &rt ; respectfully.

The " should be &quot ;

Wink

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

ah, yeah, cool...

denney · Novice Joined: Dec 24, 2007 Posts: 28

OK, the site is now back online and anyone wanting to view these Lightbox modifications can view them by going to my gallery...

http://www.mantrasoftware.net

One thing, you need to wait for the page to load BEFORE clicking on an image, otherwise Lightbox won't load. This is a limitation of Lightbox and NOT a bug with my website! Razz

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

Quote: › OK, the site is now back online and anyone wanting to view these Lightbox modifications can view them by going to my gallery...

Nice!

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

Just wanted to say that I have each of the 'enhancement' mods working on two independent servers now and they both work fine. Just need to figure out how to word the enhancement mod instructions for one or the other or both since they both share some common code and one can modify the other...Beautiful work though!

Hmm...maybe I'll incorporate the first mod into the base integration package, since it basically just adds a link to the item in gallery and make the gallery->lightbox mod an option...that would simplify things, except that it modifies an existing lightbox file that I have no control over as far as future upgrades...hmm...

denney · Novice Joined: Dec 24, 2007 Posts: 28

Yeah, unfortunately there isn't a way around that. I looked at making it separate to begin with but you need to be able to provide 2 different URL's for images, not just one.

I like the idea though.

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

Quote: › I wasn't able to get the "View Item Details" text to work when it was in the language file so maybe you can have a shot at it.

Took a bit more of studying bbcode.php, but I was finally able to get that to work from the language files. In a joint effort I was also able to get the lightbox group attribute working from g2image as well due to a light being turned on in my head from denney's enhancements. I won't post the changes here for now, unless someone really needs the language fix, as they will be in the next release and it took a fair amount of changes to the integration code and denney's code and there is no easy way to post xml files here.

I'll post up a link to the new files soon, still waiting to see what happens with the phpbb mod submission. I half expect it will be denied, just because I've never submitted a mod to them before and I know they are quite strict about certain things. I don't believe there is anything wrong with the mod, but we'll see what they say...

denney · Novice Joined: Dec 24, 2007 Posts: 28

Nice work jettyrat. Looking forward to seeing the changes.

I've never had any luck submitting things to the moddb. Mainly due to their strict guidelines vs mine. They're not compatible! Razz

Hopefully my new round of mods will be approved when I submit them.

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

denney, check your pm...

Web Hosting India