{ "title": "Popup Links", "label": "Popup Links", "description": "Use the popup plugin in your content to include links that open in popup windows.", "image": "macbook.jpg", "content": "X3 uses the popup internally for galleries, but it is made available for you to use in your page content also. The X3 popup is perfect for image links, but cant also be used for custom links- and content.\n\n## Usage\nTo use the popup with your links, simply add the `data-popup` attribute to your link.\n
Click Me<\/a><\/code><\/pre>\n*Popup links use the <\/i> zoom-in cursor on mouse-hover to emphasize that the link opens a popup.*\nClick Me<\/a>\n\n\n## Titles\nTo add a title for the image, just use `data-popup-title=\"title\"`. When using this attribute, you don't need to set the data-popup attribute, because it is implicit.\n
\nClick Me<\/a>\n<\/code><\/pre>\nClick Me<\/a>\n\n\n## Links\nThe popup link feature is practical for loading embeddable content, like Youtube Videos.\n
\nYoutube Video<\/a>\n<\/code><\/pre>\nYoutube Video<\/a>\n\nThe popup is optimized for images and embeddable content, but can also be used to open links.\n
\nClick Me<\/a>\n<\/code><\/pre>\nClick Me<\/a>\n\n
\n
Warning!<\/h3>\n
Be careful using the X3 popup for full websites. Some websites refuse to load inside an iframe, and you will face problems with scroll and interface on mobile touch devices. The X3 popup should only be used for simple html content, or embeddable content (like video). If you want to open full websites, you should use \"Browser Popup Window\" (see details further down on this page).<\/p>\n<\/div>\n\n## Custom Content\nYou can use the popup to display inline content with the `data-popup-content` tag.\n
\n
\nCustom Content<\/h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in lorem vel turpis tincidunt varius. Aenean molestie sem velit, quis accumsan sapien molestie non. In nec quam tortor.<\/p>\">Click Me<\/a>\n<\/code><\/pre>\nCustom Content<\/h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in lorem vel turpis tincidunt varius. Aenean molestie sem velit, quis accumsan sapien molestie non. In nec quam tortor.<\/p>\">Click Me<\/a>\n\n## Image Links\nNothing wrong with using images inside your links ...\n
\n<\/a>
\n

\n<\/a>\n<\/code><\/pre>\n<\/a>\n\n## Link Groups\nYou can also group links so that you can navigate between them in the same popup.\n
\n

\nMacbook<\/a>
\niPhone<\/a>
\niPad<\/a>
\n<\/div>\n<\/code><\/pre>\n
\nMacbook<\/a>\n\/ iPhone<\/a>\n\/ iPad<\/a>\n<\/div>\n\n
... Optionally, if you can't or don't want to add all grouped links in the same container, use the ```rel``` attribute to assign a group name.\n
\nMacbook<\/a>
\niPhone<\/a>
\niPad<\/a>
\n<\/code><\/pre>\nMacbook<\/a> \/ iPhone<\/a> \/ iPad<\/a>\n\n## Advanced\nA few more attributes for the ambitious.\n
\n
\nMacbook<\/a>
\n
\n
\nwww.photo.gallery<\/a>
\n
\n
\ncustom_css_class<\/em>.\" data-popup-class=\"custom_class\">Custom<\/a>
\n
\n
\nForce popup image-type<\/a>\n<\/code><\/pre>\n\nMacbook.jpg or open www.photo.gallery in new window<\/a>\nwww.photo.gallery opens in new window on mobile devices.<\/a>\ncustom_css_class<\/em>.\" data-popup-class=\"x3-popup-content\">Custom CSS Class<\/a>\nForce popup image-type<\/a>\n\n## Browser Popup Window\nYou can also set links to open in *native* brower popup windows. Although not as elegant as the X3 popup, this feature can be useful when loading html pages and\/or when scrollbar is required. The native browser popup method is basically a new browser window, limited only by size and controls.\n\nFlamepix.com in Popup<\/a>\n
Flamepix.com in Popup<\/a><\/code><\/pre>\n\nBy default, the popup window is set to open at dimensions 600 x 400 px, but you can set your own size:\n1100 x 800<\/a>\n
\n
1100 x 800<\/a><\/code><\/pre>\nPopup windows will always be centered, and will never open larger than the visitors screen. Furthermore, \"popup\" windows are not supported on most mobile\/touch devices, and will instead open in a \"new tab\".\n\n\n---\n\n## Native X3 Gallery\nBelow, you can see the native X3 gallery displaying images from within this folder. The X3 gallery also uses a the popup feature, but with a slightly more advanced integration.\n",
    "link": {
        "target": "popup"
    },
    "context": {
        "items": "title,description,preview,content",
        "crop": {
            "enabled": false
        }
    },
    "gallery": {
        "layout": "grid"
    }
}