Posts Tagged ‘JavaScript’

GalleryView jQuery Plugin 2.0 Example

Sunday, January 17th, 2010
GalleryView Plugin Example

GalleryView Plugin Example

Prior to Christmas I came across another list of great jQuery Plugins. This list (11 Amazing JQuery Gallery) contained the GalleryView Plugin which was visually impressive but looked quite simple to implement. The plugin website states that it:

aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

The Plugin website has several demos. These demos show the flexibility of the plugin. As well as the default implementation there are demos that show how to use the Plugin as a LightBox style replacement and even how to create an HTML content panel using the Plugin. It is well worth checking out all of the demos to get a feel for just what the Plugin is capable of.

Worth a special mention is the implementation on the sites evolution page. On this page the GalleryView Plugin is used to show the evolution of the site in pictures during 8 days of development. A great example of ingenious ways to use this flexible Plugin.

I was interested in a simple and visually impressive gallery viewer, but this Plugin delivers more than that. I could see uses for this Plugin when creating dynamic content viewers, work portfolios and much, much more. So time for some implementation…

I begun my implementation by following the usage section on the Plugin sites homepage…and ended up with a complete mess! I had failed to notice the authors note at the top of the page:

this entire page is now out of date, as it talks about GalleryView 1.1. For the lastest version, 2.0, please check out http://plugins.jquery.com/project/galleryview.

Being away from home (with no internet access) for the break I had downloaded copies of the relevant pages. At this time I considered putting my attempts to get the example up and running on hold. This seemed to be a bit of a cop out to me. So I delved into the 2.0 source code in an attempt to determine the markup and styles required. I found the source code quite easy to read and understand, and soon had an almost fully functioning example. I was still having an issue with the filmstrip – so decided to complete the example when I returned from my break.

Implementation

My GalleryView Example

My GalleryView Example

View the example

In order to use the Plugin you need to use the jQuery javascript library, the GalleryView Plugin, the jQuery Timer Plugin and the jQuery Easing Plugin. The dependencies are included in the GalleryView Plugin download. Include these libraries in any pages you wish to use the Plugin.

Only a very simple piece of JavaScript is required to get the Plugin up and running:


<script type="text/javascript">
  $(document).ready(function(){
    $('#photos').galleryView({
      panel_width: 800,
      panel_height: 300,
      frame_width: 75,
      frame_height: 75
    });
  });
</script>

This simple bit of script calls the Plugins galleryView method with a minimum configuration set. Our panel and filmstrip frames will be set to the pixel sizes specified here. There are many more configurations available. If you want to know what configuration options there are check out the 2.0 release notes as well as those listed on the Plugin site.

There are links from the out of date Plugin website (in the comments) to some example of 2.0 code provided by a third party. These links were not working when I tried them. I was able to track down the right pages on the linked to site though. So with a bit of help from this example on appleton.me I was able to create a fully functioning example with the following very clear and concise bit of HTML:

<ul id="photos">
 <li>
   <span>Auckland City from North Head, Devonport</span>
   <img src="../../img/gallery/auckland.jpg" />
 </li>
 <li>
   <span>Lion Rock, Piha</span>
   <img src="../../img/gallery/lion_rock.jpg" />
 </li>
 <li>
   <span>Rangitoto</span>
   <img src="../../img/gallery/rangitoto.jpg" />
 </li>
 <li>
   <span>Fern</span>
   <img src="../../img/gallery/fern.jpg" />
 </li>
 <li>
   <span>River</span>
   <img src="../../img/gallery/river.jpg" />
 </li>
 <li>
   <span>Waves</span>
   <img src="../../img/gallery/waves.jpg" />
 </li>
 <li>
   <span>Piha: Looking towards 'The Gap'</span>
   <img src="../../img/gallery/towards_the_gap.jpg" />
 </li>
</ul>

The example page seems to be the most active page for the Plugin at this time. It even seems the developer has put the Plugin out to seed at this time. Jack Wanders stated on his Twitter account on 6th July 2009:

My apologies, but GalleryView and spaceforaname.com are officially dead in the water until further notice; occupied w/ other matters atm

Hopefully either he or someone else will pick up the Plugin as it certainly does have some great uses. If you are aware of the latest news related to the Plugin please let me know.

One thing I would particularly like to see is the IE7 Panel Overlay fade in/out issue fixed sometime soon (maybe I should do that myself after delving in to the source code) as I feel this could be a ‘BLOCKER’ for production uses. Setting the panels to not fade and switch instantly is a workaround in most situations.

Lists of other jQuery Gallery Plugins etc I have come across:

If the GalleryView Plugin doesn’t meet your needs or is not your cup of tea, maybe you will find something in these lists that does.

Purchase JQuery In Action 2nd Edition MEAP Edition

Purchase JQuery In Action 2nd Edition MEAP Edition

Tags: ,
Posted in JQuery, Tips | Comments Off

Picasa Photo Stream Slivers using JQuery – Part 2

Sunday, August 16th, 2009

This post continues on from Part 1. So if you have not read that, you may want to do so before continuing.

After completing the steps in the previous blog we now have a set of photo album thumbnail images. We shall now add the links that will then open up the Picasa Web Album

Appending the following to the displayed images code does the job for Picasa Web Albums:

.wrap("<div class='imgholder'><a href=" + item.link[1].href + "></a></div>");

So the complete code for the displaying of the album thumbnail images and links to them becomes this:

$jq("<img/>").attr("src",item.media$group.media$thumbnail[0].url)
  .appendTo("#images")
  .wrap("<div class='imgholder'><a href=" + item.link[1].href + "></a></div>");

Next we will add some styles to the images and the holder. Add the following code:

#images {
  overflow:hidden;
  height: 160px;
}
.imgholder {
  overflow:hidden;
  width: auto;
  float: left;
  border-right: 1px solid white;
  background: black;
  height: 160px;
}
.imgholder a,
.imghover a:hover,
.imghover a:hover img,
.imgholder a img {
  margin: 0;
  padding: 0;
  border: 0;
}

This code adds a fixed height to the images panel, floats the image container divs to the left inside the images panel and prevent margin/padding inheritence. When adding this widget to any other page you may need to clear:left at the bottom of the images panel. If you need to do this add an empty div with the id of imgholderend and add this code at the end of the styles:

.imgholderend {
  clear:left;
}

Now it is time to animate the images. First up we set the images that are not the first one to slivers of 10px wide and then add the JQuery code that animates the slivers. This code comes after the image loop code.

  // Set up the image container divs to collapse
  $jq(".imgholder").not(":first").css("width","10px");

  // Add the container mouseover event function
  $jq(".imgholder").mouseover(function() {

    // Make every image other than the one being mousedover small
    $jq(".imgholder").stop().not(this).animate({width:"10px"});

    // Make the currently active image big (set width to image width)
    $jq(this).animate({width:$jq(this).find("img").width()+"px"});

  });

Loading this code into the browser now should show you the Picasa Photo Stream slivers. Mouse over the images and they should animate to expand the currently moused over sliver.

Now that this code is working we can add it to a WordPress sidebar widget.

The first thing to check is that JQuery is enabled for your theme. For the default theme this means updating the call PHP in the header.php where wp_head() is called to the following:

<?php
  wp_enqueue_script('jquery');
  wp_head();
?>

The next thing is to add a text widget and add the Javascript code and the image holding divs we have developed over the 2 blogs:

<script type="text/javascript">
var picasaFeed = "http://picasaweb.google.com/data/feed/base/user/psellars?alt=json&kind=album&hl=en_US&callback=?";
var $jq = jQuery.noConflict();

$jq.getJSON(picasaFeed,function(data) {

  $jq.each(data.feed.entry, function(i,item) {
    $jq("<img/>").attr("src",item.media$group.media$thumbnail[0].url)
      .appendTo("#images")
      .wrap("<div class='imgholder'><a href='"+item.link[1].href+"'</a></div>");
  });

  // Set up the image container divs to collapse
  $jq(".imgholder").not(":first").css("width","10px");

  // Add the container mouseover event function
  $jq(".imgholder").mouseover(function() {

    // Make every image other than the one being mousedover small
    $jq(".imgholder").stop().not(this).animate({width:"10px"});

    // Make the currently active image big (set width to image width)
    $jq(this).animate({width:$jq(this).find("img").width()+"px"});

  });

});
</script>
<div id="images"></div>
<div id="imgholderend"></div>

..then add the CSS to your theme CSS. On WordPress this can be found in Appearance then Editor from the menu. The CSS to add is thus:

/* Picasa Web Albums Extra */
#images {
  overflow:hidden;
  height: 160px;
}
.imgholder {
  overflow:hidden;
  width: auto;
  float: left;
  border-right: 1px solid white;
  background: black;
  height: 160px;
}
.imgholder a,
.imghover a:hover,
.imghover a:hover img,
.imgholder a img {
  margin: 0;
  padding: 0;
  border: 0;
}
.imgholderend {
  clear:left;
}

That is it, you should now have a Picasa Web Album widget like that in the sidebar of this blog’s main page.

Hopefully you found this a useful blog – having written it I am considering writing such blogs more as articles on my website rather than blogs going forward. Makes more sense to me to blog about issues/little bits and pieces I have experimented with rather than these article type blogs.

Tags: , , ,
Posted in JQuery, PHP, WordPress | Comments Off

Picasa Photo Stream Slivers using JQuery – Part 1

Sunday, August 16th, 2009

[ The Picasa Photo Stream Slivers can be seen on the main page of this blog]

Inspired by an article I read in issue 155 of Web Designer and the fact I have recently been taking lots more digital photos I recently undertook to implement a photo stream sliver display using JQuery from my Picasa web albums.

So after creating a base html test page my first task was to get the JSON feed from Picasa. This turned out to be:


http://picasaweb.google.com/data/feed/base/user/psellars?alt=json&amp;kind=album&amp;hl=en_US

Obtaining this JSON field was quite  simple, being almost the same as with the Flickr feed the magazine article used. For Flickr it is a simple case of grabbing the RSS feed for the album you want to use and replacing format=rss_200 with format=JSON. Obtaining the Picasa feed just as simple, replacing alt=rss with alt=json.

First things first is to include the JQuery script into the page. When I was creating this example I was using JQuery 1.3.2 so using the compressed version this is a simple matter of including this library in a script tag.

<script type="text/javascript"
  src="js/jquery-1.3.2.min.js"></script>

The slivers work by loading data dynamically into the page. I chose to do as per the article and include the images into a div element. This element was provided with id ‘images’ and added to the body of the page.

<div id="images"></div>

Now to the JQuery code in earnest. The first thing to do is grab the raw data from the feed.  JQuery has a built-in function to grab a JSON feed dynamically which loads the information from the feed and creates instances of the objects contained inside. The getJSON JQuery method call required looks like the code below, another thing to keep in mind is that this code is intended for a blog post – so we will not be using the ‘$’ for JQuery.  (Click here for more information on using JSON with Google Data API’s)

var $jq = jQuery.noConflict();
$jq.getJSON("INSERT_YOUR_FEED_URL_HERE&callback=?",
  function(data) {
    $jq.each(data.feed.entry, function(i,item) {
      // do something with each item!
    };
});

As can be seen from the code extract above the feed.entry element of the Google JSON feed contains the items we want to do things with. In this case each entry represents a Picasa web album.

In order to display the actual web album cover photos we use the following line in the script executed for each entry in the feed.

$jq("<img/>")
  .attr("src",item.media$group.media$thumbnail[0].url)
  .appendTo("#images");

This code creates an image and assigns the value of the group.media thumbnail url to the src of this image. This adds the album cover as the source of the image.

Loading this page into your web browser should display you the album covers related to your feed.

In Part 2 of this blog links to the albums will be added, some styling applied  and  a website widget created.

Tags: , , ,
Posted in JQuery | Comments Off