Home » Forums » Ubercart » Support

Replacing Thickbox with Lightbox2

Submitted by teksestro on Tue, 06/03/2008 - 22:24
teksestro
Posts: 14
 Joined: 06/03/2008

Hi all!

I am totally new to Übercart. I have been playing with it for several days, and I think I will be able to use it in a current project. I would like, however, to replace the bundled-in "Thickbox" module with "Lightbox2". There are a few reasons why someone might prefer one to the other, and most of the arguments for and against both modules (as well as other alternatives) can be seen in the following node in drupal.org:

http://drupal.org/node/266126

In my test site I have disabled Thickbox, then installed and enabled JQuery Update, and Lightbox2. The first problem I experienced, was that unlike Thickbox, Lightbox2 does not seem work 'out-of-the-box' with Übercart. That is: I went back to my catalogue, and all my images were showing as before, but none of them were links - none of them triggered the Lightbox. Strange. I went to Content Management->Content Types->Product->Display Fields, and saw that the 'field_image_cache' field was set to 'hidden' for both Teaser and Full listings. So, I enabled (using a Lightbox2-type selection) the listing of the field under both.

Now, what is happening is, that I get an EXTRA image - the Lightbox image - at the beginning of both teaser and full node. Clicking on this image does trigger the Lightbox, as it should. But the whole thing looks very odd now, with the repeated images and all for every listing.

So, I thought that this would be something that perhaps should be fixed with 'Contemplate', by specifying a new template for nodes. I installed 'Contemplate', and had a look at the current template for the teaser and body of the 'Product' content type. First of all, when clicking in the 'Template' tab of the Product content type, I get the following error:

While traversing node variables your recursion limit of 10 was hit 7 times

Then, looking at the current 'Teaser', I see:

<div class="field field-type-image field-field-image-cache">
  <h3 class="field-label">Image</h3>
  <div class="field-items">
    <?php foreach ((array)$node->field_image_cache as $item) { ?>
      <div class="field-item"><?php print $item['view'] ?></div>
    <?php } ?>
  </div>
</div>

Hmmm, that is not what I was expecting...

So, what should I be doing next? Has someone implemented Lightbox2 in place of Thickbox?

Any guidance would be greatly appreciated.
permalink #1 Wed, 06/04/2008 - 02:49
honewatson

Posts: 10
 Joined: 03/25/2008

I would look at creating an imagecache preset called 'thumbnails' and setting it to 90px resize width. Then additionally creating an imagecache preset called 'product' and set to a larger size... maybe 330px. Then create a new layout for your product node template for the product info. Something like this:

// first print title

<h2 class="entry-title"><a href="<?php print $node_url?>"><?php print $title?></a></h2>

// now print content body

<div id="contentbody">
<?php echo $node->content['body']['#value'] ?>
</div>

// now print first image at size 330px

<div id="mainimage"><img src="/files/imagecache/product/<?php echo $node->field_image_cache[0]['filepath']; ?>" alt="<?php echo $title; ?>" /></div>

// now print gallery

<div id="postgallery">
<?php foreach ($node->field_image_cache as $myimage): ?>
<a rel=lightbox" class="lightbox" href="/<?php echo $myimage['filepath']; ?>"><img src="/files/imagecache/thumbnails/<?php echo $myimage['filepath']; ?>" alt="<?php echo $myimage['alt']; ?>" /></a>
<?php endforeach; ?>
</div>

//now print product cart meta

<div id="cartmeta">
<?php echo $node->content['sell_price']['#value'] ?>
<?php echo $node->content['add_to_cart']['#value'] ?>
</div>

--

Ubercart Tag

permalink #2 Wed, 06/04/2008 - 03:25
teksestro
Posts: 14
 Joined: 06/03/2008

Thank you, honewatson! - but I'm a newbie, so let me see if I understood your advice correctly.

You seem to be saying, that instead of using the 'Contemplate' module, I should write a new template file for the product - is that correct? - and that template file goes into the current theme's directory, right?

Many thanks once again for all help.

permalink #3 Wed, 06/04/2008 - 09:02
Lyle

Posts: 2244
 Joined: 08/07/2007
AdministratoreLiTe!

The field_image_cache was hidden because Ubercart provides the second image that has the thickbox integration. You can turn off that image in the Product field settings page.

permalink #4 Wed, 06/04/2008 - 18:52
honewatson

Posts: 10
 Joined: 03/25/2008

Personally I'm not a fan of contemplate so that is why I prefer to just create a template in the theme folder.

You should be able to use the same code in contemplate.

--

Ubercart Tag

permalink #5 Wed, 06/04/2008 - 19:43
TR
Posts: 924
 Joined: 11/05/2007
Bug FinderFAQ ModeratorGetting busy with the Ubercode.

Writing a node-product.tpl.php from scratch will certainly do the trick, but that's a pretty big hammer to use for such a small nail Smiling The HTML for the product images is generated by theme_uc_product_image(). You can override this theme function (see the FAQs for details) to use Lightbox instead of Thickbox.

Thickbox is hardwired into Ubercart - if it's installed, it will be used, otherwise, nothing will be used. As long as you are working on this problem, it would be nice if you could generate a patch to Ubercart so that either Thickbox or Lightbox can be selected in the admin menu - this would involve a simple addition of two radio buttons to the admin form with the choice stored in a variable. Then uc_product.module could check the value of the variable rather than use the hardwired module_exists('thickbox') like it does now.

--

<tr>.

permalink #6 Sat, 07/05/2008 - 20:58
scottrigby

Posts: 51
 Joined: 10/08/2007
Getting busy with the Ubercode.

Hi TR,

TR wrote:
The HTML for the product images is generated by theme_uc_product_image(). You can override this theme function (see the FAQs for details) to use Lightbox instead of Thickbox.

I agree that this would be a good feature to be able to select between Lightbox and Thickbox – but in the meantime I want to do override the theme function to use Lightbox2 like you suggested (mainly because of the CSS errors from thickbox).

Is this the FAQ you referred to? http://www.ubercart.org/faq/617
If so, sounds like we put these functions in the theme's template.php file.

I'm just not sure about the code I'd use to display the product image with Lightbox2... any chance you could pass along a snippet? That would be immensely helpful!

Cheers–
Smiling Scott

permalink #7 Fri, 08/15/2008 - 00:01
TR
Posts: 924
 Joined: 11/05/2007
Bug FinderFAQ ModeratorGetting busy with the Ubercode.

In template.php, put the following code:

<?php
/**
* Format a product's images with imagecache and Lightbox2.
*
* @ingroup themeable
*/
function phptemplate_uc_product_image($images) {
  static $rel_count = 0;
  $lightbox_enabled = module_exists('lightbox2');
  $first = array_shift($images);
  $output = '<div class="product_image">';
  if ($lightbox_enabled) {
    $output .= '<a href="'. check_url(file_create_url($first['filepath'])) .'" title="'. $first['title'] .'" rel="lightbox[field_image_cache_'. $rel_count .']">';
  }
  $output .= theme('imagecache', 'product', $first['filepath'], $first['alt'], $first['title']);
  /* if (count($images)) {
    $output .= '<br />'. t('Click for more images.');
  } */
  if ($lightbox_enabled) {
    $output .= '</a>';
  }
  $output .= '<br />';
  foreach ($images as $thumbnail) {
    if ($lightbox_enabled) {
      $output .= '<a href="'. check_url(file_create_url($thumbnail['filepath'])) .'" title="'. $thumbnail['title'] .'" rel="lightbox[field_image_cache_'. $rel_count .']">';
    }
    $output .= theme('imagecache', 'uc_thumbnail', $thumbnail['filepath'], $thumbnail['alt'], $thumbnail['title']);
    if ($lightbox_enabled) {
      $output .= '</a>';
    }
  }
  $output .= '</div>';
  $rel_count++;
  return $output;
}
?>

--

<tr>.

permalink #8 Mon, 09/01/2008 - 07:55
himagarwal
Posts: 84
 Joined: 06/24/2008

Image on the product page shows up but when I click on this image just a circular rotating/loading status is displayed. I tried this on fresh installation in my localhost.

I get following error when I go to the product "edit" page

warning: getimagesize(imagecache/product/files/mbd-223.JPG) [function.getimagesize]: failed to open stream: No such file or directory in E:\xampp\htdocs\drupal\sites\all\modules\beta\imagecache\imagecache.module on line 208.
warning: filesize() [function.filesize]: stat failed for imagecache/product/files/mbd-223.JPG in E:\xampp\htdocs\drupal\sites\all\modules\beta\imagecache\imagecache.module on line 209.

Any solution for this, TR?

permalink #9 Mon, 09/01/2008 - 12:52
TR
Posts: 924
 Joined: 11/05/2007
Bug FinderFAQ ModeratorGetting busy with the Ubercode.

http://www.ubercart.org/search/apachesolr_search/getimagesize

--

<tr>.

permalink #10 Mon, 09/01/2008 - 14:04
himagarwal
Posts: 84
 Joined: 06/24/2008

Above code works perfectly with lightbox. The problem as you suggested was with imagecache v1.6. Thanks TR.

permalink #11 Wed, 09/24/2008 - 14:59
schlomo
Posts: 4
 Joined: 04/03/2008

worked for me, too.
that was the solution I was looking for - thanks a lot TR Smiling