Hello,

I would like to integrate a thumbnails list into lightbox2 for a better navigation for the user as a new feature. I've been working on this for a few days and here I've attached the patch since all my modifications affect to this module.

I'm not an expert in javascript and I'm pretty sure these patch will need some modifications. Please let me know your inputs, I really hope this is helpful for the module.

I also have attached some screenshots.

Cheers,

Comments

altrugon’s picture

StatusFileSize
new14.3 KB
new2.24 KB
new2.27 KB
new41.44 KB
new77.19 KB

Second try for the attachments:

Kakulash’s picture

It causes my lightbox to freeze up and show blank.

Anyone else get this?

If this patch worked, it'd make everything about Lightbox2 a billion times more awesome. Thanks for your work on this!

altrugon’s picture

I have downloaded a fresh copy of Lightbox2 module and applied the patches and it works for me.

I'm going to replicate the steps that I followed here, I hope this helps:

  1. Download and enable the following modules: Lightbox2, CCK, FileField, ImageField, Image API, Imagecache.
  2. Create 2 preset for Imagecache (full and thumbnail sizes):
    1. Go to /admin/build/imagecache/add
    2. Enter "lightbox-thumb" and click "Save Preset".
    3. Chose "Scale and Crop".
    4. Enter 80 in both field and press "Update Action".
    5. Go to /admin/build/imagecache/add
    6. Enter "lightbox-full" and click "Save Preset".
    7. Chose "Scale and Crop".
    8. Enter 500 for width and 450 for height, then press "Update Action".
  3. Create a new content type to put everything together:
    1. Go to /admin/content/types/add
    2. In "Name" field enter "Lightbox2 (extended)"
    3. In "Type" field enter "lightbox2_extended".
    4. In description field enter "Add a thumbnail list navigation to lightbox2 module".
    5. Click "Save content type".
  4. Add the image field to the new content type:
    1. Go to /admin/content/node-type/lightbox2-extended/fields
    2. Under "New Field": enter 'Image' as Label field, enter 'image' as Field name (a-z, 0-9, _) name, select 'File' for Type of data to store., select 'Image' for Form element to edit the data.
    3. Click 'Save'
    4. Under Global settings choose "Unlimited" for Number of Values:. In case you get lost this is in page /admin/content/node-type/lightbox2-extended/fields/field_image
    5. Click 'Save field settings'
  5. Go to /admin/content/node-type/lightbox2-extended/display and choose 'Lightbox2: lightbox-thumb->lightbox-full' for Full node and click 'Exclude' for Teaser.
  6. Click 'Save'.

By this point you should be able to create a new node type "Lightbox2 (extended)", add some images, and see how the Lightbox2 module displays the upload images.

Now the Extended part:

  1. In your terminal go to the Lightbox2 module root directory, ie: /sites/all/modules/lightbox2
  2. With your favorite text editor create a file named 'lightbox2_dir.patch' and add patch lightbox2_dir.patch, then save the file.
  3. Still in the module root directory run:
    patch < lightbox2_dir.patch
  4. Go to the 'css' directory (cd css)
  5. With your favorite text editor create a file named 'lightbox2_dir_css.patch' and add patch lightbox2_dir_css.patch, then save the file.
  6. Still in the css directory run:
    patch < lightbox2_dir_css.patch
  7. Go to the 'js' directory (cd ../js)
  8. With your favorite text editor create a file named 'lightbox2_dir_js.patch' and add patch lightbox2_dir_js.patch, then save the file.
  9. Still in the 'js' directory run:
    patch < lightbox2_dir_js.patch
  10. If everything went fine you should now flush your cache before we enable the thumbnail option.
  11. Go to '/admin/settings/lightbox2', you will now see a new checkbox under Lightbox2 lite fieldset.
  12. Check Use thumbnail list and save the form.
  13. Go to the node "Lightbox2 (extended)" that you previously created, refresh, open the lightbox and... "I really hope you can see the thumbnails".

Well, I guess this is all. As I said before I haven't go farther because I want to check with the developers if the changes that I've done so far are ok.

Cheers.

stella’s picture

Status: Needs review » Needs work
StatusFileSize
new48.84 KB

I like the idea, but not sure it's ready to be included in the module just yet. The main problem I have is that the thumbnail bar isn't rendered correctly. See attached screenshot.

In addition, I have the following less critical issues:

  • You haven't provided any css modifications for the RTL css files - keeping in mind that the scrollbar needs to scroll the other way :)
  • the jquery.ScrollTo.js file is 3rd party code. This means the file can't be committed to the drupal.org CVS repository. So you need to add instructions to the README file on where to download the file from and where to install it. In addition, you probably need to add checks to the code to ensure the file exists. I'd imagine you'd add a check to admin/reports/status and also disable the thumbnail list checkbox on the lb2 settings page if the file is not present.
  • coding style :)
Sinan Erdem’s picture

Subscribing

Geijutsuka’s picture

shrubscribing

My clients would like to see this type of functionality.

nvaken’s picture

Issue summary: View changes

Any progress on thumbnail preview list? This issue has seem to be stalled.