Jquery Diamond.js with local image directory

[davelf]

I find this script that change the image into a diamond shape, but the script demo use flickr API as image source.
So how to implement this script using local image directory?
I know there's a documentation, but after a couple trial and error, it seems i can't make it work like the demo.

http://mqchen.github.io/jquery.diamonds.js/

Thanks.

[Beverleyh]

I haven't used the script personally but this tutorial here just looks to use a div (with id) with anchor tags listed inside. http://www.jqueryscript.net/layout/F...amonds-js.html

No mention of a Flickr API on this occasion so I'm guessing that img tags (or anchors, or whatever) can be placed inside a div, and as long as there's an id/class, the script can be invoked upon it. Maybe you could even try it with an unordered list, setting background images on each li and floated left?

There's a bit more info and a demo in the git - maybe that will help too https://github.com/mqchen/jquery.dia...ster/README.md

If you need more help, post a link of what you have so we can take a look.

[Beverleyh]

As an alternative to jQuery, I've made some CSS-only versions of the "Diamond Grid";

This one allows images to break out of the grid and flow to the next line - their size remains constant: http://fofwebdesign.co.uk/template/_...amond-grid.htm

This one scales fluidly so the grid never breaks - the images just get smaller: http://fofwebdesign.co.uk/template/_...grid-scale.htm

EDIT: The first time I looked at the jQuery demo, I got an album of generic patterns, but when I looked later, it loaded an album of photos. Now I see that the images are vertical and not rotated 45 degrees, so I have made 2 more demos where the images are vertical inside of their diamond/rotated containers;

On browser resize, images can break out of the grid and flow to the next line - their size stays the same: http://fofwebdesign.co.uk/template/_...grid-v-img.htm

On browser resize, the grid scales fluidly - no image breakout - images resize: http://fofwebdesign.co.uk/template/_...cale-v-img.htm

[jscheuer1]

Another thing you could do is set up the demo with the flickr interface. Comment out the external script tag for diamond.js and it's initialization. Look at the page via a DOM inspector and see what the generated markup is in the flickrItems div.

[jscheuer1]

Wow, Beverley! I was looking at your demos and they're very impressive. I also decided to go ahead and do what I had suggested. The result is a more or less bare bones demo which uses the script and the flickr images without using the flickr interface (meaning you can substitute your own images):

http://home.comcast.net/~jscheuer1/s...ondjs/demo.htm

You can use your browser's 'view source' to see the fairly well documented code.

It requires the jquery.diamonds.js and diamonds.css files. Oh, and jQuery itself of course. I added some on page style in an on page stylesheet. Some of that appears required as well, I marked it as such. Once you've established your wrapper div, just fill it with ordinary links to your larger images. Set each link's class name to the itemSelector ('item' in this case) as configured in the init (found at the end of the page's source code). Each of these links should have its background-image set to the desired thumbnail for that link. That's it.

[davelf]

Thank you so much for both of you, the example works.
The project i'm experimenting right now meant for my portfolio website, the concept like in the screenshot below:


so my next task is, to combine the mansory jquery for sorting and the fancybox / dom jquery to show detail images.
That's why i need the image call from local server not API.

[Beverleyh]

No problem. The diamond grid looks really effective - definitely more interesting than a standard grid of images. Good luck with your new site!

Thanks for the compliment too John

[jscheuer1]

Quite welcome both of you. Um, if you want to launch a fancybox from some or all of the diamonds, you would probably be better off using one of Beverley's non-javascript demos so that you could just use the ordinary fancybox syntax/coding on links or other elements inside a CSS 3 diamond matrix of images. You could use the diamonds script, but you would have to initialize it first then fancybox, or use jQuery's .on() (which listens to events and determines what to do with them based upon the target, rather than setting events on certain elements before hand) to activate the fancybox.

If you want some help with any of that, show us what you have. Which version of fancybox are you using for this? How important to you is it that you stick to that version? Would another box script be OK?

[jscheuer1]

Combining the two scripts doesn't seem as hard as I thought it might be:

http://home.comcast.net/~jscheuer1/s...ndjs/demo2.htm

I took away the background images from the code and added them back later via jQuery. Since these are resized by the css, and my full size images weren't huge, I used the full size images as the background/thumbnails. This had the side effect of preloading them for their eventual appearance in the fancy box, but slowed the initial page load slightly. Ideally thumbs would be the exact dimensions (or as close as practical) required and smallest byte size possible.

[davelf]

Hi John & Beverleyh,

New Update : http://davejob.com/diamond/
It's still scratch, but i already combine some jquery, diamond, lazyload, fancybox, customize scroll.
But i have problem with sorting/filter, i'm try to combining the isotope filter but the diamond js seems crash when the two combine.

Any idea to solve this. Thank you so much.