Image Gallery Phase 1: Rotating Images

I launched my beta version of image gallery to Google.

Background

This image gallery is inpired by Aza’s Raskin Image Gallery design. This image gallery is still far from completion. The jquery needs a huge amount of refactoring.

CSS Magics

CSS 3 is loaded with very cool functionality like rotating images. I used CSS 3 rotation to rotate the images in my image gallery

<pre>-moz-transform  rotate(0deg)</pre>

Example:

<img  src="img/namecard.jpg" style="top: 70px;left: 50px;position:absolute;-moz-transform:rotate(0deg);z-index: 4; " alt=""/>

The little shadow behind each image is done using CSS:


-moz-box-shadow:0pt 0pt 5px rgba(0,0,0,0.5)

JQuery Scripting

Benjamin Sterling’s amazing  jquery plugin shuffles the photo stacks when you click on them. There is a little bit of tweaking that I need to do in order to maintain the top and left position of the image at 70 px.


line 13: var $this = $(this), $els = $this.children().css({left:70,top:70}), els = $els.get();

line 65: $el.animate({left:70, top:70}, cb);

I used jQuery Animation Easing plugin to create a bouncing effect when we spread the images. I need to manually put the easing function:


bounceEaseIn:function(p, n, firstNum, diff) {

var c=firstNum+diff;
var inv = this.bounceEaseOut (1-p, 1, 0, diff);
return c - inv + firstNum;
 },

 bounceEaseOut:function(p, n, firstNum, diff) {

var c=firstNum+diff;

if (p < (1/2.75))
{
return c*(7.5625*p*p) + firstNum;
}
else if (p < (2/2.75))
{
return c*(7.5625*(p-=(1.5/2.75))*p + .75) + firstNum;
}
else if (p < (2.5/2.75))
{
return c*(7.5625*(p-=(2.25/2.75))*p + .9375) + firstNum;
}
else
{
return c*(7.5625*(p-=(2.625/2.75))*p + .984375) + firstNum;
}
 }

into jQuery core script because it clashes with Ben’s shuffle script when I simply linked the easing script in my HTML page. I have a feeling I did something wrong here. I should be able to use the easing script just by linking the script in my HTML page, e.g:


<script type="text/javascript" language="javascript" src="script/easing.js"></script>

What’s next

I seriously need to refactor the functions that I wrote to spread the images. I also need to implement a secondary image stacks when there are too many images.

Share

Advertisements

About zainul franciscus

Hi, I am a software developer and tech blogger who is currently living in Wellington, New Zealand. I write stuff that I find interesting on
This entry was posted in nu-lightbox, programming, web development and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s