Thursday, April 8, 2010

Blogspot jQuery gallery

Today i'm going to create one thing with blogger.

Want to make a gallery for blogger.

First of all i've reviewed text which was generated by Blogger when i insert images. And then few hours of coding made rough, but useful gallery for Blogger. Anyway, due to limitations of blogger itself code looks like an in&*an one. Later i will check checked where i can host all of the plugins i've used here, together with library for user-friendly usage. Now i'm going to make same easy thing for Picasa.

Limitations:

  • It's for blogger only
  • After editing a page you need to put your JS code again.
  • You need to know basics of HTML. If you want to order your photos.
  • You need to know CSS. If you want to style your gallery.
  • You need to search for "change 'medium' to x-small, small, large or x-large to enlarge image" comment in javascript to change size of image

For now you need to do the following:

  1. Make an empty post and add images there.
  2. Write all text. you want to have in your blog post.
  3. If you want captions like you see in example below you need to add "alt" property to the image or "title" property to link around image.
  4. Add this huge small code:

Configuration:

  • Biozshock.blogspotImages.render([thumb-size], [large-size], [yoxview-options]);
  • Image sizes:
    x-small
    small
    medium
    large
    x-large
  • YoxView documentation is here
  • If you want to style image previews, just override CSS file

Libraries used:

Do hard work! Eat a little chease Eat more grass Hm, I think it's too bog for me Oh, yeah, it's and eden!

9 comments:

  1. Just came across this today. I have it implemented on a test blogger right now and it is not working. When I click on an image, it simply loads by itself in the window. No lightbox effect or anything. Any help?

    Also, do you know a way this can be used with the YoxView plugin to pull from a Flickr or Picasa album? Thanks so much!

    ReplyDelete
  2. Need to have a look in it. You can use Fixrefox+Firebug or Google Chrome developer tools to check for errors.
    As for Flickr or Picasa - they are have an API for pulling images, but as far as i know they need to have server-side programming.

    ReplyDelete
  3. just what i was searching for but just wanted to know that How the images are being linked to Yoxview ?

    ReplyDelete
  4. Can you provide a Download link to the above Yoxview version, and can you try this stuff with the latest version

    ReplyDelete
  5. You can check out download link into sources.
    http://mod-s.narod.ru/scripts/yoxview/jquery.yoxview-1.2.min.js

    ReplyDelete
  6. Please provide a link to the Download package of your version of Yoxview

    ReplyDelete
  7. Man, are you serious? I gave a link in a comment above :)

    ReplyDelete
  8. It doesn't work on my blog and I can't change the CSS either :/

    ReplyDelete