nickstakenburg.com Forums - All Discussions

Roadmap 2010: jQuery, MooTools and a teaser.

2010-02-10T00:18:19+01:00

Figured I'd give everyone an update as to what's in store for 2010.

The request I get most often is to port my projects over to other frameworks. To make this possible I've started working on an adapter that allows me to write code that'll work with your framework of choice. I'm covering Prototype, jQuery and MooTools for the first release, you'll be able to add your own with a bit of javascript.

The adapter allows me to start from scratch so it's a good opportunity to revisit my current projects instead of simply porting them over. Using the adapter I've just finished some work on the first part of my next tooltip project. This library will have customizable canvas based skins, shadows and loaders so images will become a thing of the past. Here's a little teaser:

Now that I'm covering multiple frameworks there's still a lot of work that needs to be done before I'll be ready to release something stable, but I will keep you updated here and I'll probably tweet^[1] about things as I move along.

I'm taking all of the feedback received over the years on the forums with me, if you want to drop me some feedback on tooltips post it in the Prototip forum. You can do the same for Lightview since that'll be the next project I'll revisit. Thanks.

--
Nick

[1] @staaky

Slideshow starting from last pictures

2010-09-07T15:51:45+02:00

I bought lightview and i'm using it in my website , everything is ok but i have a little problem.

I'm using it in a Php script , i created to add the pictures in galleries in a dynamic way (the script is checking the folders , and adding the pictures in the folders) , but the little problem is when i'm clicking to the lightview gallery, the gallery is starting from the last pictures.For example , if i have 15 pictures in the gallery, the lightview gallery is starting from the pictures n°15, and ive to click to the left arrow to the 14, 13 , etc...

do you have any idea about the problem? and how to do to start from the 1st picture?

Thanks a lot

Lightview causing reduced image quality/softness of images?

2010-09-05T20:05:30+02:00

Hi

I am currently testing Lightview in the hope it meets my requirements. I have installed Lightview and it is functioning correctly except that images displayed using it appear soft, like they are slightly out of focus or blurred. Comparing an image opened with Lightview against the original file in Photoshop there is a noticeable loss of fine detail in Lightview.

Is this a known issue with javascript products like Lightview?

Thank you

Thomas

The dreaded iFrame question

2010-01-13T06:00:24+01:00

Hello all,

I'm hoping someone here can take pity on a soul and point me in the right direction. Believe me when I say I've studied, restudied, and studied again every discussion on this forum regarding this issue; ditto the documentation and how to use; I've searched Google every which way I know how, read dozens of sites, trial-and-errored myself to death ... I've done everything I can to figure this simple problem out myself because clearly this is an issue the developer does not appear happy discussing, and I respect that ... but I'm at my wits end, many weeks into this problem, and am posting here as a sort of last resort. Call me a moron, that's fine, but I'm a moron looking to learn and hoping someone here will be willing to teach a brief lesson.

Here goes:
I have Lightview working perfectly on my web page. There is a portion of the page, however, that I must use an iFrame to display the contents of another page on the site. I know, I know. iFrames are the lovechild of the devil and M.C. Hammer (circa "U Can't Touch This") and there are more modern ways, but frankly at this point I'm operating under the KISS (keep it simple stupid) method. Maybe one day I will learn those new ways, but for now, iFrame is the tool I have. So, that said, all I want to do is this: when clicking a link contained in the child iFrame, have that page or image or whatever the case may be appear in Lightview in the parent.

I can't tell you how many different ways I've tried this -- instead, I'll offer what (to me) has seemed the most logical based on everything I've read, yet it still doesn't work. Clearly I'm missing a step somewhere.

What follows is based on this bit of advice to another poster:
"If you want Lightview to work across iframes, normal links cannot be used.
You need to setup Lightview in the parent page and create your own function inside the iframe pages that calls window.parent.Lightview.show. For example:

window.parent.Lightview.show({ href: 'myimage.jpg' }); "

First, in the head of the parent -- I have the basic script info taken from the "Add Lightview to your Page." Again, Lightview works perfect when the link is directly on that page. Thus to my mind Lightview is "setup" on the parent page. (But perhaps here is where I'm missing something -- is there anything further I need to do in the head of the parent page to get this to work? In all my studies, I've gone a bit cross-eyed. Some people show an additional function script on the parent page, some don't. Which is it?)

In the head of the child page, I open script, write: function() { window.parent.Lightview.show({href: 'the url' }); } and close script.

In the body of the child page, I made the link I want to open in the parent: href="javascript:window.parent.Lightview.show();" (Again, in my studies I've seen people warn against using 'javascript:' but I'm not sure what else is possible?)

Going back to the parent, clicking the link on the child page, nothing happens.

Using this information as a starting point, can anyone tell me what I'm doing wrong?

Thanks in advance for any assistance.

Inline - div doesn't show

2010-09-04T19:11:26+02:00

Hi,
I am making an inline div show in lightview, however, I set my div to display:none; and when the lightview modal box pops up, the div content is still hidden.
I thought the scripting would automatically switch the div to display:block or whatever it needs to show the contents.

-----------

Here is my href:

Meditation Workshop Session 1

Here is my div content:

Session 1

Some text to display hopefully

and here is my css to hide the div:

#workshop1{
display: none;
}

-----------

any help will be much appreciated, and yes, I have bought a licence :)

Mailing List Signup - close on submit and load thankyou in main window

2010-09-04T14:38:04+02:00

Here's what I am trying to achieve, see example at http://skinnychef.net (click on the TODAY show video image in lower right sidebar)

1. lightview window opens iframe, playing 60 second video.
2. at the end of video, video loads another URL (http://skinnychef.net/wp-content/free-video/signup.html) into the same lightview window. This URL contains a signup form for my autoresponder.
3. Once user enters their email address and clicks submit button, email is added to database and autoresponder redirects to a thankyoupage (http://skinnychef.net/free-video-content1). This page currently loads in the lightview window.

-> Instead, I would like the lightview window to close and load that thankyoupage (http://skinnychef.net/free-video-content1) in the main browser window that originally launched the lightview.

How do I accomplish this?

lightbox:hidden javascript error

2010-08-31T16:39:02+02:00

Hi,

I have a javascript error when the "lightbox:hidden" event handler is executed.

Prototype version : 1.6.1
Lightview version 2.5.2.1
Scriptaculous version 1.8.3

Here is my code:

In IE8 that doesn't work and I have a javascript error. Here is the browser log :
Détails de l’erreur de la page Web

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Horodateur : Tue, 31 Aug 2010 14:14:24 UTC

Message : 'width' a la valeur Null ou n'est pas un objet.
Ligne : 291
Caractère : 7
Code : 0
URI : http://:8080/MyULg/resources_xt/FW/outils/ajax2/prototype.js

Then Mozilla I get the "trace" alert correctly but there's a javascript error:

Erreur : a is undefined
Fichier Source : http://:8080/MyULg/resources_xt/FW/outils/ajax2/lightview/js/lightview.js
Ligne : 151

eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(n(){B l=!!19.aq("3y").5T,2G=1m.1Z.2F&&(n(a){B b=u 4A("9b ([\\\\d.]+)").al(a);J b?4J(b[1]):-1})(3b.4T)<7,2C=(1m.1Z.5a&&!19.45),32=3b.4T.24("6r")>-1&&4J(3b.4T.3T(/6r[\\/\\s](\\d+)/)[1])<3,4k=!!3b.4T.3T(/95/i)&&(2C||32);12.1l(Y,{aw:"1.6.1",bn:"1.8.2",R:{1a:"5u",3q:"V"},5x:n(a){m((bo 20[a]=="8M")||(9.5z(20[a].9m)<9.5z(9["8n"+a]))){9O("Y a9 "+a+" >= "+9["8n"+a]);}},5z:n(a){B v=a.2Z(/8w.*|\\./g,"");v=4w(v+"0".bq(4-v.1p));J a.24("8w")>-1?v-1:v},5G:n(){9.5x("1m");m(!!20.11&&!20.6E){9.5x("6E")}m(/^(9L?:\\/\\/|\\/)/.58(9.y.1e)){9.1e=9.y.1e}W{B b=/V(?:-[\\w\\d.]+)?\\.at(.*)/;9.1e=(($$("av[1t]").6N(n(s){J s.1t.3T(b)})||{}).1t||"").2Z(b,"")+9.y.1e}m(!l){m(19.5K>=8&&!19.6Q.3k){19.6Q.bs("3k","bA:bN-bQ-c2:c3","#5R#79")}W{19.1f("5Y:3P",n(){B a=19.9r();a.9B="3k\\\\:*{9I:3Q(#5R#79)}"})}}},60:n(){9.1z=9.y.1z;9.Q=(9.1z>9.y.Q)?9.1z:9.y.Q;9.1I=9.y.1I;9.1R=9.y.1R;9.4.................. etc

Regards,

Thao

Ajax encoding

2010-09-02T16:09:51+02:00

Hello,

First I want to thank Nick for its wonderful tool.

I want to open an ajax with lightview. I don't have probelm with that, it works well. But I have an encoding problem. Not with FF or chrome, only on IE. IE seems to read the ajax in utf-8, instead of iso-8859-1.
I try to add the line "encoding: 'iso-8859-1'," in the ajax block (like an standard ajax.update() ), but doesn't work.
Here is the code:

document.observe('lightview:loaded', function() {
Lightview.show({
href: '/',
rel: 'ajax',
options: {
autosize: true,
topclose: true,
ajax: {
method: 'get',
encoding: 'iso-8859-1',
evalScripts: true,
onComplete: function(){ $('name').focus(); }
}
}
});
});

Somebody have an idea??
Thanks

box keeps jumping up and down then loading

2010-09-03T15:12:09+02:00

please look at this site

http://www.channelzoo.com

click on the banners under our events ( bottom right of the site )

can you please let me know why its doing that? its a wordperss site using the wordpress plugin wp-lighview

Many thanks

Danny

NO Scroll Bar within iframe?

2010-08-31T12:36:25+02:00

Ajax prototip working nicely, however when I load to an iframe the scroll bar is not appearing?

http://www.ndorfnz.com/indexCal.php

Click the link on the left called "Prototip Problem" for implemented prototip.

Click the link on the left called "Without Prototip" to see page without prototip implemented, scroll bar shows with no issues.

Appreciate the input or guidance as to what needs to be adjusted for prototip to work...

javascript error in IE7 & IE8

2010-08-23T18:01:22+02:00

Hi:
There are a couple parts to my issue.

The first one is that every page of my site is giving an error

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Mon, 23 Aug 2010 15:55:20 UTC

Message: Invalid argument.
Line: 2216
Char: 9
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js

I have been doing some looking and it seems that people find they are having this problem when they
use a file format which disagrees with light view.

Is this accurate?

It also ties into the next part of the problem which is that lightview doesn't open
our embedded videos in IE 7 and IE8 instead opens them in a new browser window.

It seems like more than a coincidence that these two problems are happening.

As a side note, the videos are working perfectly well in firefox.

The page where this is happening is http://www.appfolio.com/case-studies

the code for each video is

<%= image_tag('casestudies/videos/06.jpg', :alt => 'Case Study Collage', :width => 183, :height => 111) %>

Case Study Collage

Any help you could give would be greatly appreciated.

(one final note, i don't know if it makes a difference, but we are using the commercial version)

Thanks,
~Ethan

Side Buttons prev.png next.png - Customizing Buttons (or) Move Forward Only

2008-08-29T10:28:34+02:00

I've seen a few posts about this unanswered, brilliant work on having the hover split between the image which goes back or forward in a gallery set.

The problem is that the side buttons are too unnoticeable / small (this is my opinion in context to the site I am working on... so please take no offense, your UI is flawless).

I'm not suggesting changing anything.

I'm asking if it's possible to customize those buttons to be a bit more noticeable (in my case a lot more noticeable). As you know, resizing the actual images (prev and next) has no effect except to stay within the confines of the set dimensions of the element the buttons live in.

At first I thought there was something wrong because clicking on the left half (or even a few pixels to the left of center) of an image took me backward instead of forward and had no idea what was going on, and then realized what you had done with splitting the image for back and next... and THEN noticed the small buttons, if the buttons were bigger... the split image functionality would be much more obvious.

If it is not possible to customize the images, being able to simply go forward in the gallery by clicking an image within a gallery (no matter where you click within the image) would do the trick as well.

Are one of these two possible? Is there an immediate solution with the current code?

thanks in advance
(licensed user)

Adam F.
adam.fischer@gmail.com

licensed user

Preloading Gallery images

2010-08-30T18:46:01+02:00

Hi Nick,

I noticed that the Lightview preloads neighboring image(s) in parallel with the current image when using gallery/set mode. When working with slow servers it causes the current image to appear on the screen later than it does for non-gallery (standalone) mode (for the initial image the server has to serve 3 images in parallel [current, previous, next]). I noticed the Lightbox does not do that, the image prefetching is done there after the current image is loaded. Is there a way to configure the Lightview to do the "delayed" preloading as well?

Thanks,
Ivo

Call Auto resize function again

2010-08-25T03:40:39+02:00

Hi

I'm currently trying to resize the lightview once a second set of ajax loads. It extends the data further below the original content and just adds scroll bars.

Is there a way we can call the same resize function that gets called when the ajax initially loads.

So to break down what happens - i have a search form pop up - about 500px x 200px - i then do a search and want the results to show below the search form in the lightview window. At the moment the window remains 500px x 200px - but if i could re-call the auto resize function it would resize to either the window height or the height that would fit the content.

Am i able to call the function that is used when first initiating the lightview?

I've tried using some of the other methods for resizing but it doesn't seem to work - the lightview will expand but the actual content doesn't fill the space made by resizing. Just keeps the scroll bars there.

Thanks Nick - it's a great piece of code! So is prototip - if i can get this implementation to work i'll be buying both licenses

iframe: Specify width, but auto height to display area?

2010-08-20T01:01:42+02:00

Is there a way for me to either:

a) set a constant width of an iframe and have the height fit to the user's display area?

or

b) reduce the width of the fullscreen option permanently?

Thanks for your time,
-Scott

Lightview not working for me :(

2010-08-23T21:03:43+02:00

Hiya, I have been trying to install lightview on this page http://www.glitzybingo.co.uk/all-slot-games.php and I just cant figure out why it wont load. I would like to have a page load in an iframe, the code is currenly on the blue play here link but it just takes me to another page.

I tried removing the other scripts on my page, and the drop down menus and it still doesnt work. And I have validated this page also. Would some kind person please take a look for me.

Thanks

Rachael x

gallery frame pushed down

2010-08-20T01:48:24+02:00

im hoping this is an easy fix.

if you go to my website http://djwesterfield.com/photos.html you can see that when you click a photo, and it pops up with a larger version, its pushed down and to the right. where can i edit the js so i can set the (i think) x,y values so it will pop up higher and more to the left so i can see the full photo?

thanks for the read! hope to hear back soon

-DJ

Overlay Opacity not working in IE7

2008-03-20T00:02:42+01:00

First of all, great work on Lightview. It is a very nice feature and I applaud you for putting it together.

I seem to be having an issue with the overlay opacity in IE7. In Firefox, everything seems to be working great, but in IE7, the overlay is black, with no opacity.

Any idea what could be causing this?

Thanks!

Edit:
I seemed to have gotten it to work somehow, but I'm still working on it.

Border size in fullscreen: true

2010-08-19T20:04:52+02:00

Hi Nick: Lightview is great - thanks for all your hard work. Have one question though. I have one customer who wants to open a lightview window in an iframe with a fullscreen: true option, but it still shows a border around the edge within the iframe. is there a way to reduce or eliminate the border completely? I've tried messing around with the parameters but it doesn't seem to be making a difference. Please let me know. Thanks...Chris

Open Lightview with script and custom borders

2010-08-19T23:06:02+02:00

I'm trying to open a light view with javascript and want to open the view without rounded corners while normal views keep the rounded corners.

I tried doing something like Lightview.options.radius = 1 but that doesn't work.

Is there a way that I can set the border/radius dynamically?

-James

Linken naar lightview

2010-08-18T10:56:34+02:00

Beste allemaal,
Kan iemand mij helpen?

Ik heb mn portfolio:
http://www.look-inside.nl/portfolio.htm

en nu wil ik via lightview het portfolio laten zien:
http://www.look-inside.nl/testI.htm

maar hoe krijg ik nu dat als ik op de portfolio pagina op een foto klik meteen die lightview krijg?
Dus dat hij meteen daar mee opent?

Hoop dat iemand me ermee kan helpen.

Groetjes wendy

Zooming

2010-08-18T00:08:33+02:00

I'm looking at a script called magic zoom from http://www.magictoolbox.com and would like to know if I can do the same thing with the zooming features with lightview.

I set up a test of magic zoom and it uses 2 images. A smaller image and a larger image. When you hover the mouse over the smaller image it pulls up the larger image and focuses on the section you are hovering over so that when you move around the pointer it moves around in the larger image giving the effect of a zoom.

You can see an example at http://www.magictoolbox.com/magiczoom/.

I like some of the features of lightview that magic zoom doesn't have like being able to add multiple media types. Is the zooming I described something that can be accomplished with lightview?

javascript conflict

2010-08-17T21:02:00+02:00

Anybody help?

I appear to have a conflict within my code which I can't resolve..
Here's the scripts

They both work without each other but I need help to get them to run together.

Many thanks

Dynamically creating a prototip using ajax

2010-07-16T18:10:20+02:00

Hello,

I have what I think is a pretty specialized situation in which I would like to use prototip, but I've been unsuccessful in implementing it thus far and I was hoping someone could provide me with some guidance.

On our website hosts scientific images, and one of the key techniques we use for displaying these images is via Lokesh Dhakar's Lightbox 2. However, in order to improve performance, I have modified the lightbox script to fetch captions via Ajax. You can see an example of this here http://www.xenbase.org/literature/article.do?method=display&articleId=39242 .

Now my problem is this, I want to put a prototip into a lightbox caption which is fetched via Ajax. I got prototip working fine on our site in a non-ajax context.

Here is an example of how I am using prototip:

comment [+]

So I've setup our site so that the above code is being sent back in the Ajax response for the image caption, and it is then set as the innerHTML of the lightbox caption. I can see all of the prototip HTML & JS elements are present in the lightbox caption, but the prototip does not work. I thought this was because the JS to create the Tip object was not being executed. So I tried to solve this by running the JS through the eval() function. This worked in so far as I could then see the Tip object in scope when the lightbox caption is fetched. However, I still can't get the prototip to appear.

Any help that you can offer would be greatly appreciated. If my description of the problem is unclear please let me know and I will attempt to clarify.

Sincerely,
Jarabek

Prototip layer over embedded PDF

2010-07-26T17:29:02+02:00

I have a feeling this impossible without hiding the PDF first, can you confirm for me though?

Thanks

Don't work.. I don't understund

2010-08-02T22:18:55+02:00

Hi,
I did exacltly the step "Installation" on your web site...

the last step is add the final code into the page.. I added this:

But the tooltip don't work.. can you help me please?

maybe I have to call some css class?

Many many Thanks!

Strange IE Behavior

2009-07-22T01:42:02+02:00

### EDITED 9:36AM PDT 7/22 ###

Changed JQuery code to Prototype:
if ($('ID')!=null)

### END EDIT ###

### EDITED 5:27PM PDT ###

Nick,

I think I found the problem. The ID MUST be defined BEFORE calling prototip.js as per your DOCS. The challenge was in my attempt to create a dom:loaded library of sorts to store all of my standard tips which can be called on any page that needs them. As elements were present in the dom:loaded library that did not exist on a particular page, an error was thrown.

Here is my attempted fix. Please advise/comment on approach:

Since I also use the JQuery library, my dom:loaded JS now looks like this (and it works):

document.observe('dom:loaded', function() {
// taxid
if ($('taxid')) {
new Tip('taxid', "Required for U.S. based Affiliates earning over $600 in any fiscal year (typically your Social Security Number/Employer ID Number). Please read our Affiliate Agreement for more information.", {
title : 'Federal Tax ID Number',
style: 'darkgrey',
stem: 'topLeft',
hook: { tip: 'topLeft', mouse: true },
offset: { x: 16, y: 16 }
});
}

// paypal
if ($('paypal')) {
new Tip('paypal', "If you'd like to receive your Affiliate checks via PayPal, please enter your PayPal email ID here.", {
title : 'PAYPAL Email ID',
style: 'darkgrey',
stem: 'topLeft',
hook: { tip: 'topLeft', mouse: true },
offset: { x: 16, y: 16 }
});
}

// mg login
if ($('yourid')) {
new Tip('yourid', "Check this box if you want our system to remember your login details for you.", {
title : 'Remember My Login ID',
style: 'darkgrey',
stem: 'topLeft',
hook: { tip: 'topLeft', mouse: true },
offset: { x: 16, y: 16 }
});
}
});

Thoughts?

G.

### END EDIT ###
Nick,

When including the "new Tip(' ..." JS (either inline below the element, or with dom:loaded via external JS or on the page) , Prototip works without error on IE8 (using ) ONLY IF I only have a "new Tip('..." that matches an element on the page.

FF reports: Error: uncaught exception: Prototip: Element not available, cannot create a tooltip.

If I try and create a small "library" of tips and include them as stated above, and the element is NOT on the page (because this library is part of my "included" header file), IE reports an error:

Webpage error details:
Message: Exception thrown and not caught
Line: 51
Char: 7
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js

Thanks for any help you could provide Nick.

G.

Lightview vs. Dynamic Link

2010-08-16T16:53:53+02:00

Hi. I've been trying out lightbox and all its clones over the last week. Lightview is my favorite, so last night I purchased a license and implemented it. It works as intended everywhere i've put it to use with the exception of one place. I have an image that changes based on mouseOver events. Lightview works for whatever image you decide to click on first, but from that point on it only displays that image regardless of what the link information is.

My exmple: http://jugtones.com/?display=instrument&instrument=Old%20Crapper%20%28Bedpan%20Guitar%29

As you run your mouse over the image links, the display changes to show the preview of that image. The image preview can be clicked to show the full size version. If you put your cursor over the preview image you can see that the link points to the correct larger version of the displayed image, but Lightview always pulls the same image, but not always the first (default) image... but rather the first image the user expands using the thumbnail link. Using the text links always works fine of course.

An example of the important bits of code:

Image #1

Image #2

Image #3

Lightbox was handled this idea ok, but i've so far been unable to get Lightview to respond properly. Thanks for any advice you can offer, -Scott

Solved!

2010-08-15T01:55:56+02:00

SOLVED

turn off loading with "images:" options

2010-08-13T14:03:46+02:00

I had a question about the images: option, which asks for a directory for all the images for the controlling of lightview... however, we do not use any of these images as we have customized lightview vastly, but the lightview:loaded event doesn't fire until all of them have loaded...

Currently, to help with load time, I made all the images a 1px by 1px picture, but it would be nice to be able to put "none" or "false" as this option and prevent the loading of these images all together... Is there a way to do this? If not, could you please add this to your feature pool?

Now that Google uses page load time as part of its algorithm, every little second counts...