galleria
The JavaScript Image Gallery
Galleria – Responsive JavaScript Image Gallery
We are using jQuery thickbox to dynamically display an iframe when someone clicks on a picture. In this iframe, we are using galleria a javascript library to display multiple pictures.
The problem seems to be that $(document).ready in the iframe seems to be fired too soon and the iframe content isn't even loaded yet, so galleria code is not applied properly on the DOM elements. $(document).ready seems to use the iframe parent ready state to decide if the iframe is ready.
If we extract the function called by document ready in a separate function and call it after a timeout of 100 ms. It works, but we can't take the chance in production with a slow computer.
$(document).ready(function() { setTimeout(ApplyGalleria, 100); });
My question: which jQuery event should we bind to to be able to execute our code when the dynamic iframe is ready and not just it's a parent?
Source: (StackOverflow)
This is my html (im using Galleria Image Gallery - JQuery Based)
<div id="galleria">
<img alt="Productname 1" src="bens_img/1.jpg">
<img alt="Productname 2" src="bens_img/2.jpg">
<img alt="Productname 3" src="bens_img/3.jpg">
<img alt="Guess what?" src="bens_img/4.jpg">
</div>
Pseudo Code
Get string from <alt> from <img>
Create a new <li> and paste the <alt> string from <img> in it
This should be done with all (ie: four) img alt strings. It should look like this:
<ul class="textformat">
<li>Productname 1</li>
<li>Productname 2</li>
<li>Productname 3</li>
<li>Guess what?</li>
</ul> <!-- yeah this was all done by java-script -->
Source: (StackOverflow)
I am building a site with the gallery as the main feature, and I need the gallery to have "categories". I am going to load in the images via AJAX but at the moment just getting the Galleria gallery to load in different images is proving challenging. My code is as follows:
function swap_gallery() {
var new_slideshow = [
{ image: '../images/slideshow/architecture_3.jpg' },
{ image: '../images/slideshow/report_1.jpg' }
];
Galleria.get(0).load({
data_source: new_slideshow
});
}
When I run this function I get this error in Firebug:
Error: Load failed: no data found.
For the life of me I can't work this one out.
Source: (StackOverflow)
I am using Galleria for a slideshow. I want to place a small, 'Larger' link beside the stage.
I have this code for the 'Larger' button:
this.fullres = this.create('div', 'fullres');
this.get('fullres').innerHTML = '<a rel='nofollow' href="#">Larger</a>';
this.appendChild('fullres', this.fullres);
I have this code that assigns every <img>'s rel= tag to the full sized image URL from the page's custom field:
<img ... rel="<?=$attachments[$i]['fullres']?>" />
With JQuery, I am hoping to pull the active image's rel= tag value and append the .fullres href tag. This is the code I have so far, but it doesn't work:
var title = $(.images).attr('rel'); // pulls the fullres url from the rel tag
$('.galleria-fullres').attr('href', ); //append the galleria fullres href with the rel info
Source: (StackOverflow)
I am wondering if anyone knows how to toggle between full screen and normal mode in Galleria
The only way I can think of is to switch between themes : default, and Fullscreen theme (which i bought from there)
If you know an even better way, I would appreciate your help.
Source: (StackOverflow)
i am playing with this library, Galleria, which is pretty neat. here is the url below:
http://devkick.com/lab/galleria/
but i can't see anyway to move from one thumbnail to another with the keyboard (right, left, etc) . . has anyone used this library and got this working?
Source: (StackOverflow)
I am using Galleria plugin but what I want to do is center the main object which is the audio player inside the galleria slider. But how can I do this?
Below is basic galleria style:
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; }
</style>
I have demo application page here: DEMO
UPDATE:
Below is current code where try to pick each specific audio player in slider and center it:
<?php
$j = 0;
?>
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; margin:0; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<a rel='nofollow' href="audio.php?key=<?php echo $key; ?>&j=<?php echo $j; ?>&a=<?php echo $a; ?>"><img class="iframe" src="Images/audiothumbnail.png"></a>
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
$(window).load(function(){
var key = '<?php echo $key; ?>';
var j = '<?php echo $j; ?>';
$("#galleriaaudio_"+key)
.find("iframe")
.contents()
.find("#jp_container_"+key+"-"+j)
.attr('style', 'margin: 0 auto');
});
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
Below is releavt divs belonging to each audio player which gives each audio player uniqueness:
<div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
<div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">
Source: (StackOverflow)
I just finished building my Shopify theme from scratch. It is my first responsive design, and I am very happy with everything expect for one major problem.
On our product page, we use a fullscreen image gallery from galleria.io as our background to display our product images. On a desktop it is a very nice experience.
View on mobile device: http://finegra.in/products/bowden
However, on mobile devices, the background images makes the page have a fixed constraint, meaning that any content that doesn't make it on the viewport is impossible to scroll down an view.
Basically, I'm trying to figure out how to break out of the fixed constraint while still keeping the fullscreen background images.
Actually, I would be fine with launching the fullscreen gallery overtop of the content on mobile devices instead of it serving as the background.
Any help with this would be greatly appreciated.
Here is the HTML for the fullscreen background gallery:
<div id="galleria">
<div class="galleria-container notouch fullscreen" style="width: 100%; height: 100%;">
<div class="galleria-stage">
<div class="galleria-images" style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;">
<div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; transition: none 0s ease 0s ; opacity: 0; z-index: 0;">
<div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2;"></div>
</div>
<div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; opacity: 1; width: 1663px; height: 960px; transition: none 0s ease 0s ; z-index: 1;">
<div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; display: none;"></div>
<img width="1663" height="1108" style="display: block; opacity: 1; min-width: 0px; min-height: 0px; max-width: none; max-height: none; width: 1663px; height: 1108px; position: absolute; top: -74px; left: 0px;" src="http://cdn.shopify.com/s/files/1/0207/2640/products/MG_9400_1024x1024.jpeg?156">
</div>
</div>
<div class="galleria-loader" style="opacity: 1; display: none;"></div>
<div class="galleria-counter" style="opacity: 1;">
<span class="galleria-current">1</span>
/
<span class="galleria-total">10</span>
</div>
<div class="galleria-image-nav">
<div class="galleria-image-nav-right" style="opacity: 0.5; display: block;"></div>
<div class="galleria-image-nav-left" style="opacity: 0.5; display: block;"></div>
</div>
</div>
<div class="galleria-thumbnails-container" style="top: 884px; opacity: 1;">
<div class="galleria-thumb-nav-left disabled"></div>
<div class="galleria-thumbnails-list" style="overflow: hidden; position: relative;">
<div class="galleria-thumbnails" style="overflow: hidden; position: relative; width: 180px; height: 10px; left: 0px;">
<div class="galleria-image active">
<span class="img" style="opacity: 1;"></span>
</div>
<div class="galleria-image">
<span class="img" style="opacity: 1;"></span>
</div>
<div class="galleria-image">
<span class="img" style="opacity: 1;"></span>
</div>
<div class="galleria-image">
<span class="img" style="opacity: 1;"></span>
</div>
<div class="galleria-image">
<span class="img" style="opacity: 1;"></span>
</div>
<div class="galleria-image">
<span class="img" style="opacity: 1;"></span>
</div>
<div class="galleria-image">
<span class="img" style="opacity: 1;"></span>
</div>
<div class="galleria-image">
<span class="img" style="opacity: 1;"></span>
</div>
<div class="galleria-image">
<span class="img" style="opacity: 1;"></span>
</div>
<div class="galleria-image">
<span class="img" style="opacity: 1;"></span>
</div>
</div>
</div>
<div class="galleria-thumb-nav-right disabled"></div>
<div class="galleria-thumbnails-tab" style="visibility: hidden;"></div>
</div>
<div class="galleria-info" style="position: absolute; left: -10000px; display: block; opacity: 1;">
<div class="galleria-info-text" style="width: 1623px;">
<div class="galleria-info-title" style="display: none;"></div>
<div class="galleria-info-description">BOWDEN</div>
</div>
</div>
<div class="galleria-tooltip" style="opacity: 0;"></div>
</div>
</div>
</div>
Here is the CSS for it:
#galleria {
background: none repeat scroll 0 0 #FFFFFF;
position: relative;
z-index: 1;
}
.galleria-container {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.galleria-container {
background: none repeat scroll 0 0 #FFFFFF;
}
.galleria-container, .galleria-stage, .galleria-images, .galleria-image img, .galleria-image-nav, .galleria-image-nav-left, .galleria-image-nav-right, .galleria-thumbnails-container, .galleria-info, .galleria-tooltip {
margin: 0;
padding: 0;
}
.galleria-stage {
height: 100%;
position: absolute;
width: 100%;
}
.galleria-thumbnails-container {
bottom: 0;
padding-top: 16px;
position: absolute;
width: 100%;
z-index: 2;
}
Source: (StackOverflow)
I'm trying to import/show the photos from the Flickr photostream (or set) using Galleria (http://galleria.aino.se/). I couldn't find any useful info in the Galleria documentation. How to go about doing that?
Source: (StackOverflow)
Since jQuery.browser is deprecated and jQuery.support is the recommended tool to tackle browser issues, what's the recommended way to handle the following problem?
The Fullscreen theme of the Galleria jquery plugin doesn't work properly (wrong image positioning) in IE < 8 and in IE 8 and 9 compatibility view mode. Doctype is HTML 5, and turning off that mode with
<meta http-equiv="X-UA-Compatible" content="IE=edge">
does its job, but how do I use jQuery.support properly do check if the IE version is < 8 or the compatibility view is somehow still turned on (because then we use another theme for these users)?
Update: Here's the code we use now (at the bottom of the html).
<script type="text/javascript">
$(document).ready(function () {
if ($.browser.msie && $.browser.version < 8) {
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
/* ... */
});
} else {
Galleria.loadTheme('js/galleria/themes/fullscreen/galleria.fullscreen.min.js');
$("#gallery").galleria({
/* ... */
});
}
});
</script>
Source: (StackOverflow)
In this code,
<p:galleria value="#{Bean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="true"
<p:graphicImage value="/images/galleria/#{image}" alt="Image Description for #{image}" title="#{image}"/
</p:galleria>
how do you get selectedImage? as expressed in
<p:carousel id="carousel" value="#{tableBean.carsSmall}" var="car" itemStyleClass="carItem" headerText="Cars">
<p:graphicImage id="image" value="/images/cars/#{car.manufacturer}.jpg"/>
<h:panelGrid columns="2" style="width:100%" cellpadding="5">
<h:outputText value="Model: " /><h:outputText id="model" value="#{car.model}" />
</h:panelGrid>
<p:commandLink id="view" update=":form:carDetail" oncomplete="carDialog.show()" title="View Detail">
<h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{car}"
target="#{tableBean.selectedCar}" />
</p:commandLink>
</p:carousel>
Source: (StackOverflow)
I've recently had a trouble making Galleria plugin work with Rails 4 Pipeline and it took me a while to figure out how to make it work, so I wanted to share the solution in case somebody has the similar problem.
1) After downloading the plugin, put galleria-1.3.3.js ( it's the current version on the day I write it ) and galleria.classic.js ( or other style js file ) to vendor/assets/javascripts
2) Put galleria.classic.css ( or other theme stylesheet) to vendor/assets/stylesheets
3)Add //= require galleria-1.3.3 and //= require galleria.classic to your application.js file and *= require galleria.classic to application.css file
4) Asset pipeline adds fingerprints to the images and that makes it difficult to access them via usual css, so it's needed to add 'scss' to your galleria stylesheet, like this galleria.classic.css.scss and change url(classic-map.png) to asset_url("classic-map.png");and the same with the second image.
5)Open galleria.classic.js file and find there css:"galleria.classic.css" or something like that, and change it to css: false
6) Now you just need to add Galleria.run('#galleria'); or something different for other elements in some js file` and that should work :)
PS I am a noob in Rails and might have made some foolish mistakes, but I hope this will be helpful for anybody :)
Source: (StackOverflow)
I'm trying to use this plugin Galleria in its responsive mode, which basically means it will re draw itself based on its container size as the window re-sizes. The demo on the link I've provided shows a really good example. You can see that, as you resize your window, the whole gallery adjusts accordingly. Now my issue is, the plugin won't let me initialize the gallery unless a height has been specified for the DOM element that is used as its container. This means, I've had to write a whole lot of javascript code to respond window resizes - it destroys the point of it having a responsive mode quite a bit - but in the website above, nowhere can I find an explicit height specified. Can someone explain to me where I'm going wrong?
Source: (StackOverflow)
I am using the Galleria slideshow on my site, but I've noticed an error that seems to happen very randomly. Most of the time the slideshow loads correctrly but once in a while I get this error:
Uncaught Error: Fatal error: Theme at javascript/themes/classic/galleria.classic.js
could not load, check theme path.
When I reload the page, it's all back to normal.
This is the code I'm using to load it:
<script>
// Load the classic theme
Galleria.loadTheme('javascript/themes/classic/galleria.classic.js');
</script>
I have searched around but still haven't found a solution that works. My personal idea was to have a script that keeps loading until it succeeds, since on reload the page works.
How would I do this?
Source: (StackOverflow)
I´m talking about this Galleria plugin. Maybe this is too simple, but I can´t find anything in the documentation page: I have this galleria implementation. I want to add a different link to every image, so that the user can click on some image and go somewhere. How can I do that? Or where to find the answer?
Source: (StackOverflow)