Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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.
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.
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.
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.
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)
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.
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?
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.
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.
I have created a patch based on comment #16 except that it is changed so that the image that is sent to the colorbox popup is the original full sized image instead of the cropped image. You may need to adjust the "imagesrc = imagesrc.replace("/styles/galleriffic_slide/public", "");" command based on your site configuration.
added to the "jquery.galleriffic.js33.patch" file to do the following:
1.) Made the popup lightbox mobile responsive based on the browser size.
2.) Added navigation arrows within the popup lightbox along with the total number of images within the popup
This new patch is uploaded and called: magnific-popup-for-galleriffic.patch
Comments
Comment #1
acouch CreditAttribution: acouch commentedThanks 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.
Comment #2
vatavale CreditAttribution: vatavale commentedAny progress, Joshua?
Comment #3
Berliner-dupe CreditAttribution: Berliner-dupe commentedmain slide image open in lightbox2 is interesting for me too?
Have you news Joshua?
Comment #4
Jukebox CreditAttribution: Jukebox commentedI know this is an old thread but I managed to get it to work. Modify jquery.galleriffic.js, around line 632:
This should open up lightbox and prevent the slideshow from advancing.
Comment #5
Jukebox CreditAttribution: Jukebox commentedComment #6
acouch CreditAttribution: acouch commentedThanks. I updated the documentation to include this snippet.
Comment #8
fg86 CreditAttribution: fg86 commentedHi 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!
Comment #9
Jukebox CreditAttribution: Jukebox commentedI 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.Comment #10
Jukebox CreditAttribution: Jukebox commentedCreated 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.
Comment #11
acouch CreditAttribution: acouch commented@Jukebox thanks and congrats! will review as soon as i get a chance.
Comment #12
fg86 CreditAttribution: fg86 commentedThanks Jukebox and sorry for the delay. I'll give it a shot then I'll write you back.
Comment #13
fg86 CreditAttribution: fg86 commentedJust 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...
Comment #14
iancu35 CreditAttribution: iancu35 commented@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
Comment #15
wthomas CreditAttribution: wthomas commentedI 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)
Comment #16
hejeva CreditAttribution: hejeva commentedI 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..
Comment #17
EvanDonovan CreditAttribution: EvanDonovan commentedI'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).
Comment #18
EvanDonovan CreditAttribution: EvanDonovan commented@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.
Comment #19
EvanDonovan CreditAttribution: EvanDonovan commentedA co-worker of mine sorted out the issue we were having with our implementation. Hopefully, we can post our code shortly.
Comment #20
AdmiralSenn CreditAttribution: AdmiralSenn commentedI 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?
Comment #21
stoltoguzzi CreditAttribution: stoltoguzzi commented@EvanDonovan, any progress on this example rendering the fullsize images in colorbox an using d7
Would be very nice if you could share this?
Comment #22
kirilius CreditAttribution: kirilius commentedI am also very interested in this feature
Comment #23
kirilius CreditAttribution: kirilius commentedUp!
Comment #24
kirilius CreditAttribution: kirilius commentedUpdating the version as the same is also valid for D7
Comment #25
m.stentaI'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.
Comment #26
m.stentaUpdate: 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.
Comment #27
m.stentaThis should be "Needs Work".
Comment #28
LeeHle CreditAttribution: LeeHle commentedhey AdmiralSenn
Did you get any help with this? if so please could you share :)
Comment #29
mitchelljj CreditAttribution: mitchelljj commentedI have created a patch based on comment #16 except that it is changed so that the image that is sent to the colorbox popup is the original full sized image instead of the cropped image. You may need to adjust the "imagesrc = imagesrc.replace("/styles/galleriffic_slide/public", "");" command based on your site configuration.
Comment #30
mitchelljj CreditAttribution: mitchelljj commentedrevising the patch from #29
Comment #31
mitchelljj CreditAttribution: mitchelljj commentedrevising the patch from #29 again
Comment #32
mitchelljj CreditAttribution: mitchelljj commentedrevising the patch from #29 again
Comment #33
mitchelljj CreditAttribution: mitchelljj commentedrevising the patch from #29 again
Comment #34
mitchelljj CreditAttribution: mitchelljj commentedadded to the "jquery.galleriffic.js33.patch" file to do the following:
1.) Made the popup lightbox mobile responsive based on the browser size.
2.) Added navigation arrows within the popup lightbox along with the total number of images within the popup
This new patch is uploaded and called: magnific-popup-for-galleriffic.patch
Comment #35
mitchelljj CreditAttribution: mitchelljj commentedImproved formatting of Patch #34
Comment #36
someguy9 CreditAttribution: someguy9 commentedComment #37
someguy9 CreditAttribution: someguy9 commentedComment #38
mitchelljj CreditAttribution: mitchelljj commentedupdating the magnific-popup-for-galleriffic2-with-custom-modifications.patch file because applying the patch failed
Comment #39
mitchelljj CreditAttribution: mitchelljj commentedComment #40
someguy9 CreditAttribution: someguy9 commentedComment #41
someguy9 CreditAttribution: someguy9 commentedComment #42
someguy9 CreditAttribution: someguy9 commentedComment #43
mitchelljj CreditAttribution: mitchelljj commentedadded new patch file