jQuery custom lighbox
- Started
- Last post
- 30 Responses
- juhls0
It almost works! It keeps appending, which means I have to hide the original one, and then doesn't work with the arrow keys.
- acescence0
this is just the part i updated. not sure it really works
- juhls0
Is there a way to do it without consolidating it? Is that what you mentioned above with the var index = $('a[rel^=imageViewer]').index(t... ?
- acescence0
this is starting from line 48 in your original code...
maybe you want to just pass the numbers to your open function, as you may only have one image and you'll want to check that, but to give you an idea of what i was explaining above.
- acescence0
again, i would consolidate everything into one "open" function. get rid of the var open = anonymous function on line 59 and make that a separate function. pass all of the stuff you need to that function as arguments, as you have it all available to you right there. then when the image actually loads, show the div that contains the text you've already set back in your open function.
- acescence0
you've already got the total in the length of your imgLinks var
the position of the clicked one can be discovered thusly..
var index = $('a[rel^=imageViewer]').index(t...but it seems you're already tracking which it is in your code by setting an attribute on line 56...
link.attr({'itsPosition': index});
- index( this );acescence
- I tried various things and failed, hahajuhls
- Something like this?
They all come up as -1
http://pastebin.com/…juhls - I know I have to add somethingjuhls
- that's not going to work as you're off in some other function, "this" isn't referring to the clicked objectacescence
- except I have to make it say "image whatever of whatever"juhls
- right now I am placing it in the var loadImagejuhls
- juhls0
Any idea on how I could create an image index for this?
So that it says "Image ___ of ____"?
- alwaysnice0
i hate lightboxes... yuck
- acescence0
yeah, i guess it's a little weird the way it's organized. you've got a lot of anonymous functions doing all of the work in different places, where it could be centralized a bit. i would make a display function that controls everything, and then pass the necessary data to that from each of your links...
showImage( link.attr( 'href' ), link.attr( 'title' ), position, etc );
or you could pass that stuff to the open function on lines 52/59, and amend that to set caption, etc..
- sisu0
Any examples of fullscreen lighbox without a white frame and animating effects?
Something like this but not flash and without animation: http://www.meld.cc/#/contact/
- juhls0
This is what I have so far. Messy, I know.
http://pastebin.com/m4a04dbdStill no idea why the caption isn't working, and why "Image 1 of 14" isn't showing up.
- Chimp0
I've used lightbox on my site. Pretty easy to use, even for a print designer.
- spraycan0
cowbox is nice too
- Daithi0
Colorbox is really good.
- Stugoo0
had issues with most of the above lightboxes for reasons I cannot remeber,
colorbox is the one i use now.
http://colorpowered.com/colorbox…
highly recommend :)
- neverblink0
I've recently discovered shadowbox, it has a nice feature; it resizes the image on browser resize
- attentionspan0
http://www.nickstakenburg.com/pr…
havent tried it but seems like the neatest out there
- juhls0
Hmm...the previous and next buttons don't seem to work, and the right and left keypresses keep going back to the same image rather than moving on to the next one.
The "CC" prevents the lightbox from opening up when the page loads.
Thanks for the help though
- monNom0
move your previous an next functions out to named functions, rather than anonymous functions following prev.click, next.click
so next.click(function...
becomes
next.click(nextFunc...
and
function nextFunc () {...then call those new functions in your key script.
to add a caption, mimic the '.append' scripts that add the 'close', 'prev' and 'next' buttons to 'displayImage'.