Lytebox 3.20 Modification
This page is a brief demonstration of additional functionalify of Lytebox by Markus F. Hay. I took version 3.20 as a base and have added things I want too see there. Take a look by clicking on links below:
Click to Close
Next features Demo
Test them on Slideshow
Single Slideshow
Google in Lyteframe
Yahoo in Lyteframe
New features:
- Show Hints
- Click to Close
- Easy Save
- Show Additional Infomation page
- Show image EXIF information
- Button to resize big images
- Save button (disabled in this demo)
- All text strings are in config area (easy localization)
- Frame tweeks
- and other minor code tweeks (you can now compress JS file with no further execution errors)
Download: lytebox_mod.zip
Sincerely,
Pavel Kuzub
Thanks for Jim Bertucci, for his initiative and his photos used in this demo.
Loading ...
November 8th, 2007 at 6:51 pm
Hi,
as I wrote on dolem.com:
I’ve tried the modification, and there seems to be a little bug while using Firefox:
You can see the cursor blinking. And when you click on next or prev, the cursor is blinking over the whole image…
This doesnt happen in IE7, only in Firefox
November 9th, 2007 at 2:53 am
Hello Oldmelon,
I am using Firefox too, but I don’t see any blinking cursor. How can I reproduce it?
November 9th, 2007 at 3:28 pm
I’ve found the reason, sorry. Press F7 on your FF (Caret Browsing)…..
November 23rd, 2007 at 5:41 am
thank you for this pavel. i’ve implemented it on my site (linked)
i was wondering if you could add the “on_dom_load” from here http://www.dolem.com/forum/showthread.php?tid=101&pid=647#pid647
i tried to add it as posted in that thread, but it broke the modal window, apparently your modification doesn’t work the same as the other modification.
(come to think of it, maybe i could just use the other modification) ideas?
November 23rd, 2007 at 11:23 am
Hello Michael,
Thanks for request. I’ve added addDOMLoadEvent function into my modification, you can download it here:
http://pavel.kuzub.com/lytebox/lytebox_dom_onload.js
November 23rd, 2007 at 9:08 pm
thanks for the quick reply and code
November 23rd, 2007 at 9:12 pm
No problem
November 23rd, 2007 at 9:46 pm
i’ve just tested this and it works but in msie 7 the rest of the page isn’t visible on my index page and in some cases it won’t allow the page to load at all giving me a connection error. it’s the only page on my site with flash on it, and i tried changing the flash parameter in the js with no luck. i’m leaving it up for you to see if you like. anyway i can change the scripts that load on my index page, but maybe some other’s won’t have that ability. i’m guessing it’s an incompatibility with swfobject.js
i have another request too. there is another mod of this out there that removes the scrollbar and makes the page so you can’t scroll. this solves the doctype issue with msie6. any chance i could get you to add this too
here’s a link to this guy’s mod
http://www.faszination-china.com/about_imaging_lytebox.php
i noticed his next and previous buttons are offset and i’m wondering if it’s part of the scrollbar offset maybe, anyway i’ll test it out for you if you like and we can discuss it off of your blog if you would like to keep the blog clean.
i’ll send you some $ too.
November 24th, 2007 at 8:33 pm
…. Currently PayPal accounts in Ukraine are only able to send payments. This recipient is not eligible to receive funds.
November 25th, 2007 at 3:30 am
Haha ) Thanks for letting me know, Michael. I’ll take a look what I can do with it. Regarding requests, give me some time, I’ll see what I can do later.
November 30th, 2007 at 7:05 am
This is absolutely amazing! I’ve been searching for something like this for a while, as the original Lightbox2 doesn’t quite meet my specific requirements.
Just a quick question in relation to the ‘Additional Info’ feature. Is there any way to make the additional info appear below the image (as in below where the current image comments lie) instead of in a new panel? I’ve tried to code this, but to no avail. Any help at all would be appreciated. Thanks again.
Jason
December 2nd, 2007 at 6:16 pm
Jason,
Take a look on another modification Michael posted above. That modification already has feature what you are talking about
December 3rd, 2007 at 10:46 pm
Hi,
I just tried this because you mention some Frame tweeks, but I am getting the same result launching from within a joomla wrapper from an Iframe page.
Any ideas?
http://www.mondoswank.com/index.php?option=com_wrapper&Itemid=37
clicking larger image should launch lytebox, which it does, just in the wrong place…
December 14th, 2007 at 4:57 am
Hi, I have used your mod on a site I am making. It works fine on all browsers, except on a Mac using firefox. When you open the image, the scrollbar from the web page actually overlaps the image.
www.coflash.com/turbo
Do you know how I can fix this?
December 14th, 2007 at 5:20 pm
2 Mondo
I havn’t worked with javascript iframe crossing, but I recall same questions were asked and already answered on dolem.com
I recommend you search there, you definately will find answers and code samples.
2 Phill
Unfortunately, I don’t have Mac to test. Perhaps that’s and issue of Firebox build for Mac, but I can only guess.
December 18th, 2007 at 10:59 am
Hi, I’ve searching for modification of Lytebox. But it doesn’t seem to have what I am lookign for. Can I add a text link next to the “x image of x” that able user to navigate “previous” & “next” image?
ie:
Image 1 of 5 NEXT>
-or-
Image 3 of 5
-or-
Image 5 of 5 <PREVIOUS
I really need to solve this and help are totally appreciate. Thank you in advance.
December 18th, 2007 at 4:18 pm
2 Sean
You can change “this.navType” to value 2, this will add such links, but will remove overlapping navigation.
Or do you want to add these links in addition to existing image overlapping navigation type? In this case another navType should be introduced (which will combine both nav types), various checks for navType in the code should be modified.
December 29th, 2007 at 1:12 am
Hi Pavel,
I’ve been looking at slimbox, lightbox, lytebox and the like for some time to add better popup image display to my website and have today come across your mods to lytebox which I like very much, especially the ability to compress the JS down to just 22kb which makes it the smallest image display tool I’ve found.
However, I do have a problem and some questions ….
I created a test page at http://www.giteinbrittany.com/test/index_lytebox_mod.html and found that although it all works perfectly in Firefox 2, with IE6 the Next/Prev buttons don’t appear correctly - they either flash on/off, appear at the top of the image, or don’t appear at all. Click on the top right hand image to see the problem.
Similarly clicking the big picture half way down the middle of the screen, the close button doesn’t appear and the font size looks too small.
Similar test pages for lytebox (test/lytebox.html), slimbox (test/slimbox.html) and litebox (test/litebox.html) don’t have the same display problem - argh!
A couple of questions:
- I’m assuming it’s possible to ensure the ‘Close’ button is shown all the time (as per lytebox)
- Would stripping out the EXIF and themes support neither of which I need make much difference to reducing the code size?
- On Dolem.com Lytebox has now advanced to 3.22, the bugs fixed appear to be minor, do you have any plans to incorporate them?
Thanks a lot for your help
Geoffrey
January 1st, 2008 at 6:00 pm
[…] habe mich für die modifizierte JavaScript Variante « Lytebox 3.20 Modification » von Pavel Kuzub […]
January 4th, 2008 at 10:02 pm
thanks for the code. your css and js files fixed my problem with scrollbars on firefox mac. thanks you mucho!
January 5th, 2008 at 2:10 am
2 Geoffrey Coan
Unfortunately, I no longer have any computer in hand with IE6. All have IE7 that works fine. I will take a look for IE6 at work after holidays.
>I’m assuming it’s possible to ensure the ‘Close’ button is shown all the time (as per lytebox)
Yes, you just have to set “this.showClose” to true in config area.
>Would stripping out the EXIF and themes support neither of which I need make much difference to reducing the code size?
It will definitely save some space, but you have to be careful not stripping something useful. Not sure if it worth your time.
>On Dolem.com Lytebox has now advanced to 3.22, the bugs fixed appear to be minor, do you have any plans to incorporate them?
Not at the moment, unfortunately. There are great modifications for 3.22 out there already. I am glad my features were used there, so I believe I’ve helped community. Maybe someday I will port these features to new version in addition to something new.
2 karlos
You are welcome
January 9th, 2008 at 11:59 pm
I’m using LyteFrame which works perfectly. But if that page has some links on it. When any of the links get clicked as of now it opens in the same blown up page of lytebox. I want that when the link is clicked it should close the lytebox and open the link in the window underneath it.
How can the above be achieved ?
January 10th, 2008 at 6:42 pm
I like use it, from flash button.
Please, how i do it?
January 12th, 2008 at 3:20 am
@ geoffrey coan
try this doctype
should fix it (but probably break some other stuff)
January 17th, 2008 at 5:18 am
i guess it won’t show the doctype here in a comment
February 2nd, 2008 at 4:37 pm
Thanks for sharing
March 4th, 2008 at 12:01 am
Hello
Great stufff… but i’m looking for something partly included in your mod… Auto resize all images as an option in config area… That will be great…
Do you have any idea? I’m asking because you have almost done it…
Greetings
March 4th, 2008 at 1:10 am
Uuupsss… i have just found it… Thanks
March 5th, 2008 at 1:38 am
Ok, so now i’m looking how to improve resize quality… Any idea?
March 5th, 2008 at 11:52 am
GramiYoe,
Client is downloading original image and resizing is performed on client side. As resizing is browser based - you can not improve image quality. Typical browser is using quick and simple algorithm to resize image. Browsers are not resampling images while resizing.
March 15th, 2008 at 1:39 pm
Adjusting Position of Container
any advise how to adjust position of container? I would like to have it bit up.
Thank you
Zdenek
March 16th, 2008 at 10:58 pm
Hello Zdenek,
The position of container is generated in this line of code:
object.style.top = (this.getPageScroll() (pageSize[3] / 15)) “px”;
As you can see, the position is not fixed, but depends on window height. If you want to move container up, you may divide pageSixe[3] by bigger number. For example:
object.style.top = (this.getPageScroll() (pageSize[3] / 20)) “px”;
March 20th, 2008 at 10:15 pm
Hi Pavel -
Just to start..Lytebox is great. However, I’m having a small issue.
I am opening a form in a lyteframe. When the user submits, he is redirected to a confirmation page. In Firefox, this all happens smoothly inside of the frame. In MSIE7, however, it kills the lyteframe and opens the confirmation page in its own new tab/window.
Any ideas?
March 24th, 2008 at 6:04 pm
Hi Shaun,
Redirection code should be revised. If you could provide the code and/or URL of your page to test, I could provide you the solution
March 24th, 2008 at 8:40 pm
Thanks for the MOD!
Is there anyway to turn off scroll bars in IE6? It shows a vertical scroll bar even when there is nothing to scroll. Oddly there is no horizontal scroll bar.
I would rather have the content cropped than have ugly scroll bars.
Thanks
March 25th, 2008 at 3:28 am
Hi Pavel -
Can you private mail me and I’ll provide you a link?
- Shaun
March 25th, 2008 at 2:21 pm
Shaun,
Sent you all the explanations and how to fix your specific issue via e-mail
April 10th, 2008 at 1:12 am
I have an e-commerce website. I’m using Magento as my e-commerce solution, and for certain products I have different colors you can choose from. I labeled each picture with the color. It is under a field called “Label”. Before I installed Lytebox it would open the picture in a new window and it would display the color as text above the image. Now that I have Lytebox, it doesn’t say the color, instead it uses the name of the product as the caption for every single image so if I have a bunch of weird colors to choose from, people wouldn’t know which one is which… How can I tell Lytebox to display the label instead of the title as the caption?
Thank you,
Erik
April 10th, 2008 at 1:25 am
Ok, to make things a little easier… referring to the question I asked above… here is the old code before I installed Lytebox..
<a href=”#” onclick=”popWin(’getGalleryUrl($_image) ?>’, ‘gallery’, ’scrollbars=yes,width=300,height=300,resizable=yes’);return false;”>
<img src=”helper(’catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68, 68); ?>” width=”68″ height=”68″ alt=”htmlEscape($_image->getLabel()) ?>” title=”htmlEscape($_image->getLabel()) ?>”/>
and here is the code after I installed Lytebox
<a href=”helper(’catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” rel=”lytebox[rotation]” title=”getName();?>”>
<img src=”helper(’catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68, 68); ?>” width=”68″ height=”68″ alt=”"/>
I think the answer relies in:
title=”getName();?>”>
but I haven’t been able to figure it out.
April 10th, 2008 at 1:30 am
Nevermind, I figured it out… I just had to replace
$_product->getName
with
$_image->getLabel
Sorry I filled up your blog, but maybe that will help someone else.
April 10th, 2008 at 1:40 am
Ok, one more question… but this one should be easy.
Say I want to echo the product name and the color after it… So I put:
title=”getName(), $_image->getLabel();?>
But that gives me “Product NameRed”
How can I seperate the product name from the color.. So that I could have something like: “Product Name - Red” ?
Thanks
April 10th, 2008 at 1:44 am
SOLVED! I apparently ask questions way too early… I tried some stuff before I asked that last question and had a bunch of syntax errors… but it looks like this seems to work:
title=”getName(),(’ - ‘),$_image->getLabel();?>
Unless there is a better way to do it, or more correct way.. that seems to work fine…
April 10th, 2008 at 10:17 am
Erik, well done troubleshooting your issues
April 18th, 2008 at 7:35 am
Great Job! This powered version of lytebox fits many cases.
April 20th, 2008 at 3:25 pm
Hey,
I’ve downloaded me this lytebox and it is very super. But I’ve a problem with it: Is it possible, to connect a lyteshow with a lyteframe so that i click next e.g. in the picture as lyteshow and the I see the lyteframe?
I hope it will work.
Thanks
utzi
April 20th, 2008 at 10:44 pm
Hello,
is it possible to have the next and previous buttons by iframe also at the left and right hand side like it is by pictures. Not that there are two words prev and next at the bottom of the lytebox.
thanks
hope you can help me
utzi
April 21st, 2008 at 10:12 pm
utzi,
1. No, you can’t combine lyteshow with lyteframe
2. Overlay navigation for lyteframe was not used in purpose, as they might overlay links and other stuff in the frame
April 22nd, 2008 at 11:56 pm
thanks for quickly answering
utzi
April 23rd, 2008 at 7:30 pm
why can’t i use your script in an iframe with name. If my iframe has a name, there’s only the picture at the bottom of the page. If the iframe has no name, is works perfekt. What can i do that i works also with an iframe with a name?
thanks schlursel