Hi everyone,
I have a main page that when a link is clicked opens up a popup window. Ideally, what I would like instead, is to open up a lightbox… so that the text and other html is projected on a window over a dimmed main page… is that possible? Any help would be greatly appreciated.
Thanks!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
is that possible
Yes its possible but as you are on Express you cannot use any of the many actions that can do this for you.
Instead you will have to hand code it.
Can you be a bit more specific about what you want to click on to activate this - an example page you want it to work on would be useful for us to see.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks a lot.
The actual page is
Publicadministrator.org
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
While I like the idea of your Links on the spines of the books I think that you should reconsider your sites present form.
My problem with it is that it is not that clear that these are clickable links and when viewing on a mobile device they are virtually unreadable.
Never mind the negative SEO implications because you have no Google searchable or readable text on ANY of your pages! No html text at all.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you for your feedback. I appreciate it. I will probably add a text menu as well. But about that lightbox issue…
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
about that lightbox issue….
My point is that I dont think that using a Lightbox is the way to go.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks, really looking for info about implementing light box
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
As I said in a previous post you can implement a Lightbox but you are going to have to hand code it.
So if you want to choose one of the many Lightbox scripts out there that will support html content (not just images) then one of us can help you with implementation.
Bear in mind that if you are going to use any of the native actions in FW that use script/protaculous then you would be well advised to use a Lightbox script that is also script/protaculous based.
Once you have chosen a script then point us at a page where you want it to work and tell us on what items and how ie click, hover etc.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
OK Yeled - here is an example for you http://www.deltadesign.co/FW6Test/highslide.html
This uses Highslide.js which I notice that you have tried to add to your existing site but for whatever reason you havent managed.
I am assuming that you have downloaded the full Highslide package which includes scrips, CSS files, graphics folder etc.
Your first job is to get these onto your server - an FTP app is going to be the easiest method for this.
So using your FTP app stick all the js and css files and the graphics folder into a folder called highslide on your server at the address www.yoursite.com/highslide
Then you need to reference these files in your FW page(s) using the following code in Page>Html Markup in the before section.
<script type="text/javascript" src="http://www.yoursite.com/highslide/highslide-full.js"></script>
<script type="text/javascript" src="http://www.yoursite.com/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/highslide/highslide.css" />
Now you can create the links that you want to result in a Lightbox effect and I am going to recommend that you use the iFrame method as you want to display html content including images.
An iFrame is a reference to another page which will be displayed within your site and it can display pages from other sites too. But for your example we will create pages in your FW doc to use. And I think that you have done this already ie whatwecandoforyo.html, about.html etc.
So those pages are there already - we just need to link to them correctly.
Select the text/graphic that you want to link from and use Edit>Hyperlink to brink up the linking dialogue box. Use the Internal tab and then choose the page (from the list below) that you want to appear.
Once you have selected the page to link to click on the Extended Tab (2/3 of the way down on the right) and when that opens click the New button. In the Name section type “onClick” - without the quotes and in the Value section “return hs.htmlExpand(this, { objectType: ‘iframe’} )” again without the quotes.
Repeat this for each Lightbox link you want to make only changing the page you wish to link to.
OK the dialogues and there is one last step.
To finalise the appearance of the Lightbox you need to add some parameters by adding another script snippet.
In my example I used the following added into Page>Html Markup after the references to the js and css files
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.dimmingOpacity = 0.85;
hs.align = 'center';
</script>
What this does is
1 - tell the script where to find the graphics (ie the Close button etc.)
2 - tell the script the opacity of the overlay. THe default colour is black.
3 - where to position the lightbox in relation to the viewport (usually centred)
The script used here does require a commercial license if you are not using it on a personal site - but I am sure you know that already. It can be purchased from http://highslide.com/
One thing that you should be careful of is sizing of the pages that you wish to appear in the Lightbox - size the pages to keep the content tightly constrained. ie there is no point having a page 960px wide that only has a text box 400px wide.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
David, thank you so much. I’m overwhelmed with your generosity of time and effort – thank you so much. It makes me feel that much worse that I still can’t get it to work. I added a “test” link at the bottom of the main page. Clicking on that link opens a new page, but not on the main page. I insured that the files are on the server, and I think I’m calling them properly. I have no idea what I’m doing wrong. Any further insight? Thanks so very much!!!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I added a “test” link at the bottom of the main page.
Not seeing that - have you uploaded it? Is it at http://publicadministrator.org/
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Clicking on that link opens a new page, but not on the main page.
If you are trying to get this to work by previewing locally this isn’t going to work unless you set the paths to the js files as absolute ones.
An absolute path is like http://www.yoursite.com/highslide/highslide-full.js
On your existing page I see relative paths like highslide/highslide-full.js
So with relative paths you will need to visit the actual online web page before it will work.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I thought I added full paths, I’ve rechecked everything… and now what I get is a loading box. Encouraging, but it doesn’t progress to anything beyond that. Part of the problem is that in the full unpack highland package, there is no highslide.config.js; I borrowed that file from when I tried to configure it… but there is no native config.js file.
Arg, sorry to continue to be such a pest 
My test link is all the way at the bottom on the left. Your test link works like a charm… I can’t see what I’m doing wrong, other than that config file which I can’t find.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Part of the problem is that in the full unpack highland package, there is no highslide.config.js;
You dont need that config file if you use the code I suggested - added after the links to the other js and css files in Page>Html Markup in the before section
<script type="text/javascript">
hs.graphicsDir = 'http://www.publicadministrator.org/highslide/graphics/';
hs.dimmingOpacity = 0.85;
hs.align = 'center';
</script>
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Dave, got it to work! Thanks for everything! I’m overwhelmed with your generosity of time and attention!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Well done
2 things you might want to consider.
The duplication of the Close link and button
The size of the lightbox window.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
One thing that you should be careful of is sizing of the pages that you wish to appear in the Lightbox - size the pages to keep the content tightly constrained. ie there is no point having a page 960px wide that only has a text box 400px wide.
This applies to height as well.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options