Hi Guys,

Ok this may be a long one,

I am using this source code for my site Thumbnail Grid with Expanding Preview | Codrops

It looks very similar if not the same as google images when you click on an image,

now the problem I have is that I do not know how to add more features into the drop down box, if you go onto google images and click an image the drop down shows multiple things including more images and links to the source of the image and video links,

I need to know how to edit the source code from the above site to add more features than just the title, description and one link,

Any help is much appreciated,


Many thanks
Marko

Hello Marko,

 

What features do you want to add precisely? Do you want it to work exactly the same as Google images, or do you want to add different features into the drop down box?

 

Google probably uses some sort of advanced server-side script to generate the similar images features and things like that. If you are looking for simpler features, you will probably need to treat them more or less independently from the drop down functionality. Are you familiar with javascript/jQuery?

 

Cheers,

Zach

Also, thinking about you, you could fairly easily recreate the "similar images" feature in with pure HTML/Javascript, but it would be quite manual. If you are not planning on having too many images it could be very managable, using classes or data attributes to group images.

hi Marko, I'm using the same source code on my site (without any additional content tho). Like Zach suggested, depending on the size of your additional content, you can achieve your goal manualy with HTML/Javascript. I stumbled upon this site; http://thomaspark.me/project/expandingalbums/ ..hope it helps

now guys my own problem is; I want to implement "color-thief.js" on the expanded preview image.. but somehow, it seems "color-thief.js" doesnt work on dynamically generated image. (I might be VERY wrong tho). I put a portion of my site at http://redcrosscds.site11.com/ (yea, freehosting) :-). ...with all the necessary plugins included.. I'd be very glad if I could be shown what I'm not getting right, as I'm really new to Javascript. Thanx.

 

PS: --- notice I used the code;

$("#target").load( function(){
            var colorThief = new ColorThief();
            var color = colorThief.getColor(this);
            $("#og-grid > li.og-expanded > div.og-expander").css("background", "rgb(" + color + ")");
       //document.getElementById("og-grid").style.backgroundColor = "rgb(" + color + ")";
    }); 

in the included "ctrl-s.js" file on the page.

 

--- sorry Marko for "hijacking" your topic, I didn't want to create another topic that'll most likely have a similar heading to yours.

..pls guys, still awaiting a reply from someone