JQuery

Jan 4th

Handy jQuery Overlay Info Panel

Tags: JQuery/jQuery Tools/Overlay/Wordpress
Posted in Blog by Abban |

Dec 15th

Adding A Gallery To WordPress Part 2: Fancy jQuery & jQuery Tools Overlay.

This tutorial is following on from last weeks (Yes I know I’m late but it was hectic all week!) What we’re going to do is implement the gallery shown here into the gallery we made last week. If you haven’t already done it, have a look through last weeks tutorial.

1. Starting Off.

First you need to download the jQuery Tools plugin from here. Make sure you include the jQuery library and the overlay function with the gallery plug in. Open the header.php file in your WordPress theme and attach the library. And also download the close button from here and the loading image from here and save them into the themes images folder.

2. The CSS.

Next we need to add the styles for the gallery. Copy and paste this code into your style sheet:

/* the overlayed element */
.simple_overlay{
    width:1px;
    display:none;
    z-index:10000;
    padding:10px;
    background-color:#333;
    border:1px solid #666;
/* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
    position:relative;
}

.simple_overlay .close{
    background-image:url(images/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}

/* the large image. we use a gray border around it */
#img {
    border:1px solid #666;
}

/* "next image" and "prev image" links */
.simple_overlay .next, .simple_overlay .prev {

    /* absolute positioning relative to the overlay */
    position:absolute;
    top:40%;    
    border:1px solid #666;    
    cursor:pointer;
    display:block;
    padding:10px 20px;
    color:#fff;
    font-size:11px;

    /* upcoming CSS3 features */
    -moz-border-radius:5px;
    -webkit-border-radius:5px;    
}
.simple_overlay .prev {
    left:0;
    border-left:0;
    -moz-border-radius-topleft:0;
    -moz-border-radius-bottomleft:0;
    -webkit-border-bottom-left-radius:0;
    -webkit-border-top-left-radius:0;
}

.simple_overlay .next {
    right:0;
    border-right:0;
    -moz-border-radius-topright:0;
    -moz-border-radius-bottomright:0;
    -webkit-border-bottom-right-radius:0;
    -webkit-border-top-right-radius:0;    
}

.simple_overlay .next:hover, .simple_overlay .prev:hover {
    text-decoration:underline;
    background-color:#000;
}

/* when there is no next or previous link available this class is added */
.disabled {
    visibility:hidden;        
}

/* the "information box" */
.info {
    position:absolute;
    bottom:9px;
    left:11px;    
    padding:10px 15px;
    color:#fff;
    font-size:11px;
    border-top:1px solid #666;
}

.info strong {
    display:block;    
}

/* progress indicator (animated gif). should be initially hidden */
.progress {
    position:absolute;
    top:45%;
    left:50%;
    display:none;
}

/* everybody should know about RGBA colors. */
.simple_overlay .next, .simple_overlay .prev, .simple_overlay .info {
    background:#333 !important;
    background:rgba(0, 0, 0, 0.6) repeat-x;        
}

3. Implementing The Gallery.

Open the single.php file in your template. Wrap the loop that’s printing the gallery images in a div with the id: “gallery”. We also need to add rel=”#image_overlay” into the a tag in the loop. The loop should now look like this:

<?php if(in_category('overlay-gallery')){ ?>
    <div class="gallery">
        <?php $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' .$post->ID );
        if(!empty($images)){
            foreach( $images as $imageID => $imagePost ){
                $url=wp_get_attachment_image_src($imageID, 'large'); ?>
                <a rel="#image_overlay" title="<?php echo $imagePost->post_title; ?>" href="<?php echo $url[0]; ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $url[0]; ?>&amp;h=156&amp;w=156&amp;zc=1" alt="Screenshot" border="0"/></a>
        <?php } } ?>
    </div>
<?php } ?>

What the rel is for is calling a gallery event handler. Ill explain how the handler works in a minute. Copy this code into the bottom of your single.php page above the get_footer function:

<?php if(in_category('gallery')){ ?>
    <div id="gallery_overlay">
        <!-- "previous image" action -->
        <a>prev</a>
        <!-- "next image" action -->
        <a>next</a>
        <!-- image information -->
        <div class="info"></div>
        <!-- load indicator (animated gif) -->
        <img class="progress" src="<?php bloginfo('stylesheet_directory'); ?>/images/loading.gif" />
    </div>
    <script type="text/javascript">
    $(function() {
        // select the thumbnails and make them trigger our overlay
        $(".gallery a").overlay({
            // each trigger uses the same overlay with the id "gallery"
            target: '#gallery_overlay',

            // optional exposing effect
            expose: '#000000'

            // let the gallery plugin do its magic!
        }).gallery({
            // the plugin accepts its own set of configuration options
            speed: 800
        });
    });
    </script>
<?php } ?>

The first part of this code is a div with the class simple_overlay that’s going to display our overlay. This is set to hidden in the style sheet. The next part is our javascript event handler. This is waiting for one of the links that are printed out in the gallery div to be clicked. It then loads the image in the link url into the simple_overlay div and fades it in.

BAM! You now have a nice and easy and very shiny WordPress gallery. You can see it working on the top of this page. As usual, if you have any questions feel free to leave them in the comments.

Tags: gallery/JQuery/jQuery Tools/Tutorial
Posted in Blog, Overlay Gallery by Abban |