Giter VIP home page Giter VIP logo

galleria's Introduction

Galleria

Responsive JavaScript Image Gallery

This is the open source repository for the Galleria core, themes, plugins and everything else. Feel free to post issues - but keep them code related please. You may also do pull requests, but make sure you include some comments and/or tests.

Info, demos, docs and everything else: https://galleriajs.github.io/

FAQ

https://galleriajs.github.io//docs/references/faq.html

Installation

npm

$ npm install galleria

https://www.npmjs.com/package/galleria

bower

$ bower install galleria

https://bower.io/search/?q=galleria

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.6.1/galleria.min.js"></script>

https://cdnjs.com/libraries/galleria

galleria's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

galleria's Issues

HTML Captions?

First of all, really loving this new release. Especially with it not being HTML strict. Love it.

Was wondering if (I know I couldn't do this in the old release) I could add hyperlinks into captions with this? As if to credit a website or artist, etc?

Thanks so much. You guys rock!

Galleria loading problems (IE 7/8, FF)

Hi,
first I would like to thank you for a great script (the best gallery I've seen so far). But unfortunatelly I have couple of issues which I cant seem to find solution for. I've uploaded and set up everything with the latest version (I downloaded the latest version today)...
When I open my html file on local disk everything is fine and works great. Once I upload it to the server, things start to get a bit weird. When I open the page at first, thumbnails are strange (squarish shape - different from the usual one), main picture and the rest doesnt show at all! If I reload the page, everything works fine. This happens every time in IE 7/8 when I delete cache and reload the page. Another things which happens sometimes (after reloading page which has been already loaded before in IE and every first load in latest version of FF) is that the thumbnails load well, but the main picture doesnt show up. If I click on any picture in the carousel everything disappears!

I've tried everything and I really dont know what do to. I even tried uploading my files to different serers with the same result. Has anyone had a similar problem? My gallery is on http://new.topfoto360.cz/galerie.html. Any help would be really appreciated as I need to get this working asap. Cheers...

Options documentation?

I know you've added features, but the new code has taken a step back from the simplicity of the previous release. How about a wiki page covering the new options?

Load external thumbnails

I am trying to figure out how to use thumbnails created externally of galleria. In the JS, have a

var data = [{ image: 'images/001.jpg' }]
var thumbdata = [{ thumbimage: 'images/thumbs/001_thumb.jpg' }]

then when initiating galleria, use:
data_source:data,
thumbnails: true,
thumbnail_source:thumbdata

Is this possible?

display caption by default without clicking i

searched docs and cannot learn if there is a setting to display the caption text by default so the user doesn't have to click the i (info) button to see it. If there is no such setting, then requesting one.

How to remove tool tips from thumbnail Hover

The caption shows up as a tool tip on hovering over thumbnails in demo01 and demo02. How do I remove this? I have added line breaks in the caption, because of this the html markups show up as well in the tool tip.

custom navigation - back, forward, play, pause

I love Galleria and want to use it in a new photographer Website project. I am new to it so I apologize for asking questions maybe I should know the answers to.

I want to place custom back, forward, play, pause navigation below the images and without thumbs or captions.

I looked through the behaviors and couldn't find anything. I see how to disable thumbs and captions so I'm halfway there.

Any ideas?

Deactivate carousel

Hi,

your scritp is great! but I have a problem with the carousel. I'd like tio deactivate it and I've used the option carousel:false, but the carousel ils still here. I'm using the classic theme:

$('#galleria').galleria({
    carousel:false,
            image_crop: true,
    thumb_quality: false,
    thumb_crop: false,
    queue:false,
    max_scale_ratio:2,
    image_crop: false,
    preload:5,
    transition_speed:200,
    transition: 'fade'
    });

Thank you for your help

tiny fade...

i think in the latest build of galleria.classic.js, line 42 should be fadeIn instead of fadeTo.

and by the way, this is the best peice of code i have ever found. thanks for sharing.

Error on IE

Detalhes dos erros da página da Web

Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E; OfficeLiveConnector.1.4; OfficeLivePatch.1.3)
Carimbo de data/hora: Fri, 14 May 2010 16:33:22 UTC

Mensagem: Galleria could not load. Make sure stage has a height and width.
Linha: 25
Caractere: 13
Código: 0
URI: http://samgamgi/_layouts/SPNews/js/galleria.js

Carousel dimensions issues

The carousel appears to be having issues calculating it's dimensions to do the scrolling thing properly. Sometimes it works, but usually it doesn't...not sure why. I tested in both Chrome and Firefox on Ubuntu.

Ajax pagination in set of pictures

Hi,

I integrated the gallerie in a greybox window, and all is ok, but i have a question, how can i to use a ajax pagination for the set of pictures, i actually print only seven pictures, but i would like to click in a next botton and print other seven pictures, is it posible?

Thanks very much and very good gallery.

Demo Problem with IE6: Thumbnail Images Show Briefly then Vanish

Downloaded the current version of the code and tested the sample Demo (classic.html). Works fine in Firefox 3.6 & IE 7, but fails with IE6.

IE6 displays odd behavior: the Thumbnail Images load for a split second then vanish, leaving the entire page blank (just black background). The Current Image never loads.

DOCTYPE html

Hi

I have a site with a lot other jquery and javascript and I really would like to avoid having to write
!DOCTYPE html in the top. It works fine in FF and chrome even if I leave this out. But in ie the right arrow on the thumbnails disapears and both arrowes are visible even when a very low number of pictures. Is there any work around that lets me have full functionality without using the doctype?

Flickr trouble

I'm trying to use Classic 01 and I got an API, and whenever I put that API into the place where the downloaded code's API is, no images appear. Do i need to put the secret code anywhere or the "token" code anywhere. Nothing appears on the screen when I try to use flickr.

Using external data files (json)?

I'm trying to load a json file into galleria to provide it with image data but the documentation, despite mentioning supporting json, gives no information on what elements should be named for galleria to pick them up.

The json data is being ajaxed in just fine, but now I have no idea what to do with it. Is there some documentation somewhere that shows the naming and structure for a json file?

Individual URLs for each photo

In your Galleria 1.0 project, you offered the ability to generate individual urls for each photo in the gallery. Is this a possible in V2?

Flickr Feed

Could you please let me know where I find the feed from a Flickr album that I can insert as the source for images?

I can't seem to find a feed that matches the format that you use in your example.

Thanks!

Simon

Active Class Bug

When setting an image to be active it's unreliable that the image will actually be displayed. It flashes for a moment and then disappears about half the time.
I have the same experience with Demo 1 on the devkick site.

edit: The javascript console doesn't display anything. Also, refreshing the page causes it to display properly.
The same computer displays it just fine using firefox and opera.

Using Google Chrome 4.1.249.1064 on Windows Vista

Thumbnails disappear in IE 7

Thumbnails seem to show up when the first image is being viewed. Clicking on to other images causes the thumbnails to disappear. Cycling back to the first image causes the thumbnails to reappear once again. It seems to work fine in IE 8.

The only setting enabled is a max_scale_ratio of 1.

Doesn't work in Google Chrome

I came across your Galleria and loved it. I'm looking forward to the options documentation to be posted. I tried the code and got it to work in IE and Firefox. However this version doesn't seem to work in Google Chrome. I don't know if anyone has reported it to you yet.

Since I needed wanted to try the gallery on my current site, I reverted to using version 1.0. It is very well documented and cross browser compliant. Great job! I look forward to the learning more about he next version

racing-conditions problem?

I am trying to implement the gallery code with local content i.e.

        var data1 = [{ ... }]
        Galleria.loadTheme('...');
        jQuery('#galleria').galleria({  data_source:data1  });  

It seems there are some 'racing' problems in the code. One 'race' seems to be between the lines:

        link.href = obj.cssPath;
        ...
        obj.init.call(gallery, o);

The second line is executed before the css file has been completely loaded, and as a result css properties got wrong values.

If I manually delay the second line (by adding an alert before the line) the problem is solved, but of-course this is not a solution.

Any idea how this can be solved (or where I am wrong in my implementation)?

PS
I am using jQuery 1.4.1. and FF

Named anchors outside of Gallieria break gallery

I have several pages with Gallerias installed that also contained other named anchors that link to other areas of the site (completely outside of the Gallerias). When any named anchor on the page is clicked, whether or not it's part of the Galleria, the Galleria will search for that hash as an image, and the Galleria's main image will go blank.

Flickr again

(I added a comment to the reply you gave to my original question but the issue has been marked as closed so I'm posting again as a new entry.)

Thanks for the quick reply!

Still can't work out where to find the relevant code for an album. The feed looks like this http://api.flickr.com/services/feeds/photoset.gne?set=72157622860110078&amp;nsid=92132055@N00&amp;lang=en-us but that doesn’t work so am still lost as to where I find the relevant link.

Thanks

Regards

Simon Clement
Designer & Developer
Arawak Database Solutions
1/340 Main Street
Mornington 3931
www.arawak.com.au

Display Random Image

Is there a way to randomize which image gets displayed? I can't seem to figure it out.
Thanks!

Firefox issue

I am having an issue with Galleria on Firefox. I get the thumbnails to show up and once in a blue moon the actual images, but for some reason, it will not load the main images consistently (usually not at all.) It works great on Chrome and Safari, but breaks down in FF on both the Mac and PC.

I get the following error message:

"image not loaded in 10 seconds: http://coreyblaser.com/wp-content/gallaria/fire/010.jpg"

I know the image URLs are correct and again they shows up just fine as a thumbnail, but no go...

The gallery address can be found at http://coreyblaser.com/2010/reeds-sculpture/

Any guidance would be fantastic! (BTW, it is a wonderful piece of software)

Loading other data source

First of all my compliments on your excellent script! Customizing it so far has been quite easy (css & jquery). But now i like to load different data into your script with ajax by clicking on a button. Loading the data is not the problem, but after that the galleria script has to be re-loaded (to get the new dataset). How do i trigger the gallery init again? Somehow i cant get this to work...

Thank you,
Tom

Problems with pop-up images

I'm having an issue with my implementation of galleria. When you click on the image to launch it in the pop-up overlay, they show up small the first time. When you click reload, it works fine. I was checking it out in firebug and it looks like the height and width variables are undefined. So I think it's a load order thing or something. it's driving me nuts! anyone?

http://rhfashioncamp.com/gallery.htm

Doesn't load in IE8 on the first go around

Hi,

I'm testing my site on IE8 in Windows 7 and the galleria code doesn't start everytime. It seems to be related to the size/number of images that I am trying to display.

For example - take a look at:

http://damonbrodie.com/may_14_2010.html

Note - I have the Developer Tools->Tools>Cache->Always Load From Server enabled so that I can simulate what somebody new will see when they go to the page.

If I reduce the number of images on the site to 2 (from 12) it loads correctly in IE8.

Note - it works correctly all the time in Firefox 3.6.x

I'm using the current nightly build as of May 11, 2010

How to put a div overtop - navigation

I want to add my own navigation div overtop of the full screen gallery. I have it placed the way I want, but of course, galleria sets its own z-index to put itself to the top. Is there a workaround/solution?

Thanks,

Damon

Customisations ...

1.. Is there a way to completely disable the carousel and prevent a mouse-over bringing it back onscreen? Ie hiding or not displaying the thumbnails completely.

2.. I wish to add a footer to the CSS attached below the thumbnails-container - how do I do this and retain the border?

Thanks in advance.

data_config not working correctly...

I'm having an issue with data config where I can't get it to display the data I want it to display unless i hardcode it.

data_config: function(img) {
  return {
    title: 'testing'
  };
}

will work fine and display testing on each image.

however:

data_config: function(img) {
  return {
    title: $(img).attr('rel')
  };
}

and anything else I try like it (getting the value into a var and using that, doing it with straight js) will not work at all.

All images show briefly in IE 7 & 8

All the images in my gallery briefly show themselves in ie 7 and 8. I've attempted many css tweaks to try and combat this, but I can't seem to beat it. My gallery isn't all that different than the demos, so this is confounding me. The only thing I can come up with is that my gallery is sitting on a somewhat heavy page that takes an extra second to load. Could this be it?

Do you have an recommendations for a way to make the initial load of the images hidden, except for the active one?

Thanks!

sometimes image blacks out

Ever since the history plugin was introduced galleria will sometimes blackout the image after fading it in. I've updated to 1.1.5 and it is still present.

It appears that this only happens in firefox (3.6.4) (IE doesn't seem to exhibit this bug, not sure about ch)

I don't have a 100% use case to cause this to happen. Usually I can get it to happen starting with a link in the galleria (with the history plugin):

http://damonbrodie.com/photo.php?type=update&path=2010-05-31#/12

and then click on "Image List" and go back and forth a few times between different images and back to the Image List (lightbox). Normally when going to the galleria it loads fine (image fades in). When the bug happens, the image fades in and the immediately goes black. Debug doesn't report any errors, and galleria navigation still works - moving to new images works perfectly and it will not exhibit the bug again (until going out to the lightbox and back in, and then still only intermittently.)

It feels like a race condition of some kind....

addElement broken?

I had a working fullscreen modified theme. I have added a navigation bar using addElement and appendChild.

The divs are being added (according to firebug) but I can't see my divs. I think the gallery is higher in the z-index maybe? I've tried various values of z-index, but it isn't showing my navbar.

add noConflict mode?

Is there any intention of putting out a no-conflict release of this? Or integration of a noConflict switch that can be turned on off?

Where to replace gallery?

Hi..
I am new to JQuery. Please let me know where I need to mention the gallery path ??
Thanks in advance..

non-flickr download plugin

It would be great if there was a plugin that could download images from a normal web server via http other than via including an tag. The advantage is that the plugin can lazy load the images where as putting a bunch of large images into a single page in tags makes the page load slowly and it takes quite a while before galleria starts up. (not to mention that issue where galleria breaks in IE with large images).

Galleria and IE, FF and GC issues

I'm testing my site on IE, FF & G in Windows 7 and the galleria code doesn't start everytime. I load the images from my own database:

image.php?id=" />
        }

and then I have

<script>
Galleria.loadTheme('js/themes/classic/galleria.classic.js');
$('#galleria').galleria({
    image_crop: true,
    transition: 'fade',
    data_config: function(img) {
        return {
            description: $(img).next('p').html()
        };
    }
});
</script>

When I open the page at first, thumbnails are strange (squarish shape - different from the usual one)-IE-, sometimes the thumbails are empty but pictures works fine -GC, FF- If I reload the page, everything works fine. This happens every time in when I delete cache and reload the page.

l tried to load the theme in the head tag putting this in head:

<script>
Galleria.loadTheme('js/themes/classic/galleria.classic.js');
</script>

but I still have the problem

You can see the example here:

http://talkingwebs.net/rs/index.php?mod=re_search&ad=132&num=0&ad_type=sale&codigo=001a1100132&order_by=price
Any advise?

this.show stopped working

this.show(); has stopped working in the fullscreen theme. I updated to today's source and notice that the gallery loads and then the screen goes black. I merged the fullscreen.js code to my code and it works as expected again, until I add the this.show() call to the end, at which point the screen goes to black again.

Note that the navigation still works, and when I switch images it seems to work again.

I use the this.show() call to select which image to jump to in the gallery.

How to remove images

I changed the flickr integration to my own type. Sometimes my query returns no photos and I would like to clear the existing photos in this case so that an empty thumbnail list is shown, how can that be done?

Is there a simple example?

I've created a simple page to try and figure out how to use your code and so far haven't had any success. From looking at your website here I thought the gallery of images would be displayed in the div with the id "galleria" and images would be scaled to fit. Instead, my galleria div is empty and I see a huge picture below it which is the first image in my list. Obviously I'm doing something wrong. I was hoping I could get some direction as to what I need to do to make it work. Below is the simple code I'm using.

Thanks

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script>
<script type="text/javascript" src="galleria.js"></script>
<style media="screen,projection" type="text/css">
#galleria {width:400px; height:400px; margin:20px auto; border:3px ridge brown; }
</style>
<script>
$(document).ready(function(){
Galleria.loadTheme('themes/classic/galleria.classic.js');
$('#gallery').galleria({ transition:'fade', image_crop:true });
});
</script>
</head><body>
<div id="galleria"></div>
<div id="gallery">
<img src="back.jpg" title="back" alt="">
<img src="basement.jpg" title="basement" alt="">
<img src="front.jpg" title="front" alt="">
<img src="hall.jpg" title="hall" alt="">
</div>
</body></html>

Multiple instances

Is it possible to have multiple instances of Galleria on the same page?

jquery.history?

Does jquery.history work with the current version of Galleria?

I think I recall seeing it mentioned somewhere, but that may have been another gallery I was looking at. I've been working with Galleria all day and it's a pretty neat script. I was using Galleriffic before, but it was very buggy, so I decided to try Galleria and it's working quite nicely, but the one thing I'd really like to get working is the history plugin. Any ideas on how to do that?

API?

I'm sorry if this is a silly question, but I can't figure out how to use the API. How do I launch it?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.