By j0k3z on

On my custom node type I added imagefield. I used imagecache to display these images as thumbnails on the node. Then I installed thickbox so that I could display the full size image in a popup. That works great. The only problem is that Im not getting the "Next" and "Prev" links to the other node images on the thickbox popup. Im pretty sure its because Im using a loop and the way the code is written is telling Drupal to make a new thickbox around each image.

Here is my current code

<div class="field-items"><center>
    <?php foreach ((array)$field_image as $item) { ?>
      <span style="padding:5px;"><a class="thickbox" href="/<?php print $item['filepath'] ?>"><img src="/files/imagecache/thumb/<?php print $item['filepath'] ?>"></a></span>
    <?php } ?>
</center>
  </div>

How can I modify my code to get the next and prev links on the code popup?

⋅ Categories: Drupal 5.x

Comments

Anonymous’s picture

Anonymous (not verified) commented

The second part of the tutorial at http://drupal.org/node/144725 explains how to add a custom pager to the popped up image.

Go into administer 'Custom pagers' (admin/build/custom_pagers). Click 'Add a new custom pager'. Most of the settings will be obvious, but these are two key ones:

Node Type = Image (or again whatever you called you CCK image content type)

In the "Use a view" section, pick the name of your gallery view (created in 5 above).

Now go back to your gallery [yourdomain] /?q=gallery and click one of the title links on the gallery images to go to an image node and you should see pagers on top or bottom (or both) of your image, depending on the settings you chose in your custom pager.

Rob Safuto
Social Media Services
http://www.awakenedvoice.com

melon’s picture

melon commented

According to the ThickBox Homepage you will have to give a rel element to each <a> tag you want in a gallery of images. So the crucial part of the code would be something like:

<span style="padding:5px;"><a rel="galleryid" class="thickbox" href="/<?php print $item['filepath'] ?>"><img src="/files/imagecache/thumb/<?php print $item['filepath'] ?>"></a></span>

j0k3z’s picture

j0k3z commented

Bingo!

Thanks a lot for the help. I just added rel="gallery" and everything is working perfectly.

jiv_e_old’s picture

jiv_e_old commented

Maybe somebody has this problem after integrating image gallery and views.

Good tutorial about using views with your image gallery:
http://drupalworx.com/node/80

You can fix this problem by adding a custom feature to the Thickbox module like this. Edit the following file: .../modules/thickbox/thickbox_auto.js.

Put the following code under this comment:
// 2. Group the images in specific contexts,

// find image view categories
// This is for next and prev links to work with gallery_view
$(".view-gallery-view .item-list ul").each(function(i) {
var group = "gallery-group" + i;
TB_drupal_rewrite(this, group);
});

This works if your view is called "gallery_view" like in the tutorial I mentioned.

franknzz’s picture

franknzz commented

SOOO CCK with Views done. I dont understand how to access or hack the Rel attribute so that they all MATCH!

Can someone please help? This is bugging the snot out of me. I have basically created a custom image content type then created a view named gallery_view that is displayed on a page on the menu. I am using THICKBOX for the Thumb and display image. What js file do I need to modify so that I can get all of the rel tags to have the same value. I am sure there are many ways but how can I access that doggone rel tag.

FRUSTRATED!!!

But i still <3 Drupal

THANKS FOR THE HELP!!!!!
Frank

mitchellecohen’s picture

mitchellecohen commented

I updated modules and the previous and next (2nd line) in the lightbox didn't appear. I tried many things and then came across this post:
"if next previous navigation of the photo gallery is not working go to admin->site configuration ->thickbox select “per page gallery” under image field options (cck) where “image field” is the cck field created for the content type image."
That worked.

cabplan’s picture

cabplan commented

Ok I have tried the things listed above but the next and prev link are still not showing up when thickbox is activated. I am using the general "image" content type and "image-galleries" view, I do not have a custom content type because it seems that this is working good with FUpload. Does anyone know why these links are not showing up, here is the code from my updated JS file:

$(".view-image-gallery-view .item-list ul").each(function(i) {
var group = "gallery-g" + i;
TB_drupal_rewrite(this, group);
});

I even tried changing the Thickbox settings but that did absolutely nothing. I also tried the Custom Pager module but that did not do anything either. Not sure how to use the rel property. I tried to edit the "image_gallery" View for the Image field but there is no option for "Thickbox: Thumbnail" it just the regular Original, Thumbnail, and Preview so not sure why Thickbox option is not appearing there. PLEASE HELP!!!

Ok to even add more of a twist to this issue, so I was originally working on Firefox and those prev and next links do not show up for Thickbox but I then started testing in IE8 and IE9 and those links do show up in Thickbox, I then tested Safari and Chrome they DO NOT show up for either. So not sure what is going on but it is based on Browser if those links show up, does anyone know why that is?

Here is a link you can go to, to test yourself: http://innovativeedgemedia.com/image-galleries/fashion, if you use IE and click on one of the images to pull up Thickbox you will see the prev and next links on the bottom but if you use any other browser it does not show up.