Advanced Options: Skin

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Advanced Options: Skin

theturninggate
Can someone explain/demonstration proper usage of the 'skin' option? I'm interested in making some adjustments to the HTML markup, and would prefer to do it via options rather than editing the shadowbox.js file.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Advanced Options: Skin

mjijackson
Administrator
The best way to play around with the skin object is to copy the skin that is found in the source file and then pass it in as an option. Then, as you tweak the HTML, you can refresh and see the changes immediately.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Advanced Options: Skin

theturninggate
Sorry, I'm not well informed with Javascript, and the syntax is confusing me some. To use 'skin', would it be:

                var skin = {
                        insert HTML markup
                };

Or would it be something like:

                var options = {
                        skin: "insert HTML markup",

Can the skin be called in from an external file, or does all of the markup have to go into the head of the document?

This is the standard piece of code I have in the head of my document. Could you write in a brief example of out the 'skin' option needs to be written?

        <script type="text/javascript"> window.onload = function(){ var options = { assetURL: "resources/", keysClose: ['c','q','x',27], handleUnsupported: 'remove', }; Shadowbox.init(options); }; </script>

Thanks, and sorry for the daft questions.
theturninggate
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Advanced Options: Skin

theturninggate
In reply to this post by mjijackson
Okay, I think I've figured out how to use this. It goes like this, yes?

        <script type="text/javascript"> window.onload = function(){ var options = { assetURL: "resources/", keysClose: ['c','q','x',27], handleUnsupported: 'remove', skin: { main: '<div id="shadowbox_overlay"></div>' + '<div id="shadowbox_container">' + '<div id="shadowbox">' + '<div id="shadowbox_title">' + '<div id="shadowbox_title_inner"></div>' + '</div>' + '<div id="shadowbox_body">' + '<div id="shadowbox_body_inner"></div>' + '<div id="shadowbox_loading"></div>' + '</div>' + '<div id="shadowbox_toolbar">' + '<div id="shadowbox_toolbar_inner"></div>' + '</div>' + '</div>' + '</div>', loading: '<img src="{0}" alt="{1}" />' + '<span><a href="#">{2}</a></span>', counter: '<div id="shadowbox_counter">{0}</div>', close: '<div id="shadowbox_nav_close">' + '<a href="#">{0}</a>' + '</div>', next: '<div id="shadowbox_nav_next">' + '<a href="#">{0}</a>' + '</div>', prev: '<div id="shadowbox_nav_previous">' + '<a href="#">{0}</a>' + '</div>' }, }; Shadowbox.init(options); }; </script>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Advanced Options: Skin

mjijackson
Administrator
You got it
Loading...