Usage

Now, this is tricky part 🙂 Basicly you should add your images, minding naming rules <div id=”img-holder”> <div class=”gallery-item”> <img src=”/web/20110325073247im_/http://dragan.yourtree.org/projects/canvas-gallery/001_s.jpg” id=”img001″/> <canvas width=”77″ height=”77″ id=”canvas001″/> </div> <div class=”gallery-item”> <img src=”/web/20110325073247im_/http://dragan.yourtree.org/projects/canvas-gallery/002_s.jpg” id=”img002″/> <canvas width=”77″ height=”77″ id=”canvas002″/> </div> <div class=”gallery-item”> <img src=”/web/20110325073247im_/http://dragan.yourtree.org/projects/canvas-gallery/003_s.jpg” id=”img003″/> <canvas width=”77″ height=”77″ id=”canvas003″/> </div> So, first image thumb is 001_s.jpg and larger […]

Now, this is tricky part 🙂
Basicly you should add your images, minding naming rules

<div id=”img-holder”>

<div class=”gallery-item”>
<img src=”/web/20110325073247im_/http://dragan.yourtree.org/projects/canvas-gallery/001_s.jpg” id=”img001″/>
<canvas width=”77″ height=”77″ id=”canvas001″/>
</div>

<div class=”gallery-item”>
<img src=”/web/20110325073247im_/http://dragan.yourtree.org/projects/canvas-gallery/002_s.jpg” id=”img002″/>
<canvas width=”77″ height=”77″ id=”canvas002″/>
</div>

<div class=”gallery-item”>
<img src=”/web/20110325073247im_/http://dragan.yourtree.org/projects/canvas-gallery/003_s.jpg” id=”img003″/>
<canvas width=”77″ height=”77″ id=”canvas003″/>
</div>

So, first image thumb is 001_s.jpg and larger size is 001_m.jpg and so on. (Yes, exactly like on Flickr)

Then in canvasGallery.js add reflections to all that images and set scroll speed.
(combination of timeout and step)

view plaincopy to clipboardprint?
Gallery.addItem(‘001’);
Gallery.addItem(‘002’);
Gallery.addItem(‘003’);
Gallery.addItem(‘004’);
Gallery.addItem(‘005’);
Gallery.addItem(‘006’);
Gallery.addItem(‘007’);
Gallery.addItem(‘008’);
Gallery.addItem(‘009’);

//set scroll options (timeout,step)
$(‘img-holder’).setFXOptions(40,4);

Leave a Reply

Your email address will not be published. Required fields are marked *