Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to implement checkboxes for filtering a randomly generated image gallery?

    I am familiar with the basics of html, JavaScript, and CSS so I'm mainly looking to be pointed in the right direction before I inevitably stumble around.* This may require jQuery but I honestly have no idea.

    Basics: I want to design for my portfolio site a scrolling tiled layout, with a static menu on the side.

    Not so basics:

    1.* I want the images to be randomly generated, or at least, randomly ordered from my folder of images.
    2.* I want to have a random size adjustment (75-100%) so that when they tile, it will be a staggered tiling.* I.e. no distinct rows/columns.* This may only work out in one orientation without more coding...
    3. In my menu on the side, I want checkboxes for various photography categories I.e. architectural/fashion/portraits. The site starts with an "everything" checkbox, so the visitor is greeted by the entire portfolio in a random array, but as soon as they check "fashion," all images not tagged fashion disappear and only fashion related images slide over.* Or if they then check architecture all the architecture images reappear in the array.

    Is there a best practice implementation of 1,2, and 3?

    One issue I see is that with a random array of continuously scrolling images is that in html, they'd all have to load at once, wouldn't they?* I couldn't prevent offscreen images from loading until they were visible without some more clever coding.

    And 4, is there any better way of thumbnail management that is not manually creating thumbnails for every image?* There really isn't a way to dynamically resize jpegs in such a way that the full size doesn't have to be loaded first, at least, by the visitor?* I guess something like that would have to be server side...

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,098
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    What does a "scrolling tiled layout" look like?
    I also don't understand the "staggered tiling" you refer to later.

    Can you provide an HTML only example of the display you desire?
    Possibly a link to some of the images you are trying to display?

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Re: Staggered Tiling:
    See the gallery layout for this template of a 4ormat site:
    Frontier Theme - 4ormat

    See how instead of a regular grid, the tiling is offset by the lengths of the images? There are no specific rows, but columns still exist.

    Hmmm....I just found this:
    http://final-tiles-gallery.com/

    Maybe that's what I want to implement.

  • #4
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dang, it's actually almost exactly what I want:
    Infinite scrolling
    Tiled Layout without distinct rows/columns
    Filtering

  • #5
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's just $14...but I suppose I better learn how to do it before I implement it!

  • #6
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I suppose now I'll just look up how to create a php file to dynamically create the image gallery from a series of folders so I don't have to manually enter every image and category.

    That shouldn't be too difficult, right?

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,400
    Thanks
    11
    Thanked 595 Times in 575 Posts
    #1 needs a basic php script to read a folder, find the images, and spit out either HTML to inject into the page or JSON to talk to a JS client gallery builder.
    #2 use css classes for this, applying a random class (like lil,orig or big) to each image tag, and adjust in css to match. fancier stuff like isotope and masonry can do this as well.

    i would take care of #3 using mostly css. each checkbox toggle a specific data-attrib on the <body> tag, and that triggers css to show/hide other tags.


    for example:
    Code:
    <body data-cars=false data-bikes=false data-planes=false >
    
    <h3>Choose Categories:</h3>
    cars <input type=checkbox onchange="document.body.dataset.cars=this.checked;"><br/>
    bikes<input type=checkbox onchange="document.body.dataset.bikes=this.checked;"><br/>
    planes <input type=checkbox onchange="document.body.dataset.planes=this.checked;"><br/>
    
    
    <p class=cars>1234567890</p>
    <p class=cars>0987654321</p>
    <p class=bikes>1234567890</p>
    <p class=bikes>0987654321</p>
    <p class=bikes>1234567890</p>
    <p class=planes>0987654321</p>
    
    <style>
    body[data-cars='true'] .cars ,
    body[data-bikes='true'] .bikes,
    body[data-cars='planes'] .planes { display: block; }
    
    body[data-cars='false'] .cars ,
    body[data-bikes='false'] .bikes,
    body[data-cars='false'] .planes { display: none; }
    
    </style>
    
    </body>
    this lets you do the heavy lifting in css and independently toggle many elements at once.
    not only can you show/hide, you can embolden the current items, etc, all in simple CSS.


    #4: you can do a batch resize in photoshop, and i think pixlr has a tool as well.
    you can also use a simple thumbnail maker i whipped up at http://danml.com/resizer/ (tested in chrome)
    Last edited by rnd me; 03-27-2014 at 06:10 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #8
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Re: #4 I may implement something like phpThumb() - The PHP thumbnail generator but combine it with a php directory search so that I can just dump images in a folder and not have to worry about resizing them even using a batch process

    But thanks for the sample re:3, using classes was along the lines of what I was thinking but I just didn't know the best "hide" method.


  •  

    Tags for this Thread

    Posting Permissions

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