<!DOCTYPE html>
<!-- X3 website by www.photo.gallery -->
<html><head><meta charset="utf-8"><title>Sample Content</title><meta name="description" content="Various sample content examples."><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/features/sample/"><link rel="dns-prefetch" href="//auth.photo.gallery"><link rel="dns-prefetch" href="//cdn.jsdelivr.net"><meta property="og:title" content="Sample Content"><meta property="og:description" content="Various sample content examples."><meta property="og:url" content="https://entrerios.satsaid.com.ar/galeria/examples/features/sample/"><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/assets/fujifilm.jpg"><meta property="og:image:type" content="image/jpeg"><meta property="og:image:width" content="1600" /><meta property="og:image:height" content="813" /><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-sample page-examples-features-sample" 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>Sample Content</span></h1><h2 class="subheader">Various sample content examples.</h2><div class="content"><hr /><h2>Markdown</h2><p>We recommend using <em>markdown</em> for basic content editing, because it is fast to write, easy to read and prevents html-coding errors. <a href="http://commonmark.org/help/">Read more</a> about markdown or check <a href="http://commonmark.org/help/tutorial/">this tutorial</a>. Although markdown is preferred for basic content editing, you will often need to use <em>html</em> for more complicated stuff.</p><hr /><h2>2-Column Grid</h2><div class='row text-left'><div class='medium-6 columns'><div class='frame'><figure><img alt='profile' src='https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f3c2.svg'></figure></div></div><div class='medium-6 columns'><p><strong>Hi!</strong><br>
  My name is Bob Dobalina, and this website is my blog as well as a playground
  for the X3 Photo Gallery website CMS. <a href='https://www.photo.gallery' target='_blank'>View Demo</a></p><p><strong>About me</strong><br>
  I am interested in design, functionality, minimalism and performance. My hobbies are sleep-walking, planking and fishing.</p><p><strong>Article</strong><br>
  More than a decade ago, when SWF was an emerging technology, this website
  became a very popular showcase of Flash. <a href=
  'https://mjau-mjau.com/blog/rewind-web-2002/'>See Post</a></p></div></div><hr /><h2>Block Grid</h2><ul class='small-block-grid-2 medium-block-grid-2 large-block-grid-3'><li><div data-alert class="alert-box bg2"><strong>Block Grid</strong><br>Block grids give you a way to evenly separate contents of a list within a grid. If you want to create a row with a specific amount of elements that need to stay evenly spaced, the block grid is your friend.</div></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f693.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f691.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f692.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f699.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f695.svg"></li></ul><hr /><h2>Carousel Plugin</h2><div data-carousel data-carousel-items=3 data-carousel-loop=true data-carousel-dots=true data-carousel-autoplay=3000 data-carousel-responsive=true data-carousel-shuffle=false class="text-center"><div><h3>Camel</h3><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f42b.svg" /></div><div><h3>Fish</h3><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f41f.svg" /></div><div><h3>Squirrel</h3><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f43f.svg" /></div><div><h3>Goat</h3><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f410.svg" /></div><div><h3>Elephant</h3><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f418.svg" /></div><div><h3>Ox</h3><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f402.svg" /></div><div><h3>Whale</h3><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f433.svg" /></div><div><h3>Blowfish</h3><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f421.svg" /></div><div><h3>Turtle</h3><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f422.svg" /></div></div><hr /><h2>Embed Sources</h2><h3>Vimeo</h3><div class="flex-video widescreen vimeo x3-style-frame"><iframe src="//player.vimeo.com/video/84067859" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div><h3>Youtube</h3><div class="flex-video widescreen x3-style-frame"><iframe src="//www.youtube.com/embed/A3PDXmYoF5U" frameborder="0" allowfullscreen></iframe></div><h3>Google Maps</h3><div class="flex-video x3-style-frame" style="height:400px;"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d424396.3176723366!2d150.92243255000002!3d-33.7969235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b129838f39a743f%3A0x3017d681632a850!2sSydney+NSW%2C+Australia!5e0!3m2!1sen!2sth!4v1415268600966" frameborder="0" style="border:0"></iframe></div><h3>Self-hosted Video</h3><video width=100% preload="metadata" class="x3-style-frame" controls controlsList="nodownload"><source src="/galeria/content/examples/features/sample/SampleVideo_720x480_1mb.mp4" type="video/mp4"></video><hr /><h2>Font Icons</h2><p>Easily add icons into your page designs with the included <a href="https://fontawesome.com/v4.7.0/icons/">Font Awesome</a>. Font icons are vector-based, so they look good at any size, and can be styled with CSS.</p><div class="small-block-grid-5 text-center"><li class='fa fa-camera-retro fa-4x'></li><li class='fa fa-heart fa-4x' style='color:tomato;'></li><li class='fa fa-tree fa-4x' style='color:yellowgreen;' ></v><li class='fa fa-star fa-4x'  style='color:gold;'></li><li class='fa fa-tripadvisor fa-4x color-primary' style='color:#589442;'></li></div><pre data-lang="html"><code><i class='fa fa-rocket'></i></code></pre><hr /><h2>Custom Forms</h2><p>Add any elements to your contact form. All data will be forwarded by email.</p><form data-abide class="contactform"><div><input type="text" name="name" placeholder="Name" required></div><div><input type='email' name='email' placeholder='Email' required></div><div><input type="tel" name="Phone Number" placeholder="Phone number"></div><div><strong>Ice Cream Flavor</strong><select name="Ice Cream Flavour"><option value="Vanilla flavor">Vanilla</option><option value="Chocolate flavor">Chocolate</option><option value="Strawberry flavor">Strawberry</option><option value="Pistachio flavor">Pistachio</option></select></div><div><strong>Favorite color</strong><br><input type="radio" name="Favorite Color" value="Red" id="radio1" checked><label for="radio1">Red</label><input type="radio" name="Favorite Color" value="Blue" id="radio2"><label for="radio2">Blue</label><input type="radio" name="Favorite Color" value="Green" id="radio3"><label for="radio3">Green</label></div><div><strong>I like to</strong><br><input type="checkbox" name="sleep" value="Yes!" id="check1" checked><label for="check1">Sleep</label><input type="checkbox" name="snooze" value="As long as possble" id="check2"><label for="check2">Snooze</label><input type="checkbox" name="doze" value="All the time" id="check3"><label for="check3">Doze</label></div><div><strong>Message</strong><textarea required rows="6" name="message" placeholder="Add your message"></textarea></div><div><input type="checkbox" id="consent" name="consent" required><label for="consent">By using this form you agree with the handling of your data by this website.</label></div><button type=submit>Send</button></form><hr /><h2>Modal Plugin</h2><p>The modal plugin allows you to open popup dialog windows, useful for displaying relevant information. Modals are usually triggered by buttons, but can also be triggered on page-load.</p><p><button class="button" data-reveal-id="myModal">Open Modal</button></p><div id="myModal" class="reveal-modal medium" data-reveal aria-labelledby="myModalTitle" aria-hidden="true" role="dialog"><a class="close-reveal-modal" aria-label="Close"><i class="fa fa-close"></i></a><h2 id="myModalTitle">Modal Plugin </h2><p>The modal plugin allows you to open popup dialog windows</p><ul class="small-block-grid-3"><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f693.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f691.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f692.svg"></li></ul><h3>Modal Element</h3><p>Simply add a modal to your page. The modal will be hidden until triggered:</p><pre data-lang="html"><code><div id="myModal" class="reveal-modal" data-reveal aria-labelledby="myModalTitle" aria-hidden="true" role="dialog"><br><a class="close-reveal-modal" aria-label="Close"><i class="fa fa-close"></i></a><br><h2 id="myModalTitle">Modal Plugin</h2><br><p>Add your modal content here. Any HTML is supported.</p><br></div></code></pre><h3>Modal Trigger Link</h3><p>Add a button or anchor to trigger a modal with a specific ID on click:</p><pre data-lang="html"><code><button class="button" data-reveal-id="myModal">Open Modal button</button><br><a href="#" data-reveal-id="myModal">Open Modal link</a></code></pre><p><strong>data-reveal-open</strong><br>
    Add the <code>data-reveal-open</code> attribute to automatically open the modal on page-load.</p><p><strong>data-reveal-open-once</strong><br>
  Use the <code>data-reveal-open-once</code> attribute instead, to open the modal only once per visitor.</p><p><strong>url#modal=id</strong><br>
    Trigger a modal to open by URL.</p></div><hr /><h2>Tabs</h2><div id="tabs-demo-settings" class="clearfix" style="display: inline-block;"><ul id="tabs-demo-orientation" class="button-group radius" style="float:left;margin-right:10px;"><li><button class="button tiny bg3" data-orientation="horizontal">Horizontal</button></li><li><button class="button tiny bg2" data-orientation="vertical">Vertical</button></li></ul><ul id="tabs-demo-style" class="button-group radius" style="float:left;"><li><button class="button tiny bg3" data-remove="tabs-style-1 tabs-style-2">Default Style</button></li><li><button class="button tiny bg2" data-add="tabs-style-1" data-remove="tabs-style-2">Style 1</button></li><li><button class="button tiny bg2" data-add="tabs-style-2" data-remove="tabs-style-1">Style 2</button></li></ul></div><section id="tabs-demo" class="tabs-container tabs-radius tabs-color-active tabs-anizm"><ul class="tabs small-block-grid-4" data-tab><li class="tab-title active"><a href="#panel1">Intro</a></li><li class="tab-title"><a href="#panel2">Code</a></li><li class="tab-title"><a href="#panel3">Styles</a></li><li class="tab-title"><a href="#panel4">Sample</a></li></ul><div class="tabs-content"><div id="panel1" class="content active"><h3>Tabs content plugin</h3><p>The tabs plugin allows you to easily add an interactive tabs section anywhere in your content. Tabs can be useful to separate related content into clickable sections. Choose from horizontal or vertical orientation, three styles and several helper classes. Tabs respond appropriately on small (mobile) screens, and page will scroll to fit tabs when there is extensive content.</p></div><div class="content" id="panel2"><h3>Sample Code</h3><p>To create a tabs-layout, you need to use the following code:</p><pre data-lang="html"><code><!-- Wrap all code inside a <section> with tabs-container class --><br><!-- Optional styles:<br>tabs-style-1 / tabs-style-2<br>tabs-radius<br>tabs-anim<br>tabs-color-active<br>tabs-wide (only horizontal orientation)<br>tabs-small / tabs-large<br>tabs-center / tabs-right (only horizontal orientation)<br>tabs-width-auto / tabs-width-30 / tabs-width-50 (only vertical orientation) <br>--><br><section class="tabs-container tabs-style-1 tabs-radius tabs-anim tabs-color-active"><br><br><!-- Create a ul list that contains the tab links --><br><!-- include the vertical class only if you want to use vertical orientation --><br><ul class="tabs vertical" data-tab><br><li class="tab-title active"><a href="#panel1">Tab 1</a></li><br><li class="tab-title"><a href="#panel2">Tab 2</a></li><br><li class="tab-title"><a href="#panel3">Tab 3</a></li><br><li class="tab-title"><a href="#panel4">Tab 4</a></li><br></ul><br><br><!-- Create a tabs content element that contains all tab contents  --><br><!-- include the vertical class only if you want to use vertical orientation --><br><div class="tabs-content vertical"><br><div class="content active" id="panel1"><br><p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p><br></div><br><div class="content" id="panel2"><br><p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p><br></div><br><div class="content" id="panel3"><br><p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p><br></div><br><div class="content" id="panel4"><br><p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p><br></div><br></div><br><br><!-- End tabs container --><br></section></code></pre></div><div class="content" id="panel3"><h3>Styles</h3><p><span class="label radius bg3">vertical</span><br>
Include the <em>vertical</em> class in both your UL <em>tabs</em> element and your <strong><em>tabs-content</em></strong> element set vertical tabs orientation, instead of the default horizontal orientation.</p><p><span class="label radius bg3">tabs-style-1</span><span class="label radius bg3">tabs-style-2</span><br>
Include any style class in your <em>tabs-container</em> element, to add a style different from the default style.</p><p><span class="label radius bg3">tabs-anim</span><br>
Include the <em>tabs-anim</em> class in your <em>tabs-container</em> element to make your tabs fade in on change.</p><p><span class="label radius bg3">tabs-radius</span><br>
Include the <em>tabs-radius</em> in your <em>tabs-container</em> element class to give your tabs rounded corners.</p><p><span class="label radius bg3">tabs-color-active</span><br>
Include the <em>tabs-color-active</em> class in your <em>tabs-container</em> element to colorize the active tab.</p><p><span class="label radius bg3">tabs-wide</span><br>
Include the <em>tabs-wide</em> class in your <em>tabs-container</em> element to make your tabs wider. <em>* Only applies for horizontal tabs orientation.</em></p><p><span class="label radius bg3">tabs-small</span><span class="label radius bg3">tabs-large</span><br>
Include the <em>tabs-small</em> or <em>tabs-large</em> class in your <em>tabs-container</em> element to make your tabs smaller or bigger. <em>Does not apply for small (mobile) screens.</em></p><p><span class="label radius bg3">tabs-center</span><span class="label radius bg3">tabs-right</span><br>
Include the <em>tabs-center</em> or <em>tabs-right</em> class in your <em>tabs-container</em> element to make your tabs align center or right, instead of the default left. <em>* Only applies for horizontal tabs orientation.</em></p><p><span class="label radius bg3">tabs-width-30</span><span class="label radius bg3">tabs-width-50</span><span class="label radius bg3">tabs-width-auto</span><br>
Include the <em>tabs-width-30</em>, <em>tabs-width-50</em> or <em>tabs-width-auto</em> class in your <em>tabs-container</em> element to set the % width of your vertical orientation tabs, instead of the default 20%.<em>* Only applies for vertical tabs orientation.</em></p><p><span class="label radius bg3">small-block-grid-*</span><br>
Include the <em>small-block-grid-*</em> class in your UL <em><strong>tabs</strong></em> element to make your tabs justify to full width. Replace the * with the amount of tabs you have. <em>* Only applies for horizontal tabs orientation.</em></p></div><div class="content" id="panel4"><h3>Sample Content</h3><div class="small-block-grid-5"><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f693.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f691.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f692.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f699.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f695.svg"></li></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac rutrum est. Aliquam sit amet risus aliquet, sagittis risus eu, facilisis ex. Fusce eu neque et purus accumsan maximus maximus nec lacus. Nulla auctor augue ut fermentum venenatis. Donec volutpat ullamcorper felis, in tincidunt tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eleifend finibus tellus, et consectetur nulla pellentesque eu. In et justo risus. Donec sed dolor sit amet dolor cursus aliquam ut vel justo. Praesent sed quam diam. Duis scelerisque lectus non venenatis elementum.</p><p><span class="label success radius">Ok!</span> Etiam id commodo lorem. Nulla maximus fermentum nibh eget consectetur. Suspendisse luctus nunc orci, eget varius arcu tempor non. Duis ac efficitur augue, eu sollicitudin nisi. Praesent ligula tellus, consequat non tellus sit amet, fringilla gravida justo. Duis in justo at magna ornare tristique quis non risus. Fusce feugiat finibus urna quis rhoncus. Praesent feugiat eget tortor quis imperdiet. Praesent nulla lacus, ornare vel velit non, efficitur fringilla nibh. Cras nisi sapien, dapibus pretium nunc a, rhoncus tincidunt urna. Donec tristique nunc turpis, sed aliquam leo tincidunt sit amet. Integer vitae vehicula elit. Pellentesque aliquet nisi sit amet ullamcorper facilisis. Morbi quis turpis urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p></div></div></section><hr /><h2>Alert Box</h2><p>Alert boxes allow you to emphasize content by adding it inside a box. <a href=# data-reveal-id="alert-help">[code]</a></p><div data-alert class="alert-box bg2"><h2>Alert box example</h2><p>This is a simple alert-box with text and images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere, risus quis malesuada fringilla, metus nulla consectetur mi, a ullamcorper mi eros et mi. Pellentesque facilisis libero at orci finibus porta quis eget urna.</p><div class="small-block-grid-5"><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f693.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f691.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f692.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f699.svg"></li><li><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/1f695.svg"></li></div></div><div data-alert class="alert-box success"><h3>Dismissible Alert Box</h3>
This alert box can be dismissed by clicking the <i class="fa fa-close"></i> close button.
<a href="#" class="close close-x"></a></div><div data-alert class="alert-box alert">
This is a minimal alert box. Close it!
<a href="#" class="close close-x"></a></div><div id="alert-help" class="reveal-modal medium" data-reveal aria-hidden="true" role="dialog"><a class="close-reveal-modal" aria-label="Close"><i class="fa fa-close"></i></a><h2>Alert Boxes</h2><p>To add an alert-box, simply add your content inside the following <em>html</em>:</p><pre data-lang="html"><code><div data-alert class="alert-box bg2">
Your html/content here

<!-- To make the alert-box dimissable, include a close button --><br><a href="#" class="close close-x"></a><br></div></code></pre><p>You can choose from the following color tags<br><span class="label bg2">bg2</span><span class="label bg3">bg3</span><span class="label primary">primary</span><span class="label alert">alert</span><span class="label warning">warning</span><span class="label success">success</span><span class="label info">info</span><span class="label"><em>default</em></span></p></div><hr /><h2>Labels</h2><p><span class="label info">label</span><br />
Use labels to add emphasis to any content.</p><pre data-lang="html"><code><span class="label info">Text</span></code></pre><p>You can choose from the following color tags:</p><p><span class="label primary">primary</span><span class="label alert">alert</span><span class="label warning">warning</span><span class="label success">success</span><span class="label info">info</span><span class="label"><em>default</em></span><span class="label bg2">bg2</span><span class="label bg3">bg3</span></p><hr /><h2>Code Highlighter</h2><p>Use the code highlighter to colorize code for easy viewing and copying. Useful for technical articles.</p><pre data-lang="javascript"><code>
var googoo = 'gaga';
function get_googoo(){
    return googoo;
}
get_googoo(); // returns 'gaga'
</code></pre><hr /><h2>Toggle Content</h2><p>Sometimes you want to hide long sections of content until the visitor chooses to view more. Simply add a toggle button link, and an element that contains the hidden content. You can toggle any kinds of content and the toggle link can be <em>before</em> or <em>after</em> the hidden content. <span class="toggle-content">Toggle can also be effective to create FAQs or to simply hide long image descriptions like in <a href="https://demo.photo.gallery/examples/features/captions/#&gid=1&pid=spectacles" target="_blank">this example</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique quis justo luctus pulvinar. Nulla venenatis lacus eget sapien pretium dignissim. Duis feugiat magna vitae fermentum euismod.</span><br /><a class="toggle-button" data-close-text="less">more</a></p><p><a class="toggle-button" data-close-text="hide code">code</a></p><pre data-lang="html" class="toggle-content" data-header="false"><code><!-- hidden content must have class "toggle-content" --><br><!-- toggle button must have class "toggle-button" --><br><span class="toggle-content">This text is hidden.</span><br><a href="#" class="toggle-button" data-close-text="less">more</a><br><br><!-- link placed before content --><br><a href="#" class="toggle-button" data-close-text="less">more</a><br><div class="toggle-content">This text is hidden.</div><br><br><!-- Use the data-close-text attribute to set the close text for the link --><br><a href="#" class="toggle-button" data-close-text="CLOSE">OPEN</a><br><div class="toggle-content">This text is hidden.</div></code></pre><script>
function x3_inline_function(){
    var container = $('#tabs-demo'),
            tabs = container.children('ul.tabs'),
            content = container.children('.tabs-content'),
            settings =  $('#tabs-demo-settings');
            
    settings.on('click', 'button', function(event) {
        if($(this).data('add')) container.addClass($(this).data('add'));
        if($(this).data('remove')) container.removeClass($(this).data('remove'));
        if($(this).data('orientation') == 'vertical') {
            tabs.addClass('vertical').removeClass('small-block-grid-4');
            content.addClass('vertical');
        } else if($(this).data('orientation') == 'horizontal'){
            tabs.removeClass('vertical').addClass('small-block-grid-4');
            content.removeClass('vertical');
        }
        $(this).closest('ul').find('button').removeClass('bg3').addClass('bg2');
        $(this).removeClass('bg2').addClass('bg3');
    });
};
</script></div><hr class="module-separator" /></div></div><div class="pagenav pagenav-static"><a href="/galeria/examples/features/post/" class="pagenav-link pagenav-next"><span class="pagenav-text">Blog Post</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 Online Portfolio 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":"Sample Content","label":"Sample Content","description":"Various sample content examples.","image":"examples/assets/fujifilm.jpg","gallery":{"hide":true},"type":"page","id":"p3a5d31","permalink":"/galeria/examples/features/sample/","canonical":"https://entrerios.satsaid.com.ar/galeria/examples/features/sample/","file_path":"/content/examples/features/sample","preview_image_full":"https://entrerios.satsaid.com.ar/galeria/content/examples/assets/fujifilm.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 -->