I was using lightbox2 in an AngularJS app and realized that it was pretty difficult to customize it.
The requirements were very simple,
The requirements were very simple,
- editing the album name/ picture description
- deleting album/picture
- different overlay than the usual title below/above the image
I made use of AngularUI modal since that was already used in my app. Besides, as they say, no point in rewriting stuff that's already there.
The usage is pretty simple,
<lightbox images="album"></lightbox>
where album is an array of image details. A sample image detail object would be
{src: "/path/to/img", header: "the data/info that should be displayed above the image", description: "the info to be displayed beside the image"}
The header and the description can also be HTML strings. The dimensions in tile view are 150px x 150px by default.
The directive can be customized/configured to handle various cases (inline editing using contenteditable, delete, change tile size, background, etc)
Thanks for posting this but how should I integrate it with an existing app? Where to put the gist files and how to declare the dependency?
ReplyDeleteThanks
Hi Enis,
DeleteIf you are using the gist as is, you would need to set it as a dependency for your app. For example,
var myApp = angular.module('MyApp', ['Components'])
after that, you only need to include the markup wherever required.
Where can I configure & display different album sets?
ReplyDeleteWhat do you mean by album sets? Did you mean displaying a lightbox for multiple albums or multiple collections of albums with different configurations?
DeleteIn both the cases, you could give a separate markup for each album/collection of albums (if they are to be placed in different parts of your page) or you could do so using ng-repeat.
Ok thanks, so the array of images is always described in the HTML markup images location.
DeleteCan you assist me with any dependencies I'm missing here?
http://plnkr.co/edit/3rkPMGQOchDAnLSyloZ6?p=preview
Sorry, made public here: http://plnkr.co/edit/CV4WkJ?p=preview
DeleteYou have commented out bootstrap css. This is required for the modal to show up correctly. If you don't wish to use bootstrap, you could just copy the styles related to modal.
DeleteHello Shiti..
ReplyDeleteI am displaying my dynamic content (content can be pdf,doc,image,mp4) like this
{{f.name}}
i want to display all these content in lightbox on click of {{f.name}}
thanks
Akash
oops my code got lost... :(
ReplyDeleteI am unable to understand what you are attempting to do. I also find issues with the dynamic templates on pasting code. I might be able to help if you can share the link of a gist with sample code.
ReplyDeleteSorry, for my above post... i put my code there but comment box is unable to interpret html here.
ReplyDeletecan you please go thru this link, i posted here my problem.
http://liferaytechnologies.blogspot.in/2014/05/problem.html
Thanks
Akash
Lightbox only supports displaying images. You will need to do some customization for displaying files of different formats as in your case.
ReplyDeleteohkay! but how facebook do the same! display image and mp4 formats in lightbox?
ReplyDeletee.x please go thru this link again
regrds
akash
Hi Shiti,
ReplyDeleteyou said "I was using lightbox2 in an AngularJS app ...", but how??
when I use <a href="my_image.png" rel="lightbox"></a> inside my AngularJS app it doesn't work. It just opens an image in a browser, but not in a lightbox modal window.. Could you share the solution - how to make libs to work together?
Alexander
The lightbox module requires AngularUI modal module. Have you included it?
DeleteNo, I didn't use that module. In fact, my problem was slightly different. Let me share this here, it may help someone.
DeleteI use Drupal 7 with Lightbox2 module integrated. This module utilizes a lightbox2 js library but also modifies it a lot (new features, different API, etc.).
And I tried to integrate AngularJS app to a Drupal page so that it takes advantage of Drupal's Lightbox2 module.
As far as Angular app is not fully initialized (DOM is not fully rendered) at the moment when Drupal adds lightbox libraries to the page, it leads to the fact that lightbox does not detect "rel" or any other attributes inside AngularJS app.
The way out is to launch lightbox init method once again after the DOM is fully built (e.g. inside AngularJS app), but in my case it breaks a lot of functionality.. Fortunately, I've found another way - to launch the other method that just displays a modal window on 'click' event. Here is my code for Drupals' Lightbox2:
<a onclick="Lightbox.start(this, false, false, false, false); return false;" href="IMAGE_TO_OPEN">...</a>
Be careful, the native lightbox2 seems to have the different API!
The blog was not about the lightbox2 module integrated with Drupal7. I think you misunderstood.
DeleteYes, I'm aware of this. You said that you used original lightbox2 (http://lokeshdhakar.com/projects/lightbox2/). My story is a bit different: I use a customized version of that lib shipping with Drupal. But both versions work the same way, as far as I know (detect rel="lightbox" , create hidden 'div's etc).
DeleteSo my code didn't detect rel="lightbox" attributes and I explained why..
This comment has been removed by a blog administrator.
ReplyDelete