codrops/thumbnailgridexpandingpreview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Thumbnail Grid with Expanding Preview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Article on Codrops

Demo

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: License

© Codrops 2013

thumbnailgridexpandingpreview's Issues

Refreshing additional content when clicking on neighboring tiles

Hello, looking for suggestions.

Is there a way to force the redraw of the expanded box contents when clicking on neighboring titles when the expanded box is already open?

For example, I've added social icons below the paragraph using a list (and that list varies tile by tile; aka member bios). However, some tiles have more social profiles then others. When opening one tile with only a couple social profiles (e.g., twitter and facebook) and then clicking on the next tile which has a few more (e.g., twitter, facebook, google plus, and rss feed) only the original couple social profiles show up (i.e., the original twitter and facebook but with the correct urls) unless you close the expanded box and reopen it.

1. Click on one tile with fewer social profiles:
   

2. Next, click on the neighboring tile that has more social profiles but as you can see only it's only showing the same profiles as the previous tile:
   

3. Close and reopen neighboring tile to see that it actually has more social profiles:
   

I added this to the create function to format the output html…

this.$twitterlink   = $( '<a href="" target="_blank"></a>' );
this.$facebooklink  = $( '<a href="" target="_blank"></a>' );
this.$linkedinlink  = $( '<a href="" target="_blank"></a>' );
this.$googlepluslink = $( '<a href="" target="_blank"></a>' );
this.$rsslink       = $( '<a href=""></a>' );
this.$twitter       = $( '<li class="og-twitter"></li>' ).append ( this.$twitterlink );
this.$facebook      = $( '<li class="og-facebook"></li>' ).append ( this.$facebooklink );
this.$linkedin      = $( '<li class="og-linkedin"></li>' ).append ( this.$linkedinlink );
this.$googleplus    = $( '<li class="og-googleplus"></li>' ).append ( this.$googlepluslink );
this.$rss           = $( '<li class="og-rss"></li>' ).append ( this.$rsslink );
this.$social        = $( '<ul class="og-social list-inline"></ul>' ).append( this.$twitter, this.$facebook, this.$linkedin, this.$googleplus, this.$rss );

…and then added to the update content section with…

// update preview´s content
var $itemEl = this.$item.children( 'a' ),
    eldata = {
        //href      : $itemEl.attr( 'href' ),       //url
        largesrc    : $itemEl.data( 'largesrc' ),   //avatar
        name        : $itemEl.data( 'name' ),       //name
        title       : $itemEl.data( 'title' ),      //title
        description : $itemEl.data( 'description' ),//bio
        twitter     : $itemEl.data( 'twitter' ),    //twitter
        facebook    : $itemEl.data( 'facebook' ),   //facebook
        linkedin    : $itemEl.data( 'linkedin' ),   //linkedin
        googleplus  : $itemEl.data( 'googleplus' ), //googleplus
        rss         : $itemEl.data( 'rss' ),        //rss
    };
//largesrc defined below
//this.$href.attr( 'href', eldata.href );
this.$name.html( eldata.name );
this.$title.html( eldata.title );
this.$description.html( eldata.description );

if (eldata.twitter == undefined){
    this.$twitter.remove();
}else{
    this.$twitterlink.attr( 'href', 'https://twitter.com/' + eldata.twitter );
}

if (eldata.facebook == undefined){
    this.$facebook.remove();
}else{
    this.$facebooklink.attr( 'href', 'https://www.facebook.com/' + eldata.facebook );
}

if (eldata.linkedin == undefined){
    this.$linkedin.remove();
}else{
    this.$linkedinlink.attr( 'href', 'https://www.linkedin.com/in/' + eldata.linkedin );
}

if (eldata.googleplus == undefined){
    this.$googleplus.remove();
}else{
    this.$googlepluslink.attr( 'href', 'https://plus.google.com/' + eldata.googleplus + '/' );
}

if (eldata.rss == undefined){
    this.$rss.remove();
}else{
    this.$rsslink.attr( 'href', '/author/' + eldata.rss + '/feed/' );
}

Only show link button for certain images

I am working on a website where I wanted to only show the "visit website" link for certain items. I read through the comments on http://tympanus.net and found this...

The whole thing functions off the <a> tag so you have to work with it. Therefore no matter what you do you’ll end up with a “visit website” link but you can hide it when you want. If you have a link it will insert the link but if there is no link it will just have
<a href="#">visit website.</a>
So in instances where we get the “#” we want to hide the element.

If you look at line 390 you will see this:

this.$href.attr( 'href', eldata.href );

Change/add in this:

if((eldata.href).indexOf('#') >= 0) { this.$href.attr( 'style', 'display:none;' ); } else { this.$href.attr( 'href', eldata.href ); }

It indexes the value of “eldata.href” and if it finds the “#” it applies an inline style to display none. Otherwise it goes on like normal. Works for me.

I've implemented it on my site with one little problem...

If you click on an item that does not have a link, it will not show up but if you click directly to an item that should, the link is still not visible. If you close the expanding part and reopen it, the link will be visible.

Any ideas?

Dynamic height

Does anyone have an idea on how to make the height of the preview dynamic, based on the height of the content?

Adding array element into the preview box

Hello, actually how to add array content inside the preview box, i mean if i have the attribute like this, i try it >
HTML at a data

data-size1="Small"
data-size2="Medium"

data-price1="$ 23"
data-price2="$ 49"

On // update preview´s content
var $itemEl = this.$item.children( 'a' ),
eldata = {

size1 : $itemEl.data( 'size1' ),
price1 : $itemEl.data( 'price1' ),
size2 : $itemEl.data( 'size2' ),
price2 : $itemEl.data( 'price2' )

On html push

this.$size1.html( eldata.size1 );
this.$price1.html( eldata.price1 );
this.$size2.html( eldata.size2 );
this.$price2.html( eldata.price2 );

On Preview.prototype =
create : function()

this.$size1 = $( '

' );
this.$price1 = $( '

' );
this.$info1 = $( '

' ).append( this.$size1, this.$price1 );
this.$addtocart1 = $( '' );
this.$item1 = $( '

' ).append( this.$info1, this.$addtocart1 );
this.$variant1 = $( '

' ).append( this.$item1 );

this.$size2 = $( '

' );
this.$price2 = $( '

' );
this.$info2 = $( '

' ).append( this.$size2, this.$price2 );
this.$addtocart2 = $( '' );
this.$item2 = $( '

' ).append( this.$info2, this.$addtocart2 );
this.$variant2 = $( '

' ).append( this.$item2 );

this.$clearfix = $( '

' ).append( this.$variant1, this.$variant2 );

but it's only limit for 2 items, actually how to add an array into this,

Thanks

Regards

Width of og-expander not the same as the grid

Hi,

I am using a bootstrap template and want to use this plugin for showing extra info on products. I have got it working in the basics, but the og-expander never reaches 100% of the width of the items parent item.

I have tried with my thumbnail code based on div contianer with children div's and with an UL / LI sample code as in the sample, both without success.

How can I get the og-expander to be 100% of the items parent width.

hidePreview() hides expanded preview on scrolling (iphone)

Hi, first of all thanks for a grate js ))

I have an issue on iphone. If I click on a thumb, it opens an "expander", but as soon as I start to scroll, expanded block hides automatically. Trying to debug, I figured out that the reason is inside of initEvents(), somehow it detects iphones scrolling as window reaizing. Commenting out //hidePreview(); solves the problem on iphone but makes crap to desktop resizing. Is there a way to separate this to triggers?

Best regards.

disable data

How can I disable, that it takes for the preview the content of the data-attributes? I'd like to show my own html.

Expanded View Colapses

When click on an image it expands fine, and if I close it using a close button and re-expand another image it works fine as well.

however if click on a different thumbnail bellow the expanded view main image collapses behind thumbnails.

Problems with plugin When DOM Manipulation

Any Changes in DOM not working....

In HubSpot, My DOM is bit diff. to first, i need to make it same layout like as follows. But after this, t not works....

$(window).load(function(e) {
$('li').wrapAll('

');
Grid.init();
});

Doest work with jquery2.1.1

Uncaught TypeError: undefined is not a function main_page:239
(anonymous function) main_page:239
c jquery-1.9.1.min.js:3
p.fireWith jquery-1.9.1.min.js:3
b.extend.ready jquery-1.9.1.min.js:3
H

Uncaught TypeError: undefined is not a function

Any tips so that i can fork it and rectify it..

Disable Link to Website in expandable screen

Hi
I cant figure out the work around to disable (hide) the link "visit page". In the HTML is not string as such, but its included in the js file grid.js. This means that all the expandable (preview) screens have the same text. How do you customize it or even disable the link for some of the thumbs?

Multiple grids on the same page?

I would like to use it with a tabulation, using the multiple grids on the same page, tried with '#og-grid, #og-grid-one, #og-grid-two', but only the first one seems to work correctly, all the other ones do not scroll back, is there a solution for that, please, would be great if it can be done. Thanks a lot.

The detail paragraph gets truncated?

I have made sure that there are no other codes for the paragraph, and it does not contain any extra spaces between the words. However, the paragraph gets truncated after 560 to 590 characters with spaces. I have set the height to 100% and there is certainly enough space for the whole paragraph to display. I have reviewed all files and CSS, and I cannot find any limitation to set for the paragraph size. I have even tried editing and adding more content using firebug and Firebug can add more than 1500 characters with spaces and more.
Has anyone had this issue before? and how to resolve it?
Any suggestion would greatly be appreciated.

AngularJS version

Hi,

Has anyone ever attempted to make an AngularJS version of this? I feel it would be a lot easier to do some of the things using Directives. Just thought I'd ask before I attempt to do this myself.

Cheers,
P

not working with GridLoadingEffects

Hi there,

That's an awesome expanding preview! But I can't make it work with GridLoadingEffects (https://github.com/codrops/GridLoadingEffects).

The .og-expander appears but it's not of the full window width and also it appears underneath of the other li thumb-images (even if I set the z-index to million).

Any ideas, please?

Static Version?

Is it possible to make it static content? I've got different content I want to show per thumbnail, some with a link/without a link would like to also add a row of smaller thumbnails that when clicked change the bigger image. Any idea how I would go about doing this?

Plugin solutions

If you all have problems with this, I suggest you help each other out, join forces and build a more customizable plugin together. Either that or use another Github project: jQuery.Gl.TheWall

Getting google to index text inside 'data-description' attribute

Thanks for the awesome tutorial. Was wondering if there was a way to get Google to index the text provided inside the 'data-description' attribute? Or any other work-arounds?

Preview box automatically closes after click on ie8

I tried this with the official demo as well thinking that some of the changes I made to the code had broken the plugin but the same happens:

On IE 8 whenever I click on a thumbnail to open the preview, the preview opens and is automatically closed instantly.

Is there a way to fix this? Or is IE 8 support not part of the picture?

Thanks in advance!

sort function?

is there a version of this with a sorting function? I have tried to use this with MixItUp, but seem to be having issues... the expanded preview still follows the next item in the list but not the next filtered item.

open preview through code

I have the grid working beautifully, but I'd like to be able to open a particular preview in code rather than through the usual user-click on the thumb. I can't seem to hit on the right method that works. Invoking a js click event on an anchor in the grid does not work, and I can't seem to find a method on Grid that is exposed to do this. Anybody know what I am missing?

Compatibility with Foundation 5

I'd like to implement the "THUMBNAIL GRID WITH EXPANDING PREVIEW" into my website. I'm using Foundation 5, which is already using a grid system. I haven't delved into the code much, but how would I implement this into the project? Would there be any conflicts? Someone mentioned there might be for Foundation 4 in the article comments, but I wanted to ask you guys directly if there's an easy way to set this up. Would I replace the grid css and classes with Foundation's or are there some references to it in the scripts? I'm hoping to get this launched soon, and this is the PERFECT minimal way to present a portfolio, in my opinion. Any help is MUCH appreciated!

Having multiple instances leaves a portion of the overlay

I need two instances of the grid, thus I changed the grid variable to: var $grid = $( '.og-grid' ).

It all works as expected, but when I close the second instance, the upper part of the overlay doesn't close, leaving a black bar with the close icon.
You can see it here: http://madebym.me/test/couch-test/corporate-video.php

Has anyone managed to sucesfully have two or more grids?

Thumbnail does not return to original location

Hey Codrops, I found your plugin to be very neat and wanted to help with some features that are missing or not working as expected, one of those is that after closing the expanded box the thumbnail does not return to its original position.

Doesn't work with JQuery 1.11

I've had good experiences using this plugin with Wordpress sites running JQuery 1.9, but the latest version of Wordpress uses JQuery 1.11, which seems to break the plugin. I get these issues that I did not get before using the older version of JQuery:

1). Uncaught TypeError: Cannot read property 'event' of undefined

2). Uncaught TypeError: undefined is not a function

Is there any chance of updating the code to work with JQuery 1.11?

no way of navigating through the thumbnails while the expanded box is open

Not sure if this is a bug more than it is a feature request, currently if the expanded box is opened you are not able to navigate through all the thumbnails without closing the box, I think adding an option for prev/next within the expanded box would be something users would like.

space between thumbnails after preview pull down (Collapes and expand)

Hi,
I have implemented it exactly the way by pulling image links from my JSON file and it's displaying everything so perfect but I have one huge problem.

Scenario:
step1: Clicking on thumbnail
Step2: slides the thumbnails on top and opens the desired expansion box
Step3: click on preview "close" button >> there is this big gap between two rows (preview displayed portion)

I tried with 3 browsers - IE, Firefox and chrome and facing the same issue in all of them.

very urgent. Any help would be appreciated.

Does not work on dynamic content: Document on change

How to make it work when we load dynamic content to page ; add html via jquery . the plugin does not work .

For instance while using infinite scroll, as more images get added via ajax. the grid does not work.

Multiple uses on a page - replace ID with class in JS

I'm using the expanding area on a page with several different groups / rows. The JS doesn't work because it's looking for a single instance of #og-grid. I'd like this plugin to work on more scalable level so that I can call it to work on all instances of .og-grid. Is that possible?