Updating Your Digital Media Player

Click on one of the videos below to watch a tutorial on how to update your digital media player.

If you do not have Quicktime you can view the tutorial using the Flash video below:

Tutorial Video (Flash Player)

Please feel free to email me if you have any questions, gauntzd@wou.edu.

Adding a dotted line separator to your webpage Using Contribute

Open Contribute and navigate to the page where you would like to add a dotted separator line. Put the cursor where you would like to insert the line.


Hit the return key.


Click on the Styles menu.


Select "separator" from the drop down.


Then click "Publish".


And your dotted separator will now appear.



Please let me know if you have further questions gauntzd@wou.edu or 503-838-8215

jQuery Lightbox

First you will need to save out all your images for the web. You will want the resolution to be 72 and no larger than 900pixels wide or high. You will also need to save out a thumbnail version of your image. It is nice if they are all the same size and same dimension. For example 100pixels by 100pixels and crop them to fit that area.

Then open the page you would like to add the lightbox gallery to in Dreamweaver.

Paste this code right under the <!-- TemplateBeginEditable name="head" -->
 
    <script src="/include_files/plugins/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js" type="text/javascript"></script>
    <link href="/include_files/plugins/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"></link>
 
    <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>

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

Then paste this code where you want the thumbnails to show up and replace the path to the image, description, path to your thumbnail image, and alt tag.

<div id="gallery">
    <ul>
        <li><a href="path-to-your-big-image-goes-here.jpg" title="Description of your image here, which will show up below the image once clicked"><img src="path-to-your-thumbnail-image-goes-here.jpg" width="100" height="100" alt="Description of your image here" /></a>
        </li>
    </ul>
</div>

For each image you have you will want to copy and paste the whole <li> tag. For example if you have four images you will need to have four <li> tags.

        <li><a href="path-to-your-big-image-goes-here.jpg" title="Description of your image here, which will show up below the image once clicked"><img src="path-to-your-thumbnail-image-goes-here.jpg" width="100" height="100" alt="Description of your image here" /></a>
        </li>

        <li><a href="path-to-your-big-image-goes-here.jpg" title="Description of your image here, which will show up below the image once clicked"><img src="path-to-your-thumbnail-image-goes-here.jpg" width="100" height="100" alt="Description of your image here" /></a>
        </li>

        <li><a href="path-to-your-big-image-goes-here.jpg" title="Description of your image here, which will show up below the image once clicked"><img src="path-to-your-thumbnail-image-goes-here.jpg" width="100" height="100" alt="Description of your image here" /></a>
        </li>

        <li><a href="path-to-your-big-image-goes-here.jpg" title="Description of your image here, which will show up below the image once clicked"><img src="path-to-your-thumbnail-image-goes-here.jpg" width="100" height="100" alt="Description of your image here" /></a>
        </li>


View an example of lightbox being used, http://www.wou.edu/las/creativearts/theater_dance/dance/photodance_test.php


Please let me know if you have further questions gauntzd@wou.edu or 503-838-8215