1 Topic by svenne duva (edited by svenne duva 2011-07-25 17:12:08)

  • Registered: 2011-06-10
  • Posts: 4

Topic: SimpleViewer and LightBox

I wish there could bee a nicer way to open pictures by the showOpenButton function. Now it is just opening in a new boring window. I wish I could open the pictures in a LightBox way. Any one that have a idea or solution?

Link to LightBox http://www.lokeshdhakar.com/projects/lightbox2/

2 Reply by john givens (edited by john givens 2012-03-09 00:27:40)

  • Registered: 2012-02-23
  • Posts: 6

Re: SimpleViewer and LightBox

I'm working on an Autoviewer in a lightbox...it's not done yet, but the basic mechanics seem to work.
I know Autoviewer is different from Simpleviewer, but the same techniqes might work?

Check it out... go to http://www.storybookpages.com/albumgallerytest4 , scroll down and and click on the Polina & Mario thumbnail.  It links to a page has an Autoviewer slide show in it and runs inside of a Lightbox (Lightwindow).

Is this the effect you're after?

  • Registered: 2011-06-10
  • Posts: 4

Re: SimpleViewer and LightBox

Hi John
You have a very nice site and a great service.

Yes just like that would bee wonderfull.
I can click on the image but then it just going grey. No picture is showing. When I first opening that page I am getting an error. Div with id fadeshow1 not found....

I am running Dell Vostro, Win7 ultimate 64bit, Chrome 17.0.963.66 m, Java 6, Flash 11.1.102.63

  • Registered: 2008-07-06
  • Posts: 6,334

Re: SimpleViewer and LightBox

If you simply want to open a complete gallery in a lightbox-style pop-up/overlay (rather than open an image via the showOpenButton option) as 'john givens' has done above with AutoViewer, then this can be easily achieved by using a script such as Shadowbox.

(1) Download Shadowbox and unzip the package into the same directory as your main HTML page.
(2) Copy the following code into the <head> section of your main HTML page.

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

(3) Create a SimpleViewer gallery (for example using svBuilder) and upload the complete gallery folder (not just the contents) to your web server.
(4) Link to the gallery's HTML index page using the rel="shadowbox" attribute, eg.

<a href="gallery_folder/index.html" rel="shadowbox">Click here to open the gallery using Shadowbox.</a>
Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-05-19
  • Posts: 2

Re: SimpleViewer and LightBox

Steven Speirs wrote:

If you simply want to open a complete gallery in a lightbox-style pop-up/overlay (rather than open an image via the showOpenButton option) as 'john givens' has done above with AutoViewer, then this can be easily achieved by using a script such as Shadowbox.

(1) Download Shadowbox and unzip the package into the same directory as your main HTML page.
(2) Copy the following code into the <head> section of your main HTML page.

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

(3) Create a SimpleViewer gallery (for example using svBuilder) and upload the complete gallery folder (not just the contents) to your web server.
(4) Link to the gallery's HTML index page using the rel="shadowbox" attribute, eg.

<a href="gallery_folder/index.html" rel="shadowbox">Click here to open the gallery using Shadowbox.</a>

Hi!

I tried this, but nothing happens. My gallery still opens as if it was target ="_parent" since I use an iframe. No shadowbox at all. Did I do something wrong? I tried putting the code in the head section of both my index.html and my foto.html (where the link is) but nothing works for me.

My homepage: www.comonline.nu - The shadow box link is in "Tjänster" in the meny, and then the option "Foto". And the little image with all the photos refers to the link with the shadow box popup.

All the help I can get is appreciated!

Thanks

//Johan "COMONLINE" Hermansson

  • Registered: 2008-07-06
  • Posts: 6,334

Re: SimpleViewer and LightBox

@COMONLINE

Initially, I notice that your none of your pages use a Doctype Declaration.
Please see here for details: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Also, your www.comonline.nu/tjanster/foto.html page has no opening or closing <html></html> tags and no closing </body> tag.

Try fixing the HTML errors on your web pages so that the code validates OK.
You can check your pages with the W3C Markup Validation Service and fix any errors reported.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-05-19
  • Posts: 2

Re: SimpleViewer and LightBox

Hello again!

Thanks for the tips, I will definately fix the things you mentioned. Obviously Dreamweaver doesn't include those tags when creating a new page.

I noticed that I missed to transfer one file, and after I did that I actually got the script to work. Although I can't link to my gallery, it just pops up a grey box - no gallery is viewed. If I try to link to one specific image, it is viewed correctly. Does this have to do with the things you mention or something else?

  • Registered: 2008-07-06
  • Posts: 6,334

Re: SimpleViewer and LightBox

On further investigation, it looks like you may be using the wrong version of Shadowbox (which may not be capable of opening web pages).
When downloading Shadowbox, be sure to select the 'External sites and pages' checkbox.

However, you should still ensure that each of your web pages uses a Doctype Declaration and that they all have opening and closing <html>, <head> and <body> tags.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2011-07-11
  • Posts: 4

Re: SimpleViewer and LightBox

This worked beautifully.  Thanks!

Steven Speirs wrote:

If you simply want to open a complete gallery in a lightbox-style pop-up/overlay (rather than open an image via the showOpenButton option) as 'john givens' has done above with AutoViewer, then this can be easily achieved by using a script such as Shadowbox.

(1) Download Shadowbox and unzip the package into the same directory as your main HTML page.
(2) Copy the following code into the <head> section of your main HTML page.

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

(3) Create a SimpleViewer gallery (for example using svBuilder) and upload the complete gallery folder (not just the contents) to your web server.
(4) Link to the gallery's HTML index page using the rel="shadowbox" attribute, eg.

<a href="gallery_folder/index.html" rel="shadowbox">Click here to open the gallery using Shadowbox.</a>