I've spent the last 3 hours trying to get the main slide image to open in lightbox but haven't had any luck.

First i tried changing;

.append('<span class="image-wrapper"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+image.alt+'"></a></span>')

to;

.append('<span class="image-wrapper"><a class="preview-image" rel="lightbox" href="'+image.src+'" title="'+image.alt+'"></a></span>')

but this had no effect. I then tried a range of other code snippets but the one that showed the most promise was; i changed;

.click(function(e) {
clickHandler(e, gallery, this);
});

to;

.click(function(e) {
Lightbox.start(this, false, false, false);
});

this loads lightbox at first but then open the image in the same window.

Is there a way to load up lightbox from a views galleriffic page or does the js code conflict? Ideally when the main slide image is clicked, it should load the full size/original image in lightbox and not the main slide image. Any help would be greatly appreciated.

Comments

Status:Active» Closed (won't fix)

Thanks for posting this. I have been able to get this working on a previous version of galleriffic but haven't tried it recently.

I'm marking this as "won't fix" since I'm not going to support this functionality.

However I'd encourage people to help and post solutions here if they find them.

Any progress, Joshua?

main slide image open in lightbox2 is interesting for me too?

Have you news Joshua?

Status:Fixed» Closed (won't fix)

I know this is an old thread but I managed to get it to work. Modify jquery.galleriffic.js, around line 632:

// Construct new hidden span for the image
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a href="'+imageData.image.src+'" class="lightbox-processed" rel="lightbox"></a></span>')
.find('span.current').css('opacity', '0');
newSlide.find('a')
.append(imageData.image)
.click(function(e) {
e.preventDefault();
Lightbox.start(this, false, false, false);
});

This should open up lightbox and prevent the slideshow from advancing.

Status:Closed (won't fix)» Fixed

Status:Closed (won't fix)» Fixed

Thanks. I updated the documentation to include this snippet.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Hi all, I would like to know if there is a way to integrate lightbox's prev and next buttons with galleriffic. I mean that when I enlarge a photograph with Jukebox's edit, I should be able to see prev and next buttons over the image.

Thanks!

I believe the previous and next buttons appear when you hover over the image.

EDIT: Normally, this would be true, but in calling Lightbox in this way, the navigation buttons have a "display: none;" css property applied. I have not looked into why this happens.

Version:6.x-1.0-rc3» 6.x-1.x-dev
Category:support» feature
Status:Closed (fixed)» Needs review
StatusFileSize
new1.05 KB

Created a patch for this issue (first patch ever, woohoo!).

Note: This patch does not correct the loading animations that may appear. A simple "display: none;" css on these animations is the quickest way to hide them.

@Jukebox thanks and congrats! will review as soon as i get a chance.

Thanks Jukebox and sorry for the delay. I'll give it a shot then I'll write you back.

Just tried to edit the CSS properties, but there's something wrong in the way the thumb calls the large image, I suppose. Prev and next buttons appear only for two images, seems that the large images are loaded only in the moment I call them... when I enlarge a single image, no prev and next buttons appear but when I enlarge two images then these buttons appear but only for the two images I enlarged... I would like to have a lightbox[group] including every single image of my gallery... but I don't know how can I make this happen...

@Jukebox I tried to use colorbox and drupal 7 version of views galleriffic

I replaced "lightbox" with "colorbox" word in jquery.galleriffic.js, using your lines codes (orginal line codes are similar in drupal 7 and drupal 6 versions).

For slide image, I set Formatter: colorbox.

It stoped the gallery function but clicking on the slide image, do nothing/don't open any colorbox pop-up.

any clue,
thks.

iancu

I have followed the instruction given for integrating Litebox2 with Views Galleriffic (it seems). When the main image is clicked, it does open the litebox, but only at the same size as the main image. The field "image", in views, has "litebox2 galleriffic ->original" but does not open the original (this image would easily fit to the screen).

Is there something I am missing? Your help is appreciated. (I am using Drupal 7)

I implemented this and found a few issues.

One I was opening up the same size image instead of bigger.
The line where imagesrc.replace is I replace with gallerific with another imagecache of my site. You would need to change this line to your site specific image cache preset.

Lightbox does work, but the load icon spun forever. I couldn't figure out how to stop that. So I switched Colorbox.

Hope it helps someone..

// Construct new hidden span for the image
var imagesrc = imageData.image.src;
imagesrc = imagesrc.replace("node-gallery-maingallerific", "Average-Image-size");
/* Lightbox2
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a href="'+imagesrc+'" class="lightbox-processed" rel="lightshow" ></a></span>')
.find('span.current').css('opacity', '0');
newSlide.find('a')
.append(imageData.image)
.click(function(e) {
e.preventDefault();
Lightbox.start(this, false, false, false);
});
*/
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a href="'+imagesrc+'?width=500&height=500"  class="colorbox" ></a></span>')
.find('span.current').css('opacity', '0');
newSlide.find('a')
.append(imageData.image)
.click(function(e) {
e.preventDefault();
$('a.colorbox').colorbox({width:817, height:500});
});

I'm working currently on code to get the image to open in Colorbox on Drupal 7. I'll share back the module once it's done, though it may not be the best approach since I thought I needed to implement a separate menu callback to get it to work (for rendering the full-size image).

@hejeva: I am working with the 7.x version of Views Galleriffic and the way that I was adding the Colorbox was creating conflicts with the core code that handles slide change events. The image was getting inserted into the DOM multiple times.

I was trying to do it in a separate JS though, rather than in the JS that actually builds the slide markup. Does it have to be added to that JS? (I didn't want to hack the module.)

If it does have to be added to the JS for the slide markup, where specifically does the code that you have added in here go?

Thanks.

A co-worker of mine sorted out the issue we were having with our implementation. Hopefully, we can post our code shortly.

I am having the same problems with Lightbox not allowing the larger images to be displayed and presenting the endless spinning logo.

At one point I had Lightbox triggering the correct sizes but I am completely unable to figure out how, and it only worked one time. Most likely the recent updates I performed broke it.

The logo issue did not appear in the Views preview screen, but the image resize problem does. I also had issues getting Colorbox to cooperate and Lightbox seems to do what I want better, so switching modules isn't really an option for me.

EvanDonovan, any update yet?

@EvanDonovan, any progress on this example rendering the fullsize images in colorbox an using d7

Would be very nice if you could share this?

I am also very interested in this feature

Up!

Version:6.x-1.x-dev» 7.x-1.x-dev

Updating the version as the same is also valid for D7

StatusFileSize
new2.03 KB

I'm starting to put together a patch for this. The previous attempts in this issue were helpful in understanding the possible approaches, but they did lack one big detail: they are loading the same slide image in the Lightbox window, rather than an enlargement. This makes sense because there is only one image URL available (the slide image), so the size is constrained by that.

The attached patch adds a new Views Galleriffic Row style option called "Lightbox URL field", which allows you to load up the URL of a larger image. Note that in most cases you will need the Image URL Formatter module (http://drupal.org/project/image_url_formatter) in order to get an Image field's file URL.

Additionally, I added a simple "click to enlarge" link under the gallery slide, which links to the new large image. This is just a temporary solution for providing simple "enlarge image" functionality to Views Galleriffic. I need this (today) for a project I'm working on. The attached patch is meant for use in a distribution (built with Drush Make), but also as a starting point for coming to a fully-working Lightbox2 solution.

The next steps to making this fully-Lightbox2-functional (in my mind):

1. Include this new image URL in the JavaScript.
2. Combine it with one of the approaches listed above to make it work with Lightbox2.
3. Hide the "click to enlarge" link (via CSS or JS perhaps), or make another option to determine if that should be displayed instead or along with the Lightbox2 functionality.

StatusFileSize
new3.39 KB

Update: the previous patch was missing part of the changes. Here is the full one.

NOTE: Please read the full comment in #25 above. This patch does not solve this issue. It is just a first step.

Status:Needs review» Needs work

This should be "Needs Work".

hey AdmiralSenn

Did you get any help with this? if so please could you share :)