PDA

View Full Version : :: Lightbox image viewer title problem



emanuelle
04-24-2011, 08:33 PM
1) Script Title: :: Lightbox image viewer 2.03a


2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem:
I would like the thumbnail image to have a different title(Alt) then the alt of its enlarged size (when opened in lightbox).
is that possible?

djr33
04-25-2011, 01:30 AM
Do you want the same title for every image, or do you need to specify a unique title for every image as a thumbnail?

emanuelle
04-25-2011, 07:35 AM
I would like the images to have a title and the thumbnail to have a different title

jscheuer1
04-25-2011, 08:55 AM
By title in the lightbox, do you mean the caption? It's controled by the title attribute of the link. If you want the thumbnail to have a different title, give it one, example:


<a href="somebig.jpg" rel="lightbox" title="Lightbox Title/Caption"><img
src="somethumb.jpg" alt="" title="Thumbnail Titile"></a>

emanuelle
04-25-2011, 10:11 AM
http://nihuta.co.il/test/nihuta/index.html

i have 2 problems here:
1. i want the close button to be on top/right. but doesnt work well
2. the light box jumps every time I move to the next image

any idea?

jscheuer1
04-25-2011, 03:14 PM
That link is currently not responding. The server is down or overloaded. I'll try again later.

In the meantime, check to make sure that there is a standards invoking DOCTYPE as the very first thing in the page's source code.

emanuelle
04-25-2011, 03:59 PM
ok its working now
looking forward to hear from you

jscheuer1
04-26-2011, 05:58 AM
Some background questions:


Of all the lightbox type scripts available, why are you using this (DD's v2.03a) particular one?


Where did you get that lightbox.css and the images it uses?


and some observations:


I think it may be one or more of those direction: rtl; styles that's messing up how the lightbox opens and how it switches from group item to group item. If so that can probably be fixed by switching back to ltr for most of the lightbox, and then doing rtl again for the actual text within the lightbox. Other elements within the lightbox may be positioned if need be.


It's probably that and/or the lightbox.css I was asking about that's responsible. I'm thinking that, if you got the lightbox.css/helper images from another lightbox type script, you might be better off using it because the way it opens those styles might be smoother.


In any case, the lightbox.js version being used is out of date

emanuelle
04-26-2011, 07:02 AM
thank you
where can I find an updated lighbox.js?

jscheuer1
04-26-2011, 02:50 PM
Another thing that occurred to me is the animation. Set it to false as shown (around line #70 in lightbox.js):


// -----------------------------------------------------------------------------------

//
// Configuration
//
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

var animate = false; // toggles resizing animations
var resizeSpeed = 7; // controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 0; //if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------


That may fix the jumpiness regardless of the cause.

I did try turning off direction: rtl; for the entire page, that didn't seem to help. But it's one thing to do that after the page is initialized, and another to rewrite the page without it. Doing either would only be an experiment to see what the cause is. But what I did tends to indicate that rtl might not be the problem. If you removed all direction: rtl; styles temporarily and that fixed it or didn't fix it, that would answer that question definitively. Something you should try with that is getting rid of all align="right" attributes and all text-align: right; styles. The default is left and Lightbox might be depending upon that for smoothness. You should try eliminating all of those and all direction styles together, just as an experiment. If that fixes it, we could perhaps bring them back, and work around the problem(s) they cause the lightbox.

But try just turning off the animations first. That might work.


To answer your question though, there are so many lightbox type scripts. I currently like:


ColorBox (http://colorpowered.com/colorbox/)
FancyBox (http://fancybox.net/) (its css is closest to what you're going for, so might be a good choice if its the lightbox.css that's throwing things off)


The original Lightbox is up to version 2.05 now:

http://www.huddletogether.com/projects/lightbox2/

You can Google 'lightbox' and 'lightbox clones' to find others.

emanuelle
04-27-2011, 07:57 AM
thank you
does the Fancybox also has a group image function?
I cant see it and this is what I need

jscheuer1
04-28-2011, 02:45 AM
Yes. The third group of images on the fancybox.net home page uses this group function.

To get it to work, you give each link in a group the same rel attribute. See the bottom of the How to Use page:

http://fancybox.net/howto

emanuelle
04-28-2011, 07:21 AM
thank you!
now if i decide to use dynamic drive lightbox is there a way to locate the lightbox always at the top of the screen. I want it to be always 50px from the top and not depending from where I was on the page.
something like margin-top:50px
where can i fix this?

jscheuer1
04-29-2011, 02:58 AM
I'm confused. You can't locate the lightbox in relation to the user's screen. It has to be somewhere inside the same window as the page because it really is on the page. It's not a separate window. It just sort of looks like one.

But then you might mean that, always 50px from the inner top of the window. Or you might mean 50px from the top of the page, though that would mean, given a long page, that you might not see it sometimes unless you scrolled back up to it.

So let's go with 50px from the inner top of the window. But that's not so different from what it does now. In the lightbox.css file, change:


#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

to:


#lightbox{
position: fixed!important;
top: 50px!important;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}