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?
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 :
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?
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.
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.
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.
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.
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.
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.
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.
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.
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 :
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.
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.
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 :
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.