Load post content inside Essential Grid's default lightbox, and also include the post's title and Featured Image.
1. Review the following screencast and setup your lightbox to load basic post content.
2. Replace the JavaScript from the screencast with the code below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
/* Title Class from Skin Editor */ var titleClass = '.eg-quincy-element-3'; /* Lightbox title container */ var titleWrap = jQuery('<h2 class="lb-title-content" />'); /* Left block container */ var leftBlock = jQuery('<div class="lb-content lb-content-left" />'); /* Right block container */ var rightBlock = jQuery('<div class="lb-content lb-content-right" />'); var myAjaxContainer; window.myAjaxLoaded = function(data) { if(!myAjaxContainer) { myAjaxContainer = jQuery(data.containerid).esgbox({ maxWidth : 760, maxHeight : 540, fitToView : false, width : '70%', height : '70%', padding : [30,30,30,30], autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); } var content = jQuery('.eg-ajax-target'), post = jQuery('.eg-post-' + data.postsource).closest('.tp-esg-item'); titleWrap.text(post.find(titleClass).text()); leftBlock.html(content.html()).prepend(titleWrap); rightBlock.html('<img src="' + post.find('.esg-entry-media img').attr('src') + '" />'); content.html('').append([leftBlock, rightBlock]); myAjaxContainer.click(); }; |
3. Find the class name for your skin's Post Title, and update the "titleClass" part at the top of the JavaScript above with the real class name from your skin.
4. Add the following CSS in addition to the CSS code already added from the screencast above.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* left and right columns */ .lb-content {display: inline-block; width: 48%; vertical-align: top} /* left column */ .lb-content-left {margin: 0 2% 0 0} /* right column */ .lb-content-right {margin: 0 0 0 2%} /* h2 title styles */ .lb-title-content {margin-bottom: 30px} |
5. Variations
Image on Left, Content on Right
JavaScript Replacement
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
/* Title Class from Skin Editor */ var titleClass = '.eg-quincy-element-3'; /* Lightbox title container */ var titleWrap = jQuery('<h2 class="lb-title-content" />'); /* Left block container */ var leftBlock = jQuery('<div class="lb-content lb-content-left" />'); /* Right block container */ var rightBlock = jQuery('<div class="lb-content lb-content-right" />'); var myAjaxContainer; window.myAjaxLoaded = function(data) { if(!myAjaxContainer) { myAjaxContainer = jQuery(data.containerid).esgbox({ maxWidth : 760, maxHeight : 540, fitToView : false, width : '70%', height : '70%', padding : [30,30,30,30], autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); } var content = jQuery('.eg-ajax-target'), post = jQuery('.eg-post-' + data.postsource).closest('.tp-esg-item'); titleWrap.text(post.find(titleClass).text()); leftBlock.html('<img src="' + post.find('.esg-entry-media img').attr('src') + '" />'); rightBlock.html(content.html()).prepend(titleWrap); content.html('').append([leftBlock, rightBlock]); myAjaxContainer.click(); }; |
Image on Top, Content on Bottom
CSS Replacement
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* left and right columns */ /* .lb-content {display: inline-block; width: 48%; vertical-align: top} */ /* left column */ /* .lb-content-left {margin: 0 2% 0 0} */ /* right column */ /* .lb-content-right {margin: 0 0 0 2%} */ /* h2 title styles */ .lb-title-content {margin-bottom: 30px} |
Content on Top, Image on Bottom
CSS Replacement
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* left and right columns */ /* .lb-content {display: inline-block; width: 48%; vertical-align: top} */ /* left column */ /* .lb-content-left {margin: 0 2% 0 0} */ /* right column */ /* .lb-content-right {margin: 0 0 0 2%} */ /* h2 title styles */ .lb-title-content {margin: 0 0 20px 0} |
JavaScript Replacement
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
/* Title Class from Skin Editor */ var titleClass = '.eg-quincy-element-3'; /* Lightbox title container */ var titleWrap = jQuery('<h2 class="lb-title-content" />'); /* Left block container */ var leftBlock = jQuery('<div class="lb-content lb-content-left" />'); /* Right block container */ var rightBlock = jQuery('<div class="lb-content lb-content-right" />'); var myAjaxContainer; window.myAjaxLoaded = function(data) { if(!myAjaxContainer) { myAjaxContainer = jQuery(data.containerid).esgbox({ maxWidth : 760, maxHeight : 540, fitToView : false, width : '70%', height : '35%', padding : [30,30,30,30], autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); } var content = jQuery('.eg-ajax-target'), post = jQuery('.eg-post-' + data.postsource).closest('.tp-esg-item'); titleWrap.text(post.find(titleClass).text()); leftBlock.html('<img src="' + post.find('.esg-entry-media img').attr('src') + '" />'); rightBlock.html(content.html()).prepend(titleWrap); content.html('').append([rightBlock, leftBlock]); myAjaxContainer.click(); }; |
