lightbox 2 help

Events happening in the community are now at Drupal community events on www.drupal.org.
dougvann's picture

OK here's how it goes...
I have CCK+Views2 making a gallery.
I have individual images as thumbnails in the gallery-view.
When you select an image you are treated to the oh so cool if not ever popular Lightbox2 display of.... the node page in an iframe. The iframe contains a whole webpage crammed into the lightbox. I don't want the header region, left and right regions, or back-ground images in the rendering.
HOWEVER... If you look at the lightbox rendering AND clink on the picture AGAIN, you get just the image in the new lightbox. That's what I want for the 1st time you select the image.
In my fields selectors, I have image as "Lightbox2 iframe: original->node page" if i chose the other one "iframe image" I get a weird icon instead of my images? I know that original->node page is the culprit but I can not use the other option.

Any ideas?
- Doug Vann
- http://www.dougvann.com
- http://www.twitter.com/dougvann

Comments

weird icon?

mikegoodwin's picture

What is the weird icon?

-Mike Goodwin
Red Leaf Media
http://www.redleafmedia.com

Weird Icons are up. :-)

dougvann's picture

I have set the format to lightbox2 iframe
now when you go to the gallery view http://gpw.slingshotcommerce.com/node/29 it shows two weird images where the thumbnails should be
If you clink on either of the two images you are taken to a regular node-page
If you AGAIN click on that image then you get the nice tight lightbox of just the image.
I'm seriously thinking that I should just do a template file for that content type and be happy. but a better solution may exist
-dv

  • Doug Vann [Drupal Trainer, Consultant, Developer]
  • Synaptic Blue Inc. [President]
  • http://dougvann.com

missing file icon?

melban's picture

Any chance it shows those little icons if it can't verify the image file is where it should be?

image-x-gereic.png

dougvann's picture

The link to the image is http://gpw.slingshotcommerce.com/modules/acquia/filefield/icons/protocon...
So apparently it is a default image made available by the filefield module in the event that it can find an image. I don't know why one formatter can find it and another can not. That's weird.

  • Doug Vann [Drupal Trainer, Consultant, Developer]
  • Synaptic Blue Inc. [President]
  • http://dougvann.com

Did you get this figured out?

dudenhofer's picture

Hey Doug, did you get this figured out?
I think instead of using the node or iframe settings, you should be selecting in the Field of the view:

Content: Image Lightbox2: thumbnail->original

This means it will display the thumbnail and pop up the original in the lightbox. It doesn't look like you are referencing the thumbnail in your view. I get a "Page has moved" when I check your links so I can't see exactly what you're talking about.

Hopefully that helps.

http://dudenhofer.com
http://twitter.com/dudenhofer

The latest

dougvann's picture

I have a new gallery up at http://gpw.slingshotcommerce.com/customers/automotive
These four images are of the node-type "Gallery Image." Each gallery image node has 2 fields in it. One for thumbnail and one for the larger image. We could not use imagecache because the images are SUCH different sizes that a standard crop and rescale looked funny on many of them.
NOW
I can not get views to take the thumbnail image and have it link to a lightbox render of the larger image even those these are two field of the same node.
Interestingly enough... the thumbnails have the exact same file-name as the larger image except for the letter 'a' appended to the thumbnail file-name.

How do I get lightbox/views to show a separate image field [of the same node] other than the one that is being displayed and clicked on?
- dv

  • Doug Vann [Drupal Trainer, Consultant, Developer]
  • Synaptic Blue Inc. [President]
  • http://dougvann.com

can't see images

raystuart's picture

Hi Doug, I can't see the images, maybe a problem with permissions? Anyway, not sure if I can help with lightbox... it sounds like you would have to do some kind of transformation of the lightbox links to achieve what you are looking to do. Or, when you are outputting the nodes you could use fields and create the structure that you need... Display the thumbnail image (just as image, not with a link) and then wrap that in an a href with the target being the other image and the requisite lightbox stuff.

However, you might want to check this out instead - http://drupal.org/project/imagefield_crop - which helps you to manually crop the image on upload.

Best,
Ray

ha ha

dudenhofer's picture

I sent him that link last night on skype, but I hadn't used it yet so i couldn't say for sure if it would work for him

http://dudenhofer.com
http://twitter.com/dudenhofer

the right url helps!

dougvann's picture

http://gpw.slingshotcommerce.com/customers/automotive/images is the propper url.
here's what i did.
I am now having the thumbnail link to the page-node. In the DISPLAY FIELDS settings of the content type that I am using, I have the thumbnail image set to HIDDEN for the full node render. THUS when the thumbnail uses lightbox to load the node it only has the full image.
BUT... It had a header and some other stuff in it like a page view would have. SO I copied a page.tpl.php over from zen_classic and renamed it page-product_images.tpl.php BUT the new template page NEVER was used?
Then I had to go to the 1st line of my page.tpl.php and enter the following line:

<?php
if ($node->type == 'product_images') {include 'page-product_images.tpl.php';  return;  }
?>

This skips the page.tpl.php and redirects the theming engine over to the preferred template. HOW COOL?!
Now I'm in the process of stripping all the unneeded markup and renderings out of the new template file to make the image visible.
PROBLEM. I have UPTO 640x480 images and the lightbox is too small meaning that i get scroll bars on at least one if not two axis.
BOOOOOOOOOOOO
Now I need a way to make the lightbox bigger or better yet, dynamic to fit what ever size image come down the pike.
oh yah, and i still need to get image desc into the lightbox some how.
What a long, strange trip its been! Who's still with me? :-)
  • Doug Vann [Drupal Trainer, Consultant, Developer]
  • Synaptic Blue Inc. [President]
  • http://dougvann.com

Lightbox Settings

dudenhofer's picture

Aside from thinking you're making this way more complicated than it should be.... :)

I think all you have to do now - if the size of the lightbox display is all that is left for your ultimate result - try going to

Site Configuration>Lightbox2>HTML Content

and try editing the dimensions there. And if you're displaying the full page, shouldn't it naturally display the description? Unless that is something you removed in your custom .tpl.php file

I don't know of a way that you would allow you to make the iFrame dynamically change size, but if you ever figure out how to link to your original image, the lightbox can dynamically change for that setting.

I gotta agree on the level of difficulty

raystuart's picture

If this were Olympic diving, you'd be doing a quintuple pike, twisting, half-turn, swan dive... off the 10 foot platform. Yeah, I'm not sure what I just said either. ;)

I'd approach it a different way. Since you're using views, you can choose to "rewrite the output of this field" and you'll have access to all the fields that came before. Using that you could build the proper HTML including the thumbnail, etc. You would "exclude from display" the previous fields that don't need to be output.

But, I'd only do that if the cropping module didn't work out or if I didn't want to use it because it is in dev. I'd try to find a way to make the cropping work satisfactorily.

Sweet! the Gallery is LIVE!

dougvann's picture

Ray's Idea did it.
http://gpw.slingshotcommerce.com/customers/medical-life-sciences/images
I looked at the code that a regular lightbox spits out and I copied it into the text field that replaces the output of the regular field.
I swapped out the static file names with the replacement tokens and that was it!
I'll have to do a long recipe post on this some time. If you came to the HackFest Sat 6/20 I'll be happy to show it off!

Here's the code that replaces the thumbnail output with a lightbox rendering.

<div class="views-field-field-image-fid">
<span class="field-content">
<a href="[field_full_fid]" rel="lightbox[field_image1][&lt;br /&gt;[field_desc_value]&lt;br /&gt;]"><img style="padding-left: 10px; float: right;" alt="" src="[field_thumbnail_fid]" /></a></span>
  </div>
  • Doug Vann [Drupal Trainer, Consultant, Developer]
  • Synaptic Blue Inc. [President]
  • http://dougvann.com

Magician!

logfish's picture

Hi Doug -

Just wanted to thank you for your snippet of code there! I had a similar problem whereby the thumbnails just HAD to be custombuilt and cropping wasn't working in the correct ways - so I needed my thumbnails to be one custom image field in my node and the lightbox2 popup gallery to use another custom image field defined in the node (thumbnail and profile) -

In the views for my gallery I changed both fields to just display 'URL to file', with the larger image field higher in the list. Then for my thumbnail image field I put 'rewrite the output of this field' and butchered your code a wee bit to:

<a href='[field_larger_image]' rel='lightbox[field_larger_image]'><img style='padding-left: 10px; float: right;' src='[field_thumbnail_image]' /></a></span>

Anyway thanks again, I've spent almost all day working on this and noone else seems to be looking for similar solutions so hopefully my wee experience might aid someone else coming through later on. (I would've been happy with non-ideal cropping but photographers being photographers...)

I'm sure being able to use lightbox to link to different fields of a node will come in very handy!

Cheers!

Saoirse1916's picture

Thanks logfish, your explanation and code sealed it for me -- I was trying to do the exact same thing and had no luck until running across your post. Thanks again!

Problem Lightbox2 e View

renatoribeiro's picture

Good afternoon,
I have a problem with a view that has some pictures (you can see at the bottom), and we should open the lighbox2 by clicking the image and clicked next. And this is not happening as you can see in http://2.81.223.248/cmV2/porfolio

Someone can give me a help?

Chicago

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: