Lightbox and Mojo ?

This is an open forum for any mojoPortal topics that don't fall into the other categories.

This thread is closed to new posts. You must sign in to post in the forums.
6/17/2010 8:50:24 PM
castlesoft
Gravatar
Total Posts 101
View Posts

Lightbox and Mojo ?

 

Hi,

Whats the cleanest/recommended way to integrate the following into a Mojo site/theme ? (instead of the existing image viewer)

http://leandrovieira.com/projects/jquery/lightbox/ 

=============================================================================

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

<script type="text/javascript">
$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

=============================================================================
6/18/2010 12:57:41 AM
castlesoft
Gravatar
Total Posts 101
View Posts

Re: Lightbox and Mojo ?

 

I have the lightbox working.. But not 100% its the right way to do it in MOJO..

 

1) create a directory  /ClientScript/lightbox    and  /ClientScript/lightbox/images

2) Grab the latest version of the code from:    http://leandrovieira.com/projects/jquery/lightbox/ 

3) Copy the jquery jquery.lightbox-0.5.min.js to a new file called jquery.lightbox-0.5.min-mojo.js

    and modify the images/  to /ClientScript/lightbox/images/

    Place this file in the /ClientScript/lightbox directory

4) Copy the jquery.lightbox-0.5.css into the /ClientScript/lightbox directory

5) Copy the images folder from the zip file into the /ClientScript/lightbox/images folder (this has back/close buttons etc)

OK.. Now we are ready to use this in a SKIN.

6) Edit your skins  LAYOUT.MASTER file.

     Place the code below directly above the div id = "wrapwebsite" line:

<portal:SiteScript id="lightbox" runat="server" ScriptRelativeToRoot="/ClientScript/lightbox/jquery.lightbox-0.5.min-mojo.js" />
<link rel="stylesheet" type="text/css" href="/ClientScript/lightbox/jquery.lightbox-0.5.css" media="screen" />

<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox(); // Select all links in object with gallery ID
    });
</script>

<style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
</style>

 

NOTE the style above can be changed to your needs.

Now you can simply add the following to any HTML content page. (NOTE the GALLERY ID is needed for this to WORK, it also works with TABLES).

<div id="gallery">
                    <ul>

                        <li>
                            <a href="photos/image1.jpg" title="For this example: $('#gallery a').lightBox();">
                                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
                            </a>
                        </li>
                        <li>
                            <a href="photos/image2.jpg" title="For this example: $('#gallery a').lightBox();">
                                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
                            </a>

                        </li>
                        <li>
                            <a href="photos/image3.jpg" title="For this example: $('#gallery a').lightBox();">
                                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
                            </a>
                        </li>
                        <li>
                            <a href="photos/image4.jpg" title="For this example: $('#gallery a').lightBox();">
                                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />

                            </a>
                        </li>
                        <li>
                            <a href="photos/image5.jpg" title="For this example: $('#gallery a').lightBox();">
                                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
                            </a>
                        </li>
                    </ul>
</div>

 

 

 

You must sign in to post in the forums. This thread is closed to new posts.