Results 1 to 10 of 10

Thread: Jquery Diamond.js with local image directory

  1. #1
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default Jquery Diamond.js with local image directory

    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.
    _____________________

    David Demetrius // davejob
    _____________________

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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
    Last edited by Beverleyh; 08-28-2014 at 04:24 PM. Reason: revised demos added
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  4. The Following User Says Thank You to Beverleyh For This Useful Post:

    davelf (08-29-2014)

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 08-28-2014 at 08:34 PM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    davelf (08-29-2014)

  8. #6
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    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.
    _____________________

    David Demetrius // davejob
    _____________________

  9. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  10. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. #10
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    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.
    Last edited by davelf; 09-11-2014 at 09:36 AM.
    _____________________

    David Demetrius // davejob
    _____________________

Similar Threads

  1. JavaScript local local time script 24 hr format?
    By eddiy in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-15-2013, 11:07 AM
  2. Replies: 4
    Last Post: 06-04-2010, 03:24 AM
  3. Protect image directory
    By dylanphelan in forum HTML
    Replies: 2
    Last Post: 08-09-2007, 09:46 AM
  4. uploading image into web directory??????
    By unknownman7 in forum Graphics
    Replies: 3
    Last Post: 06-28-2006, 09:58 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •