codrops / ThumbnailGridExpandingPreview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
360 stars 143 forks source link

Adding array element into the preview box #23

Open drianautz opened 9 years ago

drianautz commented 9 years ago

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