<!DOCTYPE html>
<!-- X3 website by www.photo.gallery -->
<html><head><meta charset="utf-8"><title>Popup Links</title><meta name="description" content="X3 uses the popup for galleries, but you can also use it to display images and media in your page content. The X3 popup is perfect for images, but can also be used for videos and html content."><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="canonical" href="https://entrerios.satsaid.com.ar/galeria/examples/plugins/popup/"><link rel="dns-prefetch" href="//auth.photo.gallery"><link rel="dns-prefetch" href="//cdn.jsdelivr.net"><meta property="og:title" content="Popup Links"><meta property="og:description" content="X3 uses the popup for galleries, but you can also use it to display images and media in your page content. The X3 popup is perfect for images, but can also be used for videos and html content."><meta property="og:url" content="https://entrerios.satsaid.com.ar/galeria/examples/plugins/popup/"><meta property="og:type" content="website"><meta property="og:updated_time" content="1777571531"><meta property="og:image" content="https://entrerios.satsaid.com.ar/galeria/content/examples/plugins/popup/ocean-1.jpg"><meta property="og:image:type" content="image/jpeg"><meta property="og:image:width" content="2048" /><meta property="og:image:height" content="1365" /><link rel="icon" href="/galeria/content/custom/favicon/favicon.png"><link href="https://entrerios.satsaid.com.ar/galeria/feed/" type="application/atom+xml" rel="alternate" title="Atom Feed"><script>
var css_counter = 0;
function imagevue_(){
	css_counter ++;
	if(css_counter === 1) imagevue();
};
function cssFail(){
	css_counter --;
	var l = document.createElement('link');
	l.onload = imagevue_;
	l.rel = 'stylesheet';
	l.id = 'black';
	l.href = '/galeria/app/public/css/3.30.1/x3.skin.black.css';
	document.getElementsByTagName('head')[0].appendChild(l);
}
</script><link rel="stylesheet" id="black" href="https://cdn.jsdelivr.net/npm/x3.photo.gallery@3.30.1/css/x3.skin.black.css" onerror="cssFail();"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"><style id="default-fonts"><!-- body,h1,h2,h3,h4,h5,h6 {font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;} --></style><style id="logo"><!-- .logo {font-size: 2.125em; padding: 1em 0; margin-top: 0em;}.logo > img {width: 230px; } --></style><style id="x3app"></style></head><body class="fa-loading initializing topbar-float black topbar-fixed clear x3-page slug-popup page-examples-plugins-popup" data-include=""><div class="x3-loader" title="loading"></div><div class="sb-site-container"><div><header class="header"><div class="nav-wrapper"><nav class="nav"><div class="logo-wrapper"><a href="/galeria/" class="logo ">SATSAID Entre Ríos</a></div><ul class="menu slim"><li><a href="/galeria/" class="needsclick">Home</a></li><li class="has-dropdown" data-options="mega:carousel;items:title,amount,preview,description;carousel_amount:3;"><a href="/galeria/galleries/" class="needsclick node">Galleries</a><ul class="dropdown"><li data-options="mega:;title:Colonia;description:;preview:/content/galleries/colonia/018.jpg;amount:39;"><a href="/galeria/galleries/colonia/" class="needsclick">Colonia</a></li><li data-options="mega:;title:Sweet Landscapes;description:A few images displaying in a vertical layout.;preview:/content/galleries/landscapes/ridge.jpg;amount:6;"><a href="/galeria/galleries/landscapes/" class="needsclick">Landscapes</a></li><li data-options="mega:;title:Mother Nature;description:A few images displaying in a justified grid.;preview:/content/galleries/nature/butterfly.jpg;amount:20;"><a href="/galeria/galleries/nature/" class="needsclick">Nature</a></li><li data-options="mega:;title:Femme Fatale;description:A few images displaying in a columns grid.;preview:/content/galleries/femme/swirl.jpg;amount:26;"><a href="/galeria/galleries/femme/" class="needsclick">Femme</a></li><li data-options="mega:;title:Eternal Style;description:A few images displaying in a standard grid.;preview:/content/galleries/style/typewriter.jpg;amount:9;"><a href="/galeria/galleries/style/" class="needsclick">Style</a></li><li data-options="mega:;title:Food Lover;description:A few images displaying in a slideshow.;preview:/content/galleries/food/coffee-n-cookies.jpg;amount:6;"><a href="/galeria/galleries/food/" class="needsclick">Food</a></li><li data-options="mega:;title:Human Moods;description:A few images displaying in a carousel.;preview:/content/galleries/human/2.spectacles.jpg;amount:9;"><a href="/galeria/galleries/human/" class="needsclick">Human</a></li></ul></li><li class="has-dropdown" data-options="mega:list;title:Examples;description:A variety of page examples.;preview:/content/examples/assets/american-football.jpg;"><a href="/galeria/examples/" class="needsclick node">Examples</a><ul class="dropdown"><li class="has-dropdown" data-options="mega:;title:Gallery Layouts;description:Demonstrating several gallery layout examples.;preview:/content/examples/assets/blossom.jpg;"><a href="/galeria/examples/gallery/" class="needsclick node">Gallery</a><ul class="dropdown"><li data-options="mega:;title:Vertical Layout;description:Vertical gallery images in a narrow layout.;preview:/content/examples/assets/carneval.jpg;"><a href="/galeria/examples/gallery/vertical/" class="needsclick">Vertical</a></li><li data-options="mega:;title:Grid Layout;description:A basic grid layout, which gracefully responds to screen size.;preview:/content/examples/assets/city-lights.jpg;"><a href="/galeria/examples/gallery/grid/" class="needsclick">Grid</a></li><li data-options="mega:;title:Justified Layout;description:The justified layout scales images neatly into rows.;preview:/content/examples/assets/corn-field.jpg;"><a href="/galeria/examples/gallery/justified/" class="needsclick">Justified</a></li><li data-options="mega:;title:Columns Layout;description:The columns layout stacks images into columns.;preview:/content/examples/assets/crispy-chocolate.jpg;"><a href="/galeria/examples/gallery/columns/" class="needsclick">Columns</a></li><li data-options="mega:;title:Slideshow Layout;description:The slideshow layout comes with many settings.;preview:/content/examples/assets/earrings.jpg;"><a href="/galeria/examples/gallery/slideshow/" class="needsclick">Slideshow</a></li><li data-options="mega:;title:Carousel Layout;description:The carousel method displays multiple items in a carousel-like layout.;preview:/content/examples/assets/headphones.jpg;"><a href="/galeria/examples/gallery/carousel/" class="needsclick">Carousel</a></li><li data-options="mega:;title:Auto Popup;description:Use the popup auto-open setting to instantly open first gallery image in popup on page load.;preview:/content/examples/assets/sunflower-bee.jpg;"><a href="/galeria/examples/gallery/auto-popup/" class="needsclick">Auto Popup</a></li><li data-options="mega:;title:Screenbox;description:Screenbox combined with the vertical layout, where each image is scaled to fit within viewport.;preview:/content/examples/assets/beach.jpg;"><a href="/galeria/examples/gallery/screenbox/" class="needsclick">Screenbox</a></li></ul></li><li class="has-dropdown" data-options="mega:;title:Gallery Variations;description:Demonstrating a few more gallery layout variations.;preview:/content/examples/assets/rosy-red.jpg;"><a href="/galeria/examples/variations/" class="needsclick node">Variations</a><ul class="dropdown"><li data-options="mega:;title:Vertical Split;description:Using split-view in combination with the vertical layout.;preview:/content/examples/assets/puppy.jpg;"><a href="/galeria/examples/variations/split/" class="needsclick">Vertical Split</a></li><li data-options="mega:;title:Grid Tooltip;description:A small grid using 200 px column width and tooltips enabled.
;preview:/content/examples/assets/face.jpg;"><a href="/galeria/examples/variations/grid-tooltip/" class="needsclick">Grid Tooltip</a></li><li data-options="mega:;title:Justified Comfy;description:A justified layout with larger images, more space, frames and captions.;preview:/content/examples/assets/straight-road.jpg;"><a href="/galeria/examples/variations/justified/" class="needsclick">Justified Comfy</a></li><li data-options="mega:;title:Columns Comfy;description:A columns layout with larger images, more space and frames.;preview:/content/examples/assets/turbines.jpg;"><a href="/galeria/examples/variations/columns/" class="needsclick">Columns Comfy</a></li><li data-options="mega:;title:Slideshow Cover;description:Slideshow layout in cover-mode, starts fullscreen, with dot-nav and crossfade transitions.;preview:/content/examples/assets/tracks.jpg;"><a href="/galeria/examples/variations/slideshow/" class="needsclick">Slideshow Cover</a></li><li data-options="mega:;title:Carousel Height;description:Optional Carousel layout limited by height, without cropping images.;preview:/content/examples/assets/felagi.jpg;"><a href="/galeria/examples/variations/carousel/" class="needsclick">Carousel Height</a></li><li data-options="mega:;title:Crop Images;description:Cropping images to specific aspect ratios is necessary for some layouts. It can also be used to create stylish layouts.;preview:/content/examples/assets/skies.jpg;"><a href="/galeria/examples/variations/crop/" class="needsclick">Crop Images</a></li><li data-options="mega:;title:Carousel Tabs;description:Use carousel tabs in combination with split-view to display gallery images in a linear context.;preview:/content/examples/assets/turntable.jpg;"><a href="/galeria/examples/variations/carousel-tabs/" class="needsclick">Carousel Tabs</a></li></ul></li><li class="has-dropdown" data-options="mega:;title:Folder Layouts;description:Demonstrating several folder (album) layout examples.;preview:/content/examples/assets/wheat.jpg;"><a href="/galeria/examples/folders/" class="needsclick node">Folders</a><ul class="dropdown"><li data-options="mega:;title:Vertical Split Layout;description:Split the image and context into two side-by-side columns.;preview:/content/examples/assets/city-lights.jpg;"><a href="/galeria/examples/folders/vertical-split/" class="needsclick">Vertical Split</a></li><li data-options="mega:;title:Folders Grid;description:Using the grid, which gracefully responds to screen width.;preview:/content/examples/assets/layered-cake.jpg;"><a href="/galeria/examples/folders/grid/" class="needsclick">Grid</a></li><li data-options="mega:;title:Folders Justified;description:A basic example of the justified layout method applied to folders.;preview:/content/examples/assets/prickly.jpg;"><a href="/galeria/examples/folders/justified/" class="needsclick">Justified</a></li><li data-options="mega:;title:Folder Columns;description:Use the columns method to create a vertical masonry-style layout.;preview:/content/examples/assets/corn-field.jpg;"><a href="/galeria/examples/folders/columns/" class="needsclick">Columns</a></li><li data-options="mega:;title:Carousel Tabs;description:Use carousel tabs in combination with split-view to display child pages in a linear context.;preview:/content/examples/assets/sunflower-bee.jpg;"><a href="/galeria/examples/folders/carousel-tabs/" class="needsclick">Carousel Tabs</a></li><li data-options="mega:;title:Folders Grid List;description:Split grid layout combination.;preview:/content/examples/assets/madrid.jpg;"><a href="/galeria/examples/folders/list/" class="needsclick">List</a></li></ul></li><li class="has-dropdown" data-options="mega:;title:Features;description:A few examples, demonstrating specific features.;preview:/content/examples/assets/buffet.jpg;"><a href="/galeria/examples/features/" class="needsclick node">Features</a><ul class="dropdown"><li data-options="mega:;title:Sample Content;description:Various sample content examples.;preview:/content/examples/assets/fujifilm.jpg;"><a href="/galeria/examples/features/sample/" class="needsclick">Sample Content</a></li><li data-options="mega:;title:Blog Post;description:An example of a typical blog post.;preview:/content/examples/assets/toscana.jpg;"><a href="/galeria/examples/features/post/" class="needsclick">Blog Post</a></li><li data-options="mega:;title:Image GPS and Exif;description:Display exif meta data and maps for images that contain GPS location data.;preview:/content/examples/features/exif/1.thailand.jpg;"><a href="/galeria/examples/features/exif/" class="needsclick">Image GPS & Exif</a></li><li data-options="mega:;title:Image Links;description:Link to other pages or websites directly from your images. This feature may be useful for portfolio- or product pages.;preview:/content/examples/features/image-links/1.flamepix.jpg;"><a href="/galeria/examples/features/image-links/" class="needsclick">Image Links</a></li><li data-options="mega:;title:Html Captions;description:It's cool to use some html in your image titles and descriptions!;preview:/content/examples/features/captions/1.spectacles.jpg;"><a href="/galeria/examples/features/captions/" class="needsclick">Html Captions</a></li><li data-options="mega:;title:www.photo.gallery;description:Use the link setting to link- and redirect the page to any url.;preview:/content/examples/assets/playball.jpg;"><a href="https://www.photo.gallery" class="needsclick no-ajax is-link" target="_blank">External Link  <i class="fa fa-external-link-square"></i></a></li><li data-options="mega:;title:Popup Link;description:Using the link-feature combined with popup, allows you to open menu links in a popup interface.;preview:/content/examples/features/popup-link/preview.jpg;"><a href="https://www.youtube.com/embed/G46ygBKsTZI" class="needsclick is-link" data-popup>Popup Link  <i class="fa fa-external-link-square"></i></a></li></ul></li><li class="has-dropdown" data-options="mega:;title:Plugins;description:X3 offers a range of plugins that are available for pages, or in your content.;preview:/content/galleries/landscapes/mountains.jpg;"><a href="/galeria/examples/plugins/" class="needsclick node">Plugins</a><ul class="dropdown"><li data-options="mega:;title:Panorama Plugin;description:Display spherical equirectangular, multi-level cube, and flat multi-resolution gigapixel images with the X3 panorama plugin.;preview:/content/examples/plugins/panorama/ballroom.jpg;"><a href="/galeria/examples/plugins/panorama/" class="needsclick">Panorama</a></li><li data-options="mega:;title:Intro Image;description:Attach an image as an introduction to the page.;preview:/content/examples/plugins/intro-image/background.jpg;"><a href="/galeria/examples/plugins/intro-image/" class="needsclick">Intro Image</a></li><li data-options="mega:;title:Intro Gradient;description:Use the intro-plugin to attach a solid color or gradient as introduction to the page.;preview:/content/galleries/landscapes/antarctica.jpg;"><a href="/galeria/examples/plugins/intro-gradient/" class="needsclick">Intro Gradient</a></li><li data-options="mega:;title:Slideshow Intro;description:An example using the gallery slideshow set to &quot;use as intro&quot; for a nice start-page effect.;preview:/content/examples/assets/wayback.jpg;"><a href="/galeria/examples/plugins/slideshow-intro/" class="needsclick">Slideshow Intro</a></li><li data-options="mega:;title:Video Intro Plugin;description:The video-intro plugin allows you to add a video at the top of page.;preview:/content/examples/plugins/video-intro/preview.jpg;"><a href="/galeria/examples/plugins/video-intro/" class="needsclick">Video Intro</a></li><li data-options="mega:;title:Image Comparison Slider;description:A content plugin to interactively compare two images visually.;preview:/content/examples/plugins/comparison-slider/preview.jpg;"><a href="/galeria/examples/plugins/comparison-slider/" class="needsclick">Comparison Slider</a></li><li data-options="mega:;title:Content Carousel Plugin;description:Use the content carousel plugin to add html elements in an interactive carousel.;preview:/content/galleries/landscapes/hills.jpg;"><a href="/galeria/examples/plugins/carousel/" class="needsclick">Content Carousel</a></li><li data-options="mega:;title:Popup Links;description:X3 uses the popup for galleries, but you can also use it to display images and media in your page content. The X3 popup is perfect for images, but can also be used for videos and html content.;preview:/content/examples/plugins/popup/ocean-1.jpg;"><a href="/galeria/examples/plugins/popup/" class="needsclick">Popup Links</a></li></ul></li></ul></li><li data-options="mega:data;items:contactform,hr,icon-buttons;width:320;"><a href="/galeria/contact/" class="needsclick">Contact</a><div class="hide"><form data-abide class="contactform"><div><input required type="text" name="name" placeholder="Name"></div><div><input required type="email" name="email" placeholder="Email"></div><div><textarea required name="message" placeholder="What's up?"></textarea></div><button type="submit">Send</button></form><hr><div class="menu-icon-buttons"></div></div></li></ul></nav></div></header><main class="main" id="content"><div class="module row"><div class="clearfix context small-12 medium-10 large-8 small-centered columns title-normal narrower context-left-header-center" ><h1 class="title style-icon"><span>Popup Links</span></h1><h2 class="subheader">X3 uses the popup for galleries, but you can also use it to display images and media in your page content. The X3 popup is perfect for images, but can also be used for videos and html content.</h2><div class="preview-image x-frame-medium-up images"><a class="img-link item-link item popup" data-width="2048" data-height="1365" href="." data-popup-href="/galeria/content/examples/plugins/popup/ocean-1.jpg" data-image="/galeria/content/examples/plugins/popup/ocean-1.jpg"><figure><div class="image-container" style="padding-bottom:66.650390625%;"><img data-src="/galeria/content/examples/plugins/popup/ocean-1.jpg" data-width="2048" alt=""></div></figure></a></div><div class="content"><p><strong>Image</strong><br />
Simply add the data-popup attribute in your link.</p><pre data-lang="html"><code><a href="ocean-1.jpg" data-popup>image</a></code></pre><p><a href="/galeria/content/examples/plugins/popup/ocean-1.jpg" class="button small" data-popup data-width="2048" data-height="1365">image</a></p><p><strong>Title</strong><br />
Include the data-popup-title attribute in your link.</p><pre data-lang="html"><code><a href="ocean-1.jpg" data-popup-title="Big ocean!">title</a></code></pre><p><a href="/galeria/content/examples/plugins/popup/ocean-1.jpg" class="button small" data-popup-title="Big ocean!" data-width="2048" data-height="1365">title</a></p><p><strong>Groups</strong><br />
Group your links into a single popup by adding them inside a data-popup-container.</p><pre data-lang="html"><code><div data-popup-container><br><a href="ocean-1.jpg">ocean 1</a><br><a href="ocean-2.jpg">ocean 2</a><br><a href="ocean-3.jpg">ocean 3</a><br></div></code></pre><div data-popup-container><a href="/galeria/content/examples/plugins/popup/ocean-1.jpg" class="button small" data-width="2048" data-height="1365">ocean 1</a> <a href="/galeria/content/examples/plugins/popup/ocean-2.jpg" class="button small" data-width="2048" data-height="1360">ocean 2</a> <a href="/galeria/content/examples/plugins/popup/ocean-3.jpg" class="button small" data-width="2048" data-height="1365">ocean 3</a></div><p>Or use the "rel" attribute to group items.</p><pre data-lang="html"><code><a href="ocean-1.jpg" data-popup rel="mypopup">ocean 1</a><br><a href="ocean-2.jpg" data-popup rel="mypopup">ocean 2</a><br><a href="ocean-3.jpg" data-popup rel="mypopup">ocean 3</a><br></code></pre><p><a href="/galeria/content/examples/plugins/popup/ocean-1.jpg" data-popup class="button small" rel="mypopup" data-width="2048" data-height="1365">ocean 1</a> <a href="/galeria/content/examples/plugins/popup/ocean-2.jpg" data-popup class="button small" rel="mypopup" data-width="2048" data-height="1360">ocean 2</a> <a href="/galeria/content/examples/plugins/popup/ocean-3.jpg" data-popup class="button small" rel="mypopup" data-width="2048" data-height="1365">ocean 3</a></p><p><strong>Image Links</strong><br />
You can use images in your links, which provides a nice zoom effect.</p><pre data-lang="html"><code><a href="ocean-1.jpg" data-popup><img src="ocean-1.jpg"></a></code></pre><p><a href="/galeria/content/examples/plugins/popup/ocean-1.jpg" data-width="2048" data-height="1365" data-popup><img src="/galeria/content/examples/plugins/popup/ocean-1.jpg" class="x3-style-frame" alt=""></a></p><p>You can also group your image links.</p><pre data-lang="html"><code><div data-popup-container><br><a href="ocean-1.jpg" data-popup><img src="ocean-1.jpg"></a><br><a href="ocean-2.jpg" data-popup><img src="ocean-2.jpg"></a><br><a href="ocean-2.jpg" data-popup><img src="ocean-2.jpg"></a><br></div></code></pre><div class="row" data-popup-container style="margin-bottom: 3rem"><div class="small-4 columns"><a href="/galeria/content/examples/plugins/popup/ocean-1.jpg" data-width="2048" data-height="1365"><img src="/galeria/content/examples/plugins/popup/ocean-1.jpg" class="x3-style-frame" alt=""></a></div><div class="small-4 columns"><a href="/galeria/content/examples/plugins/popup/ocean-2.jpg" data-width="2048" data-height="1360"><img src="/galeria/content/examples/plugins/popup/ocean-2.jpg" class="x3-style-frame" alt=""></a></div><div class="small-4 columns"><a href="/galeria/content/examples/plugins/popup/ocean-3.jpg" data-width="2048" data-height="1365"><img src="/galeria/content/examples/plugins/popup/ocean-3.jpg" class="x3-style-frame" alt=""></a></div></div><p><strong>Youtube</strong><br />
The popup is useful for displaying videos from Youtube or Vimeo.</p><pre data-lang="html"><code><a href="https://www.youtube.com/embed/G46ygBKsTZI" data-popup>Youtube</a></code></pre><p><a href="https://www.youtube.com/embed/G46ygBKsTZI" data-popup class="button small">Youtube</a></p><p><strong>Video mp4</strong><br />
You can also display local-hosted mp4 video files.</p><pre data-lang="html"><code><a href="video.mp4" data-popup>video</a></code></pre><p><a href="/content/examples/features/sample/SampleVideo_720x480_1mb.mp4" data-popup class="button small">video</a></p><p><strong>Html content</strong><br />
You can also use the popup to display basic html content.</p><pre data-lang="html"><code><a href="#" data-popup-content="<h2>Custom Content</h2><p>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>">html</a></code></pre><p><a href="#" data-popup-content="<h2>Custom Content</h2><p>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>" class="button small">html</a></p><p><strong>Website</strong><br />
You can also open external websites in the popup, if allowed to load inside an iframe.</p><pre data-lang="html"><code><a href="https://www.bbc.com/" data-popup>bbc.com</a></code></pre><p><a href="https://www.bbc.com/" data-popup class="button small">website</a></p><p><strong>Advanced options</strong><br />
The content popup comes with plenty advanced options.</p><pre data-lang="html"><code><a href="#" data-popup-content="Hello world!">html content in popup</a><br><a href="SRC" data-popup-image="true">force image type</a><br><a href="SRC" data-popup-history="false">disable url#hash history</a><br><a href="SRC" data-popup-pid="URL-ID">assign custom url#hash id</a><br><a href="SRC" data-popup-main-class="css-class">assign custom popup CSS class</a><br><a href="SRC" data-popup-class="css-class">assign custom CSS class for html</a><br><a href="SRC" data-popup-download="true">enable download button</a><br><a href="SRC" data-popup-fullscreen="false">disable fullscreen button</a><br><a href="SRC" data-popup-play="false">disable slideshow play button</a><br><a href="SRC" data-popup-zoom="false">disable zoom button</a><br><a href="SRC" data-popup-arrow="false">disable arrow control buttons</a><br><a href="SRC" data-original="original_SRC">assign option source for zoom</a><br><a href="SRC" data-loop="false">disable popup loop</a><br><a href="SRC" data-popup-transition="pop">assign popup transition</a><br><a href="SRC" data-popup-play-transition="fade">assign slideshow transition</a><br><a href="SRC" data-popup-caption-hide="false">disable caption autohide</a><br><a href="SRC" data-popup-bg-color="#000099">assign custom background color</a><br><a href="SRC" data-popup-bg="#990000">custom background for specific image</a><br><a href="SRC" data-popup-bg-image="true">assign background color from images</a><br><a href="SRC" data-popup-caption-style="box">assign caption style</a><br><a href="SRC" data-popup-caption-align="center-left">assign caption position</a><br><a href="SRC" data-popup-caption="false">disable caption</a><br><a href="SRC" data-width="2048">inform source img width for zoom effect</a><br><a href="SRC" data-height="1365">inform source img height for zoom effect</a><br></code></pre><hr /><h2>Browser Popup Window</h2><p>You can also open links in brower popup windows. Although not as elegant as the X3 popup, it is more functional and has no restrictions when opening external websites.</p><pre data-lang="html"><code><a href="https://www.flamepix.com/" data-popup-window>Flamepix.com</a></code></pre><p><a href="https://www.flamepix.com/" data-popup-window class="button small">Flamepix.com</a></p><p>You can also change the popup window size (does not work on mobile):</p><pre data-lang="html"><code><a href="https://www.flamepix.com/" data-popup-window="name,1100,800">Flamepix.com</a></code></pre><p><a href="https://www.flamepix.com/" data-popup-window="name,1100,800" class="button small">Flamepix.com large popup</a></p><hr /><h2>X3 gallery popups</h2><p>The X3 gallery uses a slightly more advanced version of the popup.</p></div><hr class="module-separator" /></div></div><div class="module row"><div class="clearfix gallery small-12 small-centered columns layout-grid frame hover images title-normal module-center" itemscope itemtype="http://schema.org/ImageGallery"><ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3 items"><li><a class="item img-link item-link x3-popup" data-width="2048" data-height="1365" data-image="/galeria/content/examples/plugins/popup/ocean-1.jpg" data-title="" data-name="Ocean 1" data-description="" data-date="05 June 2022" href="/galeria/examples/plugins/popup/ocean-1/" id="image-ocean-1" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"><figure><div class="image-container" style="padding-bottom:66.650390625%;"><img data-src="/galeria/content/examples/plugins/popup/ocean-1.jpg" data-width="2048" alt="Ocean 1" itemprop="thumbnail"></div></figure></a></li><li><a class="item img-link item-link x3-popup" data-width="2048" data-height="1360" data-image="/galeria/content/examples/plugins/popup/ocean-2.jpg" data-title="" data-name="Ocean 2" data-description="" data-date="05 June 2022" href="/galeria/examples/plugins/popup/ocean-2/" id="image-ocean-2" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"><figure><div class="image-container" style="padding-bottom:66.40625%;"><img data-src="/galeria/content/examples/plugins/popup/ocean-2.jpg" data-width="2048" alt="Ocean 2" itemprop="thumbnail"></div></figure></a></li><li><a class="item img-link item-link x3-popup" data-width="2048" data-height="1365" data-image="/galeria/content/examples/plugins/popup/ocean-3.jpg" data-title="" data-name="Ocean 3" data-description="" data-date="05 June 2022" href="/galeria/examples/plugins/popup/ocean-3/" id="image-ocean-3" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"><figure><div class="image-container" style="padding-bottom:66.650390625%;"><img data-src="/galeria/content/examples/plugins/popup/ocean-3.jpg" data-width="2048" alt="Ocean 3" itemprop="thumbnail"></div></figure></a></li></ul><hr class="module-separator" /></div></div><div class="pagenav pagenav-static"><a href="/galeria/examples/plugins/carousel/" class="pagenav-link pagenav-prev" title="Content Carousel Plugin"><span class="pagenav-text">Content Carousel</span></a></div></main></div></div><footer class="footer"><div class="icon-buttons hover-color hover-title"><a href="https://www.facebook.com/imagevue"></a><a href="https://twitter.com/imagevue"></a><a href="https://www.photo.gallery" data-icon="asterisk" data-color="#78A64F" title="X3 Photo Gallery"></a><a href="/contact/" title="Contact me"></a></div><p>&copy; 2026 <a href="/galeria/">entrerios.satsaid.com.ar/galeria</a></p><p class="x3-footer-link"><span data-nosnippet>X3 Photography Website by <a href="https://www.photo.gallery">www.photo.gallery</a></span></p></footer><script>
var x3_settings = {"title":null,"label":null,"description":null,"date":null,"image":null,"seo":{"title":null,"description":null,"keywords":null,"robots":null},"link":{"url":null,"target":"auto","width":600,"height":500,"content":false,"popup_class":null},"menu":{"items":null,"type":"normal","width":320,"hide":false,"hide_children":false,"hide_children_mobile":false,"limit":0,"click_toggle":false,"nolink":false,"list":null,"carousel_amount":3,"carousel_items":"title,amount,preview,description","data_items":"contactform,hr,icon-buttons","crop":{"enabled":true,"crop":[3,2]},"classes":null},"body":null,"layout":{"items":"context,folders,gallery","disqus":false,"classes":null,"width":"width-default"},"context":{"items":"title,description,content","hide":false,"text_align":"context-left-header-center","classes":null,"width":"narrower","crop":{"enabled":true,"crop":[2,1]},"caption":{"enabled":false,"items":"title,date","hover":false,"align":"caption-bottom-left"}},"folders":{"hide":false,"items":"title,amount,folders_amount,description,preview","width":"wide","sortby":"custom","sort":"asc","title_size":"small","assets":null,"text_align":"module-center","classes":"frame","limit":0,"split":{"enabled":false,"ratio":6,"invert":true},"crop":{"enabled":false,"crop":[3,2]},"caption":{"enabled":false,"items":"description","hover":false,"align":"caption-bottom-left"},"tooltip":{"enabled":false,"items":"title,description"},"layout":"justified","vertical":{"scrollnav":true,"horizontal_rule":true},"grid":{"use_width":false,"columns":"3,2,1","column_width":300,"space":-1},"justified":{"row_height":300,"space":10,"small_disabled":true},"columns":{"use_width":true,"column_width":300,"columns":3,"space":-1},"carousel":{"use_height":false,"amount":3,"target_height":300,"margin":1,"lazy":true,"interval":0,"show_timer":true,"background":false,"nav":true,"tabs":false,"tabs_position":"top","loop":true}},"gallery":{"hide":false,"items":"preview","width":"width-default","assets":null,"text_align":"module-center","classes":"frame,hover","sortby":"name","sort":"asc","title_size":"normal","limit":0,"clickable":true,"split":{"enabled":false,"ratio":6,"invert":true},"crop":{"enabled":false,"crop":[3,2]},"caption":{"enabled":false,"items":"title","hover":false,"align":"caption-bottom-left"},"tooltip":{"enabled":false,"items":"title,description"},"layout":"justified","vertical":{"scrollnav":true,"horizontal_rule":true},"grid":{"use_width":false,"columns":"3,2,1","column_width":300,"space":-1},"justified":{"row_height":300,"space":10,"small_disabled":false},"columns":{"use_width":true,"column_width":300,"columns":3,"space":-1},"slideshow":{"background":false,"menu_style":"menu-absolute-20","button_down":false,"button_down_remove":true,"hide_context":false,"hide_footer":false,"height":"100%","ratio":null,"nav":"none","fit":"cover","transition":"slide","transition_mobile_slide":true,"duration":500,"captions":false,"captions_hover":false,"loop":false,"autoplay":true,"interval":4000,"start_fullscreen":false,"toggle_play":true,"fullscreen_button":"auto","arrows":true,"click":true,"stopautoplayontouch":true,"keyboard":true,"swipe":true,"hash":false,"show_timer":true},"carousel":{"use_height":false,"amount":3,"target_height":300,"margin":1,"lazy":true,"interval":0,"show_timer":true,"background":false,"nav":true,"tabs":false,"tabs_position":"top","loop":true},"image":{"title":null,"title_include":"default","description":null,"description_include":"default","link":null,"link_target":"auto","popup_width":600,"popup_height":500},"embed":null},"content":null,"plugins":{"chat":{"x3_control":true,"mobile":false,"load":false},"image_background":{"enabled":false,"src":null,"custom_height":true,"height":"80%","size":"cover","fixed":false,"position":"50% 50%","below_menu":true,"menu_style":"menu-absolute-20","page_meta_title":true,"page_meta_description":true,"page_meta_content":false,"page_meta_scrollfade":true,"button_down":false,"button_down_remove":true,"hide_context":false,"hide_footer":false},"background":{"enabled":false,"src":null,"color":null,"attach":"page","menu_style":null,"fixed":false,"size":"100%","repeat":"repeat","position":"50% 0%"},"video_background":{"src":null,"disable_mobile":false,"poster_mobile":null,"menu_style":"menu-absolute-20","height":100,"autoplay":true,"toggleplay":true,"loop":true,"muted":true,"button_down":false,"button_down_remove":true,"hide_context":false,"hide_footer":false},"fotomoto":{"enabled":false,"store_id":null,"enabled_page":false,"collection":null,"buy_button":true,"buy_button_text":"Buy","buy_button_popup":"mobile","mobile_disabled":true},"audioplayer":{"enabled":true,"autoplay":true,"loop":true,"volume":1,"shuffle":false,"disabled_mobile":true,"folders":true},"disqus":{"image":true},"pagenav":{"hide_root":true,"hide_has_children":false,"position":"fixed-bottom","autohide":true},"cookie_consent":{"enabled":false,"location":true,"inherit_font":true,"message":null,"dismiss":null,"link":null,"href":null},"panorama":{"enabled":false,"index":true,"title":true,"buttons":"deviceorientation,rotate,fullscreen","scene_nav":true,"scene_loop":true,"zoom":"auto","nav":true,"keyboard":true,"lookto_taps":1,"fullscreen_taps":2,"transition":"black","transition_duration":800,"transition_scale":0.0299999999999999988897769753748434595763683319091796875,"auto_open":false,"equirect_preview":true,"equirect_resize":true,"hide_interface":true,"hide_interface_timeout":3000,"show_interface_after_nav":true,"yaw":0,"pitch":0,"fov":1.1999999999999999555910790149937383830547332763671875,"maxres_multiplier":1,"max_vfov":1.75,"max_hfov":0,"pitch_min":-90,"pitch_max":90,"reset_view":true,"autorotate_start":true,"autorotate_restart":false,"autorotate_idlemovement_timeout":2000,"autorotate_speed":0.0299999999999999988897769753748434595763683319091796875,"flat_tile_size":512,"flat_url_format":"l{z}/{y}/l{z}_{y}_{x}.jpg","flat_zero_padding":0,"flat_index_start":0,"flat_pin_levels":2}},"accounts":{"disqus_shortname":null},"style":{"styler":true,"layout":{"layout":"topbar-float","fixed":"topbar-fixed","wide":false,"overlay":true},"skin":{"skin":"black","primary_color":"steelblue","clear":"clear"},"font":{"font":"PT+Sans:400,700,400italic,700italic|logo:700|header:700|subheader:italic|topbar:uppercase|sidebar:uppercase"},"logo":{"enabled":true,"use_image":false,"title":"SATSAID Entre Ríos","logo_3d":true,"logo_3d_synch":true,"link":null}},"settings":{"diagnostics":false,"cdn_core":true,"preload":"auto","lang":"es","auto_lang":true,"pagenav":true,"cdn_files":null,"base_url":null,"date_format":"timeago","timeago_locales":true,"hide_images":"double","prevent_context":false,"sitemap":true,"feed":true,"menu_manual":false,"menu_super":false,"menu_disabled":false,"image_noindex":false},"popup":{"enabled":true,"auto_open":false,"click":"prev_next","transition":"glide","transition_custom":{"opacity":0.1000000000000000055511151231257827021181583404541015625,"x":0,"y":0,"rotate":-90,"scale":0.8000000000000000444089209850062616169452667236328125,"easing":"easeOutElastic","duration":1000},"history":true,"loop":true,"zoomEl":true,"downloadEl":false,"shareEl":true,"playEl":true,"play_interval":5,"play_transition":"inherit","captionEl":true,"hide_caption":true,"caption_transition":true,"caption_style":"block","caption_align":"center-left","caption":{"title":false,"title_from_name":false,"filename":false,"filename_ext":false,"description":false,"date":false,"exif":false,"exif_items":"model,aperture,focal_length,exposure,iso","download":false,"download_text":"Download","map":false,"map_text":"Map"},"bgOpacity":0.9499999999999999555910790149937383830547332763671875,"bg_color":"#000","bg_image":false},"toolbar":{"enabled":true,"enabled_mobile":false,"share_hover":true,"share_click":true,"show_label":true,"auto_hide":true,"overlay_fun":true,"top":65,"side":"auto","addthis":false,"items":"{\r\n  \"items\": [\r\n    {\r\n      \"id\": \"share\",\r\n      \"icon\": \"share\",\r\n      \"label\": \"Share\"\r\n    },\r\n    {\r\n      \"id\": \"facebook\",\r\n      \"icon\": \"facebook\",\r\n      \"label\": \"Share on Facebook\",\r\n      \"url\": \"https://www.facebook.com/sharer/sharer.php?u={{url}}\"\r\n    },\r\n    {\r\n      \"id\": \"twitter\",\r\n      \"icon\": \"twitter\",\r\n      \"label\": \"Tweet\",\r\n      \"url\": \"https://twitter.com/intent/tweet?text={{text}}&url={{url}}\"\r\n    },\r\n    {\r\n      \"id\": \"pinterest\",\r\n      \"icon\": \"pinterest-p\",\r\n      \"label\": \"Pin it\",\r\n      \"url\": \"http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}\"\r\n    },\r\n    {\r\n      \"id\": \"linkedin\",\r\n      \"icon\": \"linkedin\",\r\n      \"label\": \"Share on Linkedin\",\r\n      \"url\": \"http://www.linkedin.com/shareArticle?mini=true&url={{url}}&title={{text}}\",\r\n      \"display\": \"overlay\"\r\n    },\r\n    {\r\n      \"id\": \"vkontakte\",\r\n      \"icon\": \"vk\",\r\n      \"label\": \"Share on vKontakte\",\r\n      \"url\": \"http://vk.com/share.php?url={{url}}\",\r\n      \"display\": \"overlay\"\r\n    },\r\n    {\r\n      \"id\": \"tumblr\",\r\n      \"icon\": \"tumblr\",\r\n      \"label\": \"Share on Tumblr\",\r\n      \"url\": \"http://www.tumblr.com/share?v=3&u={{url}}&t={{text}}&s=\",\r\n      \"display\": \"overlay\"\r\n    },\r\n    {\r\n      \"id\": \"mailto\",\r\n      \"icon\": \"envelope\",\r\n      \"label\": \"Share by Email\",\r\n      \"url\": \"mailto:?subject={{text}}&body=Hi,%0D%0A%0D%0A{{description}}%0D%0A{{url}}\",\r\n      \"color\": \"#00bcf2\",\r\n      \"display\": \"overlay|popup\"\r\n    },\r\n    {\r\n      \"id\": \"comment\",\r\n      \"icon\": \"comment\",\r\n      \"label\": \"Post Comment\"\r\n    },\r\n    {\r\n      \"id\": \"download\",\r\n      \"icon\": \"download\",\r\n      \"label\": \"Download\",\r\n      \"url\": \"{{raw_image_url}}\"\r\n    }\r\n  ]\r\n}"},"userx":false,"x3_version":"3.30.1","site_updated":1777571531,"audio_default":["sample.mp3","sample2.mp3"],"site_json":false,"path":"/galeria"};
var x3_page = {"title":"Popup Links","label":"Popup Links","description":"X3 uses the popup for galleries, but you can also use it to display images and media in your page content. The X3 popup is perfect for images, but can also be used for videos and html content.","image":"ocean-1.jpg","link":{"target":"popup"},"context":{"items":"title,description,preview,content","crop":{"enabled":false}},"gallery":{"layout":"grid"},"type":"page","id":"p5e3e9f","permalink":"/galeria/examples/plugins/popup/","canonical":"https://entrerios.satsaid.com.ar/galeria/examples/plugins/popup/","file_path":"/content/examples/plugins/popup","preview_image_full":"https://entrerios.satsaid.com.ar/galeria/content/examples/plugins/popup/ocean-1.jpg"};
function jsFail(){
	var s = document.createElement('script');
	s.type = 'text/javascript';
	s.onload = imagevue_;
	s.src = '/galeria/app/public/js/3.30.1/x3.min.js';
	document.getElementsByTagName('head')[0].appendChild(s);
}
</script><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.0.1/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.0.1/velocity.ui.min.js"></script><script src="https://cdn.jsdelivr.net/npm/string@3.3.3/dist/string.min.js"></script><script src="https://cdn.jsdelivr.net/npm/x3.photo.gallery@3.30.1/js/x3.min.js" onerror="jsFail()" onload="imagevue_();"></script></body></html>
<!-- X3 website by www.photo.gallery -->