Slider Revolution WP
09.06.2016
Load an External Image URL inside Essential Grid’s Lightbox
Load an external image url from another website inside the lightboxA general guide for when you need to load external url content
1. Create a new Custom Meta
2. Assign the meta a Name(1) and Handle(2), with a "Type" of "Text"(3)
3. Add the external url to your post's Essential Grid Custom Settings
4. From the Essential Grid overview page, click "Edit Skin" for your grid
5. Add a new element to your skin's canvas, and apply the following source settings:
6. With the element still selected, find and copy its class name
7. Add the following Custom CSS, replacing the ".eg-washington-element-3" part with your element's class name
|
1 2 3 |
.eg-washington-element-3 {display: none !important} |
8. From the Essential Grid overview page, click "Settings" for your grid
9. Add the following code to your grid's API/JavaScript section
- Modify the “.eg-washington-element-3” part at the top with your meta element’s class name.
- Make optional adjustments to the “Custom Settings” section at the top using the information here:
https://fancyapps.com/fancybox/#docs
|
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/* ********************* */ /* BEGIN CUSTOM SETTINGS */ /* ********************* */ var customSettings = { /* EDIT META CLASS HERE */ metaClass : '.eg-washington-element-3', maxWidth : '80%', maxHeight : '80%', fitToView : false, width : '80%', height : '80%', padding : [0,0,0,0], autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none', nextEffect : 'fade', prevEffect : 'fade' } /* ***************************************************** */ /* END CUSTOM SETTINGS (no need to edit anything below) */ /* ***************************************************** */ jQuery('body').on('click', '.esgbox', function() { var $this = jQuery(this), clas = customSettings.metaClass, grouped = $this.attr('rel') === 'group', box = $this.closest('.tp-esg-item').find(clas).text(); if(!box && !grouped) return; var content = []; if(!grouped) { var settings = {}; for(var prop in customSettings) settings[prop] = customSettings[prop]; settings.href = box ? box : $this.attr('href'); settings.element = [this]; content[0] = settings; } else { var items = $this.closest('.esg-grid').find('.esgbox').toArray(), index = items.indexOf(this), len = items.length, arr = [], i; if(index !== 0) { for(i = index; i < len; i++) arr[arr.length] = items[i]; for(i = 0; i < index; i++) arr[arr.length] = items[i]; } else { arr = items; } for(i = 0; i < len; i++) { var settings = {}, $_this = jQuery(arr[i]), itm = $_this.closest('.tp-esg-item').find(clas), box = itm.text(); for(var prop in customSettings) settings[prop] = customSettings[prop]; settings.href = box ? box : $_this.attr('href') settings.element = [items[i]]; content[i] = settings; } } jQuery.esgbox.open(content); return false; }); |
10. Choose "Single" or "All Items" for the "Gallery Mode" option
