[Pro] mootools slimbox navigation

I have been using the mootools slimbox for image pop up. However my client does not like the fact that the Next and Previous navigation area hides. Is there a change I can make to allow them to be permanently displayed?


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Wayne,
You just need some CSS in the head of your page(s) that tell the browser to always display the previous and next images. For example;
http://www.freewayactions.com/test/moo-slimbox.html
(click on the image set of the Atomium)

Paste the following code in the head of your page using Page > HTML Markup > Before :

<style type="text/css" media="screen">
#lbPrevLink {
    background: transparent url(css/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
    background: transparent url(css/nextlabel.gif) no-repeat 100% 15%;
}
</style>

Regards,
Tim.

On 1 Apr 2013, at 19:36, Wayne Williams wrote:

I have been using the mootools slimbox for image pop up. However my client does not like the fact that the Next and Previous navigation area hides. Is there a change I can make to allow them to be permanently displayed?


Experienced Freeway designer for hire - http://www.freewayactions.com


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the reply Tim,

Here is a sample of my site. Delmano.com

I have 60+ pages usually. Is there anyway to modify the slimbox CSS or JavaScript to make this permanent, (It looks like all that was done was to remove the hover option in code above) instead of adding the code to each page.


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I added the code to a test page to see if it worked and nothing changed. The Previous and Next buttons (links) are not displayed permanently, only when the mouse hovers over one side of the image.

thank you.


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I looked at your site to find your moo implementation but it wasn’t obvious to me.

Can you provide a link to a specific page.

David


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try this link: for example (most of the pages have slimbox pop ups).

http://www.delmano.com/preview/Ed%20Moulthrop/index.html

do I need another version of slimbox?

Thank you,


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you want a permanent change for all implementations of Slimbox then you will need to change the core css file that is part of the action.

Find your Mootools action called Mootools Suite

Right click and choose Show Package contents

A new Finder window will open with a list of the component files/folders.

In the css folder find the slimbox.css file

Open this file with a text editor like TextWrangler

At line 69 where it says #lbPrevLink:hover - delete :hover

At line 77 where it says #lbNextLink:hover - delete :hover

Save the file and test.

You will need to republish the page with the action on it.

D


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Delta Dave,

I thought I tried that by changing the slimbox.css file in the Resource Folder of the site and that would change it, but that was after its published and rendered.

I’ll try it at the root level of the Mootools Suite.

-Wayne


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ll try it at the root level of the Mootools Suite.

Only if you want to affect all instances of Slimbox on all your sites.

D


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s because the relative paths to the next and previous images were incorrect on your site. The following code should resolve that;

<style type="text/css" media="screen">
#lbPrevLink {
    background: transparent url(http://www.delmano.com/preview/Robert%20Chatelain/Resources/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
    background: transparent url(http://www.delmano.com/preview/Robert%20Chatelain/Resources/nextlabel.gif) no-repeat 100% 15%;
}
</style>

Alternatively, as Dave suggests, remove the :hover pseudo styles from the master CSS file in the lightbox Action and the labels will appear all of the time for all of your sites.
Regards,
Tim.

On 2 Apr 2013, at 00:39, Wayne Williams wrote:

The Previous and Next buttons (links) are not displayed permanently, only when the mouse hovers over one side of the image.


Experienced Freeway designer for hire - http://www.freewayactions.com


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim,

I did modify the Master CSS file by removing the hover, however, the next and previous options do not appear at all, although if I click in that area the action does move forward and backward without it being visible. Do I need to remove the transparent url for them to appear?

I don’t notice this issue in the slimbox 1.8 in your original demo, was there a change made in that version and can I use it in Freeway Pro.

Thank you,


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Is there some other command instead of hover that can be used to display permanently. This does not make sense, by default you would think that it is always on.

Thank you,

-Wayne


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Wayne,
Here an example of one of your site pages (Kip Christensen) where I’ve added the extra styles to display the next and previous links all of the time (but only if they are available);
http://www.freewayactions.com/test/moo-slimbox2.html

If you click on the thumbnail image you should see the lightbox appear with the next link displayed over the right hand side of the image even when you are not hovering over it (http://d.pr/i/FyQA). Click on the right hand side of the image and you’ll see the next image in the set but this time with just the previous label showing as there is no third image (http://d.pr/i/hx69).

By default Lightbox is only showing the next and previous labels when the user hovers over the left and right hand panels over the image. The CSS I gave you adds to this by telling the browser to also show them even when they are not being hovered over (so all of the time).

Would you rather have the labels show all of the time even if there isn’t a previous or next image for the user to go to? if so i can give you the CSS for this but in terms of usability it may seem odd as the lightbox may appear broken when the user clicks and the next/previous image doesn’t appear as expected.
Regards,
Tim.

On 2 Apr 2013, at 17:45, Wayne Williams wrote:

Is there some other command instead of hover that can be used to display permanently. This does not make sense, by default you would think that it is always on.


FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim,

So if there are 3 or more images, then both will display on image 3 or later until the last image in the set in which only the previous will appear. This is great! A much cleaner and less confusing approach.

Thank you - how do I get the code change?


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Wayne,

On 2 Apr 2013, at 19:22, Wayne Williams wrote:

So if there are 3 or more images, then both will display on image 3 or later until the last image in the set in which only the previous will appear. This is great! A much cleaner and less confusing approach.
Correct.

Thank you - how do I get the code change?

Paste the following code in the head of your page/pages/master page using Page > HTML Markup > Before :

<style type="text/css" media="screen">
#lbPrevLink {
   background: transparent url(http://www.delmano.com/preview/Robert%20Chatelain/Resources/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
   background: transparent url(http://www.delmano.com/preview/Robert%20Chatelain/Resources/nextlabel.gif) no-repeat 100% 15%;
}
</style>

Regards,
Tim.

Experienced Freeway designer for hire - http://www.freewayactions.com


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Tim,

Now I’m confused. These changes were not made in the slimbox Master CSS file to get this result.

When I tried this yesterday by changing the header nothing changed. I I don’t have a static site it contstantly changes every 3 weeks or so I can’t point to that same location where do I point it to for location.

-Wayne


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I tired it on a blank set up and it seems to work. However, I’m sure it will take long time to add the code every page.

I was hoping for a more permanent solution via Master CSS file in slimbox.

-Wayne


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Tim,

I’ll give this a shot for current and future sites.

-Wayne


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim,

How do I set it to the image path to the Root Level Resources Folder where I can drop the Next & Prev image files. Otherwise I need to add copies into each folder thereafter for them to be visible.

background: transparent url(“Current Site”/Resources/prevlabel.gif)
background: transparent url(“Current Site”/Resources/nextlabel.gif)

Any help would be greatly appreciated.

Thank you,


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Wayne,
Use a dedicated FTP application (CyberDuck is both good and free - http://cyberduck.ch/) to move the prevlabel.gif and nextlabel.gif images into a specific location on your site. I would suggest placing them at the root (top) level of your public site next to the home (index.html) page.

Paste the following code in the head of your Freeway page/pages/master page using Page > HTML Markup > Before :

<style type="text/css" media="screen">
#lbPrevLink {
  background: transparent url(http://www.delmano.com/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
  background: transparent url(http://www.delmano.com/nextlabel.gif) no-repeat 100% 15%;
}
</style>

This will override the default hover state of the lightbox and will display the images (when needed) regardless of if the user is hovering over the main image.

You can check that you have the images FTPd to the correct location by clicking on the links in the code above. If the images show up in your browser then you’ve uploaded them to the correct location. If not then check where you are uploading to in CyberDuck.
Regards,
Tim.

On 3 Apr 2013, at 00:48, Wayne Williams wrote:

How do I set it to the image path to the Root Level Resources Folder where I can drop the Next & Prev image files. Otherwise I need to add copies into each folder thereafter for them to be visible.

background: transparent url(“Current Site”/Resources/prevlabel.gif)
background: transparent url(“Current Site”/Resources/nextlabel.gif)

Any help would be greatly appreciated.


Experienced Freeway designer for hire - http://www.freewayactions.com


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options