Looking for some advice on a filter-gallery functionality

  • Sieg

    (@harrismaynard)


    12 years, 2 months ago

    Hello!

    I’ve been working with wordpress building sites for clients for a couple of years, and I have a lot of experience with tweaking layouts and their css for the most part. I can code html and css comfortably enough, though I usually use Adobe Muse for non-CMS related projects, and I’m somewhat familiar with php and jquery. I’ve gotten through a few projects heavily modifying the php of a couple of different layouts, so my confidence in my ability to get the end result is pretty strong.

    Now that you know about me, what I’m trying to do is a rather unique image gallery setup. The layout is a fixed sidebar on the left and a responsive gallery to the right. This gallery would be several dozens/hundreds of thumbnails all at a fixed height but varying widths, and all images would be aligned to the left and covered with a 50% black overlay. This would be like an infinite gallery so it loads quickly. There will be a list of several categories on the left hand sidebar, and when you hover over the category the overlay will be removed from those thumbnails in the gallery on the right hand side, giving it a ‘highlight’ effect. When the category is clicked, it will open a gallery page of just those images on a carousel type setting. This second carousel gallery is not a problem for me to make, but the hover-over-category-name-to-highlight-those-images seems difficult.

    I’ve done a lot of research and found some portfolio gallery plugins I would be glad to purchase that do almost what I want, but none have the “trigger/category name” on the left hand side, always at the top. Most of these plugins require a fixed image width as well. I would like the rows of images to be responsive.

    I’m thinking this may be able to be achieved by having a page of posts that are all floated left with no borders or spacing between, but the last piece of the puzzle is that highlight-hover feature. Could somebody please point me in the right direction for this? I know it may be a lot of work, but I’ve got to get it done and I’ll learn anything I need to. I just want the most effective way of doing what I’m talking about. I know this can be done, I just need to have a good idea of how to execute it.

    Thanks in advance, and I’m sorry if I’m being super vague. I can make a design mockup if you wish. I could even make the pages from scratch with all the functionality I need, I just need the content to be able to be changed without changing the whole site, so that’s why I’ve come here. Please let me know!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    12 years, 2 months ago

    I think the key is the class of each thumbnail container needs to include the thumb’s category. Something like this for a “Waterfalls” category:
    <dt class='gallery-icon portrait waterfalls'>

    All the various categories have the 50% overlay by default. On the mouseover event of the Waterfalls label, javascript removes the 50% overlay for the class ‘.waterfalls’. On mouseout the overlay is restored.

    How to get that category into the class attribute would depend on what code is generating the thumbnail containers. Some themes provide a filter for class attributes, so doing so is easy. Some other gallery scripts offer nothing so you need to override the entire thing to do this.

    If inserting a class attribute is not possible, maybe wrapping the image in another nested container will do the trick. It all depends on what script you’re working with.

    Thread Starter Sieg

    (@harrismaynard)

    12 years, 2 months ago

    What has been done so far unsuccessfully by another developer is located at pangaearock.com and pangaearock.com/demo. This has the highlight functionality, but the way everything loads is very erratic and it fails to load an image gallery when you click (/demo does, but I do not have access to that wordpress). Not only that, I’d like it to lazyload, but the plugin seems to have no effect. Any help you can provide or pointers would be appreciated.

    Moderator bcworkz

    (@bcworkz)

    12 years, 2 months ago

    I’m not sure how well lazy load will work when a roll over on the menu scrolls to the related picture. If it scrolls to the bottom, I think most lazy load scripts would need to load everything above. Script that just loads what’s on screen could get very messy. The page will load a lot better if you use dedicated thumbnail images of a fixed size and optimized for small file size, instead of scaling the larger size image. Also specify the image size in the image tag so the page does not need to re-flow when every image is loaded.

    I’ve no idea about the image gallery, my guess is it’s not enqueued properly, it’s easy to do it wrong.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Looking for some advice on a filter-gallery functionality’ is closed to new replies.