castlecode

castlecode supports this item

Supported

This author's response time can be up to 1 business day.

766 comments found.

Purchase code: d77ec213-42cd-4094-9cf1-94e8881a66a2

Hi – could I pay you to give me a specific example as to how to cleanly apply the Multiple (3) Filter version to the Masonry Gallery (or the Boxed Gallery) to allow me to use thumbnails to link to larger image versions as well as to enable video playback from either local files or Youtube/Vimeo? In other words, a dynamic lightbox for about 1,000 thumbnails linked to either images or streaming video – without using PHP?

Frankly, I would have thought that this multi-filter, multi-media capability would have been a primary example template, as it is one of your defining features, but for some reason you chose the shapes/symbols approach which doesn’t seem close to what people would use in the real world, although it is fun!

My project involves 9 major divisions (eg. Adventure, Parks, Sports, etc.) each divided by 3 areas (East, Central, West) where the recorded activities occur, and then these would be defined by media as either Image or Video.

So 3 filter fields, left to right: DIVISION-> AREA-> MEDIA.

Each major division would also have a related range of Types….for instance, SURFING would be an activity type under the Adventure division, but not under any other division…I was trying to think of a way to have those images sort dynamically, but nothing has come to me yet.

I’ve had some “limited” success very crudely merging the Multiple Filter into the Masonry gallery…see www.exploresooke.com/es-gallery.html. The top left box links to a youtube video, which generates a suitable thumbnail in the thumbnail column. However the search functionality doesn’t seem to work – choosing “indoors” doesn’t remove the other images. I presume the two filter routines are fighting each other.

Finally, is there any way to streamline the process of adding images (I bought a Mobirise 4.3 package and it is relatively smooth in terms of adding, but it doesn’t do the thumbnail list or more than a single keyword filter) beyond directly editing the code for each item, manually generating each individual thumbnail and then specifying its actual dimensions in the code?

Thanks!

Hi,
here are the fixes for each issue:

1) about the “grid2” you can erase that, that was for the boxed gallery, which you have erased

2) the filters and the search are behind the gallery, and that’s because you are missing a closing div, so right before this:

<div id="grid">
add this:
</div>


3) In order to fix the 2 columns thing, add this CSS:
body{
    overflow-y: scroll;
}


4) About the mini-thumb from youtube, I’ll check with fancybox as it seems that not always the thumb is correctly pulled from youtube, but meanwhile you can set the mini-thumb manually with the “data-thumb” attribute, like this:
<div class="media-box-image mb-open-popup" data-src="https://youtu.be/_OYzkIObtgs" data-thumb="http://www.exploresooke.com/gallery/thumbnails/thumb-37.jpg">


5) about the your html not working locally, I’m not quite sure, but maybe the page is not finding the files for the plugin, you currently have the paths for the plugin files like this:
"../plugin/
try removing the ../ and leave it like this (replace all instances):
"plugin/


I hope it makes sense :)

Thanks, David – you’ve been absolutely amazing…this was a great purchase (I’ll buy another license as soon as I’ve sent this).

5 was just an error in the bootstrap directory path that I didn’t spot, right at the end. #4 I didn’t make the change as that line was already in the .css file. It’s all close enough to what I had in mind, and it seems to run very fast.

I discovered that using an animated GIF allows me to put in placeholders for the video clips that really get attention. They animate in the sidebar as well, which is pretty cool.

So I’ll have to look for a program that makes really small animated GIF’s from about 10 seconds of youtube video (any thoughts?).

And I just have to ask – how do you get your images and thumbnails so small??? Obviously with hundreds of images I’ll have to figure out something efficient to keep the web page loading speed bearable.

I normally use Irfanview but it doesn’t come close to the quality/size results that your sample demonstrates (crystal-clear 150KB main images that are 1300×900, and 750×500 thumbnails that are just 30KB)

Thanks again!

Hi,
thank you :D

the GIF idea sounds cool, although I don’t have experience creating gifs, so I can’t be of much help there.

for the demo images I used photoshop (the “save for the web” option), there’s a quality option that you can play around, I used around 50%-60%

I hope it helps :)

I think there is a conflict between the js from your plugin and another. If you go here: http://dallascreative.co/crowded/crowded-test/final_crowded_main.html and click “connected”, it opens up another simpler gallery, but it doesn’t show up unless I resize the browser window. Then clicking “latest” does the same thing with the original gallery. Do you know what might be causing this issue?

It made the galleries in the second and third sections disappear. I left the code in the page, but can’t figure out why they’re gone. http://dallascreative.co/crowded/final_crowded_profile_owner.html
try with this one:
$('#grid1').mediaBoxes({
    boxesToLoadStart: 8,
    boxesToLoad: 6,
    columns: 3,
    horizontalSpaceBetweenBoxes: 5,
    verticalSpaceBetweenBoxes: 5,
    deepLinkingOnPopup: false,
    deepLinkingOnFilter: false,
});
$('#tabs').on('click', 'a', function(){
    if($(this).attr('href') == '#section-2'){
        $('#grid2').mediaBoxes({
            boxesToLoadStart: 8,
            boxesToLoad: 6,
            columns: 3,
            horizontalSpaceBetweenBoxes: 5,
            verticalSpaceBetweenBoxes: 5,
            deepLinkingOnPopup: false,
            deepLinkingOnFilter: false,
        });
     }else if($(this).attr('href') == '#section-3'){
        $('#grid3').mediaBoxes({
            boxesToLoadStart: 8,
            boxesToLoad: 6,
            columns: 3,
            horizontalSpaceBetweenBoxes: 5,
            verticalSpaceBetweenBoxes: 5,
            deepLinkingOnPopup: false,
            deepLinkingOnFilter: false,
        });
   }

    $('#grid1').isotopeMB('resize');
    $('#grid2').isotopeMB('resize');
    $('#grid3').isotopeMB('resize');
});

Beautiful! Works great! Thank you for all your help!

Hi catslecode,

I am using mediaboxes on two public pages for listing joboffers and events. The main difference to your examples is that I am using my own filters and pagination. Therefore I am loading the grid by AJAX, do be able to query to the database on server side. Everything works fine on

http://testenv.esb-alumni.net/events.html

but at http://testenv.esb-alumni.net/joboffers.html

the height of the grid is calculated with 5670 for 3-columns layouts (large witdh) which is far to big as one can see in the gap between the last mediabox and the pagination.

Do you have any clue, how I can fix this?

Thanks and regards, Stefan

Hi Stefan,
try adding this peace of CSS:

#grid{
    height: auto !important;
}

Hello David, thanks, this works. I don’t want to be curious – but I am:

Why do I need to explicitly set the height to auto in one case, but not in the other one? Missing image?

Best regards, Stefan

Hi Stefan,
I’m using Isotope to handle the grid, and Isotope is calculating the height in pixels (using its logic), but I suspect that since that grid is being added via AJAX, Isotope gets a little confused with the actual height, so we just set it to auto :)

Best, David

Hi there. First off: great looking portfolio you’ve built! I just purchased this plugin and am confused (hate it when that happens). Was expecting a plugin optimized for wordpress use, but seems that isn’t what this is?

Zip file won’t upload into Wordpress (says no plugin found) and looking at the Index.html file…I’m seeing a lot of code. Now I’m realizing that there were no screenshots of any UI (sometimes plugins don’t include these but maybe the reason is that you don’t have one at all).

Is this designed for wordpress? Is there a user interface (or are buyers expected to code anything we want to see using these code snippits)? If not designed for wordpress and doesn’t have a UI to create portfolios, this isn’t a good fit for our company. Is it possible to get a refund?

Many thanks, ~MG

Hi MG,
Please contact me privately via email (through my profile at the bottom there’s a contact form)

Best, David

how do I install it on Wordpress? or it still not ready….

Hi,
unfortunately the WP version is not ready yet

What …Not Wordpress ready? Damn… I just purchased. You should have LARGE PRINT saying NOT WORDPRESS CAPATIBLE. How do I use this plugin? SMDH

Hi
Sorry to hear that, but there’s no mention of Wordpress anywhere in the preview or the item description page. Codecanyon doesn’t offer Wordpress plugins only.

You can contact me via email (through my profile at the bottom there’s a contact form) so you can apply for a refund
Best, David

by
by
by
by
by
by