Subtext Galleries, using jQuery for funk

A while back I was planning to move all my galleries to flickr instead of using subtexts built in functionality.  Unfortunately I haven’t had time to implement a couple of new flickr controls for subtext.  I was thinking about creating a gallery provider but time isn’t on my side so it’s been canned for now.

I have been playing about with the GalleryThumbNailViewer.asc control that can be found in your skin directory that has resulted in the following.  When the images are loading the user is shown a loading message.

What is happening in the background is that when the document structure is loaded the div is displayed.  When all the images have loaded a document ready event is fired that then hides the div. 

You may be surprised that this is accomplished by a couple of lines of javascript that uses the jQuery library.

 

Control Code

 At the top of the control under the <%@ %> line I added the following

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#Loader').show(); 

}); 

window.onload = function(){
$('#Loader').hide();
jQuery.noConflict();//Only add this if you use lightbox
initLightbox();//Only add this if you use lightbox

}; 

</script>

Then just under the <div id=”Gallery”> line I added the following:

<div id="Loader" style="display:none;height:50%;background-color:pink;
border:1px solid red; width: 70%;top:200px; text-align: center;
font-size: 30px;opacity: 0.8;position: absolute;top: 20px;
-moz-border-radius:10px;">
<p style="color:red;margin-top:150px">
Loading Photographs please wait...</p></div>

That’s it.  Have a look yourself.  I have added it to my galleries 🙂  Please note the lightbox comments.  If you don’t use lightbox in your galleries then you don’t need those two lines.

There are alot of developers out there that use jQuery for the javascript library needs and I am one of them. Previously I have written 2 articles using jQuery in conjunction with an onclick event on a radio button list:

1. Adding a Javascript onclick event to a Radio Button List Item on DataBound
2. Adding a Javascript onclick event to a Radio Button List Item on DataBound Pt 2

 Before attempting changing anything please make sure you have a backup…