WordPress.org

Ready to get started?Download WordPress

Forums

Lightbox gallery? (11 posts)

  1. Thomas Nolan
    Member
    Posted 2 years ago #

    Does anybody perhaps know if this is a custom code, or if I could use a plugin that works similarly to this one?

    The theme I am currently using (Dandelion) has Lightbox incorporated into it already, which is great. However I like the way that the viewer has the option of viewing the the image in Lightbox, or opening it to leave a comment, in this gallery Ive linked above.

    Any suggestions would be great, thanks.
    My site is here

  2. Thomas Nolan
    Member
    Posted 2 years ago #

    Anyone? No?

  3. Paal Joachim Romdahl
    Member
    Posted 2 years ago #

    Thomas what did you figure out?

    I happen to come across this thread, just a moment ago.

  4. Thomas Nolan
    Member
    Posted 2 years ago #

    I managed to kind of find out how it was done. Some sort of layer system. I managed to replicate it on single images. Too much work to do this on an entire gallery, and I couldnt figure out how to automate the process.

  5. Paal Joachim Romdahl
    Member
    Posted 2 years ago #

    There might be a Jquery plugin for that though.
    It is a stylish way of showing thumbnails.

  6. Thomas Nolan
    Member
    Posted 2 years ago #

    Really? Id be interested to see it, if you have a link. I really do think its a beautiful display system. :)

  7. Paal Joachim Romdahl
    Member
    Posted 2 years ago #

    Actually what I did was I right clicked in Chrome and brought up Inspect Element. With it you can look at the code that is used by mousing over the area, and also moving the cursor inside the elements area where the code is located. There I opened up (click the arrows) to find the correct section. Then I right clicked the first html tag for the section and copied the code.

  8. Thomas Nolan
    Member
    Posted 2 years ago #

    Thats actually very interesting, thanks :)
    I dont use Chrome at all, but I think I may give it a try.

  9. Paal Joachim Romdahl
    Member
    Posted 2 years ago #

    Firebug in Firefox is similar. I have not tested out Firebug in a while but it might be even better then Inspect element in Chrome.

  10. Thomas Nolan
    Member
    Posted 2 years ago #

    Just installed it. Its a pretty powerful little add on.
    Thanks for the tip... Im checking it out now.

  11. Paal Joachim Romdahl
    Member
    Posted 2 years ago #

    So from digging more into the code:

    First off they are using fancybox as their lightbox.
    and a Jquery to make some of the effects. See the html and then go into the Resources tab next to the elements tab you started at and notice the js file named et_ ..... right click it and select save. So here we can learn form:

    jQuery(document).ready(function() {
    	jQuery("a[class*=fancybox]").fancybox({
    		'overlayOpacity'	:	0.7,
    		'overlayColor'		:	'#000000',
    		'transitionIn'		: 'elastic',
    		'transitionOut'		: 'elastic',
    		'easingIn'      	: 'easeOutBack',
    		'easingOut'     	: 'easeInBack',
    		'speedIn' 			: '700',
    		'centerOnScroll'	: true

    There is of course more in the js file to look closer at. By using some time one can figure it out and then create a test.

Topic Closed

This topic has been closed to new replies.

About this Topic