shepline creative

Posted here for my own reference because the instructions for the WordPress Lightbox Gallery plugin are in Japanese:

How to use
How to use the Lightbox Gallery, WordPress 2.5 has essentially been built since the galleries are the same. Register for more photos, simply insert the tag below post. Photo captions, mouse over the image coming tooltip (tooltip) appears as a description of the photograph that appears when Lightbox is displayed.

Advanced Settings option is available to all short codes. For more options, WordPress 2.5 image using the list of new features galleries want to see. Here, in addition to the standard option, Lightbox Gallery added in explaining the options.

• lightboxsize
  Lightbox lightboxsize specified by size is displayed. By default, the medium has become, full can also be specified.

  [Gallery lightboxsize = "full"]

• meta
  meta specifies whether to display information about the accompanying photo. Has become false by default, does not appear. If you want to specify is true. Information accompanying the photos, the camera model, aperture, focal length, ISO, shutter speed, the time taken to display in Lightbox.

  [Gallery meta = "true"]

• class
  To add an attribute class is the class gallery. Gallery1 is a default.

  [Gallery class = "gallery2"]

• nofollow
  rel = “nofollow” to add. The default is a false.

  [Gallery nofollow = "true"]

• from, num
  To view images from the position, num is the number of images to be displayed. The following example displays the images from the image’s third five.

  [Gallery from = "2" num = "5"]

• pagenavi
  num navigation image is displayed depending upon the number of images used. pagenavi set to 0, and not showing navigation. For navigation, wp_link_pages same options are available.

  [Gallery num = "10" pagenavi = "0"]

Whilst rolling out a new, spruced up, clean site design to my own website that conforms to both XHTML Strict DTDs and CSS 2.1, I encountered a conflict with the javascript scripting involved with the Lightbox that I was implementing. Although the pages continued to validate against the DTD and the CSS was similarly fine, and indeed in Firefox and some instances of IE8 there were no display problems. However in some instance of IE8, having the lightbox running on the page caused some elements of the page to not load correctly, and for the footer to not display at all. Further more I had the KB927917 error from Microsoft which was as inconprehensible as these things usually are.

By systematically deactivating the various scripts running on the page, I tracked down the problem to the Twitter provided javascript code.

I’ve now put in place a new Twitter feed service, which has the advantage of both working with Lightbox and having an option to abort loading tweets if the site is down (something which was causing a problem during recent twitter outages).

Details

You can see the scripts in action here.

Installation instructions

These are ammended for my install (you can see the original instructions and download the scripts here):

Container HTML

You need to insert a holder element for the twitters to go in to. In the example above, I’ve included some ‘waiting to load’ content – but you don’t have to.

Here’s what I did:

<div id=“tweet”>
 <p>Please wait while my tweets load <img src=“/images/indicator.gif” /></p>
</div>
<p><a href=http://twitter.com/yourtwitterusername>If you can’t wait – check out what I’ve been twittering</a></p>

Here are some more progress indicators.

If you include contents inside the holder div, then you’ll need to set the ‘clearContents’ flag.

Add the script

You should download the twitter.js script, and add the following code within the head or (best at the bottom of the) body tag:

 (this example will generate my twitter status in quotes on a single line with the ‘ago’ linkable back to the original twitter post)

<script src=“http://yourdomain.com/includes/js/twitter.js” type=“text/javascript”></script>
<script src=“http://yourdomain.com/includes/js/twitter.tweet.js” type=“text/javascript” charset=“utf-8″></script>

Create a file called twitter.tweet.js and paste the following code into it:

getTwitters(‘tweet’, {
  id: ‘yourtwitterusername’,
  count: 5,
  enableLinks: true,
  ignoreReplies: true,
  clearContents: true,
  template: ‘%user_name% %text% <a href=”http://twitter.com/%user_screen_name%/statuses/%id%/”>%time%</a>’
});

Note that the getTwitters function will execute after the page has been loaded by your browser. It will fire once the DOM is loaded but before images are loaded.

And your’re done!