Add thick/lightbox, or some other sparkle, [#342963]

Hey guys,

I found a solution to this for Drupal 5, some nice code which enabled lightbox, but it doesn't work with Drupal 6 & I'm not clever enough to to update it. This is the first gallery module I could actually get working nicely & would love it to look that bit nicer. Thanks for the the grand module, it's been a lifesaver!

Cheers,

Nick,

Comment	File	Size	Author
#8	nodeimages_lightbox_error_scr.jpg	33.46 KB	cyc

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

executex CreditAttribution: executex commented 12 December 2008 at 07:33

That's a good idea. Btw how far is the development for the 6.X?

Comment #2

GiorgosK

Chios, Greece 🇬🇷

CreditAttribution: GiorgosK commented 12 February 2009 at 21:41

Category:

support

» feature

Here is how to do it but I don't know how to create patches

Change this code

    if ($format == 'thumbs') {

      $output .= '<a href="javascript:void(0);" title="'.$description.'" onclick="window.open(\''.
        file_create_url($image->filepath).'\', \'\', \'height='.$height.',width='.$width.'\');">'.$thumb.'</a> ';
    }
    else {
      $output .= $fullsize.' ';
    }
    if ($count>0 && ++$i >= $count) break;
  }

to this

    if ($format == 'thumbs') {

    //begin addition
	  if(module_exists("thickbox")){
		$path = drupal_get_path('module', 'thickbox');
		drupal_add_css($path .'/thickbox.css');
		drupal_add_js($path .'/thickbox.js');
		 $class = 'class="thickbox"';
        $output .= '<a '.$class.' href='.file_create_url($image->filepath).' title="'.$description.'">'.$thumb.'</a> ';

	  }else
   //end addition
   
   $output .= '<a href="javascript:void(0);" title="'.$description.'" onclick="window.open(\''.
        file_create_url($image->filepath).'\', \'\', \'height='.$height.',width='.$width.'\');">'.$thumb.'</a> ';
    }
    else {
      $output .= $fullsize.' ';
    }
    if ($count>0 && ++$i >= $count) break;
  }

install and enable thickbox and any NEW images you create will have thickbox behaviour

or just include next function into your template.php (in your active theme folder) and clean cache

function phptemplate_node_images_view($node, $teaser, $page, $block = FALSE, $count = NULL, $format = NULL) {
  if (arg(2) == 'image_gallery' || empty($node->node_images)) return;

  $output = '';
  $i = 0;

  // set maximum number of images for teaser/body
  $view = ($teaser ? 'teaser' : 'body');
  if (!$count) {
    $count = variable_get('node_images_'.$view.'_images_'.$node->type, 2);
  }
  if (isset($count) && $count == '0') return;

  // set image format
  if (!$format) {
    $format = variable_get('node_images_'.$view.'_format_'.$node->type, 'thumbs');
  }

  foreach((array)$node->node_images as $id => $image) {
    $description = check_plain($image->description);
    $pattern = '<img src="%path" alt="%description" />';
    $thumb = strtr($pattern, array('%path'=>file_create_url($image->thumbpath), '%description'=>$description));
    $fullsize = strtr($pattern, array('%path'=>file_create_url($image->filepath), '%description'=>$description));

    if ($info = @getimagesize($image->filepath)) {
      $width = $info[0] + 36;
      $height = $info[1] + 36;
    }
    else {
      $width = 420;
      $height = 315;
    }

    if ($format == 'thumbs') {
	  if(module_exists("thickbox")){
		$path = drupal_get_path('module', 'thickbox');
		drupal_add_css($path .'/thickbox.css');
		drupal_add_js($path .'/thickbox.js');
		 $class = 'class="thickbox"';
        $output .= '<a '.$class.' href='.file_create_url($image->filepath).' title="'.$description.'">'.$thumb.'</a> ';

	  }else

      $output .= '<a href="javascript:void(0);" title="'.$description.'" onclick="window.open(\''.
        file_create_url($image->filepath).'\', \'\', \'height='.$height.',width='.$width.'\');">'.$thumb.'</a> ';
    }
    else {
      $output .= $fullsize.' ';
    }
    if ($count>0 && ++$i >= $count) break;
  }

  if ($block && $count < count($node->node_images)) {
    $output .= '<div class="node_images_block_link">'.l(t('View all images'), 'node/'.$node->nid.'/image_gallery').'</div>';
  }

  return $output;
}

NOTE: This implementation works ONLY for images that are presented as thumbnails

Comment #3

cincy_kid CreditAttribution: cincy_kid commented 14 February 2009 at 14:26

Thanks Giorgosk!

This fixes one bug for me. Now instead of clicking a thumbnail and getting 3 of 3 (when there's only 2 images), it just shows the thumbnail that I cliked on with no next and previous (which is better than before but would be great to have the correct version of next and previous).

But even if it couldn't accomplish that, what would REALLY be great is what the OP posted about the gallery. When I click on the image gallery link, I would love it to open in thickbox and work properly. I have tried using some of the code posted for the 5.x fixes but no luck.

Anyone want to tackle this one and put the finishing touches on this great module!

Comment #4

GiorgosK

Chios, Greece 🇬🇷

CreditAttribution: GiorgosK commented 17 February 2009 at 08:51

If you only problem is making all the images as part of one gallery (image 1 of n)
then all you need is rel="gallery-n"

    //begin addition
      if(module_exists("thickbox")){
        $path = drupal_get_path('module', 'thickbox');
        drupal_add_css($path .'/thickbox.css');
        drupal_add_js($path .'/thickbox.js');
         $class = 'class="thickbox"';
         $rel= ' rel="gallery" ';
        $output .= '<a '.$class.$rel.' href='.file_create_url($image->filepath).' title="'.$description.'">'.$thumb.'</a> ';

      }else
   //end addition

I have not tested this but it should work
I did not understand the other part of you request ...

Comment #5

cincy_kid CreditAttribution: cincy_kid commented 17 February 2009 at 23:37

Hello Giorgosk and thank you again!

Your snippet allows my thumb images to have 1 of n with proper next and previous buttons, thats great!

The second part of my request was about the link that says: "View Photo Gallery". Currently if I click the link it takes me to a new page like www.mysite.com/node/112/image_gallery which is part of node_images. I was hoping if I click the link it will open up the entire gallery in Thickbox instead of taking me to a generic node_images gallery page.

Does that make sense?

Thanks again!

Comment #6

cincy_kid CreditAttribution: cincy_kid commented 21 February 2009 at 14:43

Still been trying to figure this one out.

I have been trying to modify/use some code that was posted back in 2007 for 5.x


function node_images_gallery_thickbox($node) {
  if (empty($node->node_images)) {
    drupal_set_message(t('No images uploaded for this content.'));
    if (user_access('create node images') && node_access('update', $node)) {
      $output = t('Click <a href="!url">here</a> to upload new images.', array('!url' =>   url('node/'.$node->nid.'/images')));
    }
    return '<p>'.$output.'</p>';
  }
    $node->node_images = (count($node->node_images) > 1) ? array_slice($node->node_images, 1) : array();
  foreach ($node->node_images as $id=>$image) {
    $output .= '<a href="'.file_create_url($image->filepath).'" class="thickbox" rel="'.$node->title.'" title="'.$image->description.'"></a>';
  }
  return '<div id="thickbox_image_gallery" style="display:none;">'.$output.'</div>';
}

and he even posts a patch for the module but I was hoping to use some solution for 6.x and just use my trmplate.php file instead of hacking the module.

That thread is here: http://drupal.org/node/118040

Anyone else having any luck opening the image gallery in thickbox?

Comment #7

mgearr CreditAttribution: mgearr commented 17 April 2009 at 12:50

GiorgosK, thank you! I took your code as the source and made the simple LightBox gallery from it. Here what I've got finally. Not yet finally maybe, but it works :)

P.S. Of course it didn't work in IE, so here's the more consistent solution. It tested in Firefox 3.0.5, Opera 9.64, IE 6 and Chrome 1.0.154.48. Chrome slightly distorts the page, but it's acceptable and I have no will to solve this issue.

So,

// Lightbox2 show of Node Images
function phptemplate_node_images_view($node, $teaser, $page, $block = FALSE, $count = NULL, $format = NULL) {
  if (arg(2) == 'image_gallery' || empty($node->node_images)) return;

  $output = '';
  $i = 0;

  // set maximum number of images for teaser/body
  $view = ($teaser ? 'teaser' : 'body');
  if (!$count) {
    $count = variable_get('node_images_'.$view.'_images_'.$node->type, 2);
  }
  if (isset($count) && $count == '0') return;

  // set image format
  if (!$format) {
    $format = variable_get('node_images_'.$view.'_format_'.$node->type, 'thumbs');
  }

  if(module_exists("lightbox2")){
    $path = drupal_get_path('module', 'lightbox2');
    drupal_add_css($path .'/css/lightbox_alt.css');
    drupal_add_js($path . '/js/lightbox.js');
  }

  $output .= "\n<ul class=\"node_image_list\">";

  foreach((array)$node->node_images as $id => $image) {
    $description = check_plain($image->description);

    if ($info = @getimagesize($image->thumbpath)) {
      $thumbwidth = $info[0];
      $thumbheight = $info[1];
    }
    else {
      $thumbwidth = 100;
      $thumbheight = 150;
    }

    if ($info = @getimagesize($image->filepath)) {
      $width = $info[0] + 36;
      $height = $info[1] + 36;
    }
    else {
      $width = 420;
      $height = 315;
    }

    $image_url = file_create_url($image->filepath);
    $thumb = "<img src=\"" . file_create_url($image->thumbpath)
      . "\" alt=\"$description\" width=\"$thumbwidth\" height=\"$thumbheight\" />";
    $fullsize = "<img src=\"$image_url\" alt=\"$description\" width=\"$width\" height=\"$height\" />";

    if ($format == 'thumbs') {
      if(module_exists("lightbox2")){
        // stupid IE CSS tricks
        $output .= "\n"
          . "<li>\n"
          . "  <div>\n"
          . "    <a href=\"$image_url\" rel=\"lightbox[node_image][$description]\">\n"
          . "      <span class=\"node_image_thumb\">\n"
          . "        <span></span>\n"
          . "        $thumb\n"
          . "      </span>\n"
//          . "      <span class=\"caption\">$description</span>"
          . "    </a>\n"
          . "  </div>\n"
          . "</li>\n";
      }
      else
      {
        $output .= '<a href="javascript:void(0);" title="'.$description.'" onclick="window.open(\''.
          file_create_url($image->filepath).'\', \'\', \'height='.$height.',width='.$width.'\');">'.$thumb.'</a> ';
      }
    }
    else
    {
      $output .= $fullsize.' ';
    }
    if ($count > 0 && ++$i >= $count)
      break;
  }
  $output .= "</ul>";

  if ($block && $count < count($node->node_images)) {
    $output .= '<div class="node_images_block_link">'.l(t('View all images'), 'node/'.$node->nid.'/image_gallery').'</div>';
  }

  return $output;
}

I've simply put it at the end of template.php

and the relative CSS part. I'm the simple guy, so it was put into theme's template.css as simple:

/***************/
/* Node Images */ 
/***************/

/*
  Very stupid and inconsistent CSS vertucal alignment
  Taken from
  http://www.brunildo.org/test/img_center.html
  http://www.brunildo.org/test/ImgThumbIBL2b.html

  CSS dirty tricks are explained at
  http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/

  God bless IE developers...
*/

.node_image_list {
	/*border: 1px solid #999;*/
	padding: 0; /*15px 8px 0 8px;*/
	/* background-color: #f4f4f4;*/ 
	margin: 0;
}
.node_image_list li {
	display: -moz-inline-box;
	display: inline-block;
	/*\*/ vertical-align: top; /**/
	margin: 0; /* 0 7px 15px 7px;*/
	/*border: 1px solid #999;*/
	padding: 0;
}

.node_image_list li>div {
	/*\*/ display: table; /**/
/*	width: 199px;*/
}
.node_image_list a {
	display: block;
	text-decoration: none;
	color: #000;
	/*background-color: #ffe;*/
	cursor: pointer;
	padding: 3px;
}
/*\*/
.node_image_list>li .node_image_thumb {
	display: table-cell;
	vertical-align: middle;
/*	width: 199px;*/
	height: 150px;
}
/**/
.node_image_list li .node_image_thumb {
/*	background-image: url(g100c2.pl?g100c2.gif);*/
}
.node_image_list img {
	border: solid 1px #ddd;
	vertical-align: middle;
}
.node_image_list a:hover {
	background-color: #ffe;
}
/*\*//*/
* html .node_image_list li .node_image_thumb {
	display: block;
	font-size: 1px;
}
* html .node_image_list .node_image_thumb span {
	display: inline-block;
	vertical-align: middle;
	height: 199px;
	width: 1px;
}
/**/
.node_image_list .caption {
	display: block;
	padding: .3em 5px;
	font-size: .9em;
	line-height: 1.1;
	border-top: 1px solid #ccc;
	/*w\idth: 189px;*/  /* Moz, IE6 */
}
/* top ib e hover Op < 9.5 */
@media all and (min-width: 0px) {
	html:first-child .node_image_list a {
		display: inline-block;
		vertical-align: top;
	}
	html:first-child .node_image_list {
		border-collapse: collapse;
		display: inline-block; /* non deve avere margin */
	}
}

* html .node_image_list li {
	/*width: 201px;
	w\idth: 199px;*/
	display: inline;
}
* html .node_image_list {
	_height: 0;
	zoom: 1;
	display: inline;
}
* html .node_image_list li .node_image_thumb {
	display: block;
	/* evita hasLayout per background position */
	width: auto;
	height: auto;
}
* html .node_image_list .node_image_thumb span {
	vertical-align: middle;
	height: 150px;
	zoom: 1;
}

These all stupid CSS things took some hours out from my life :( I'd be glad to see any CSS corrections. The code itself looks fine at the first sight.

There are the things like /*\*//*/ and w\idth there in CSS. It's not misprint and it's ok. Welcome to IE world. it's explained at the links commented in the CSS title. Now we've got IE8 for more fun, so breathe steady and relax.