blueimp / gallery Goto Github PK

How can I set an onclose event? Could you give me some examples?

I didn't see this in your documentation (sorry if I missed it), is there anyway to force the plugin to create thumbnails given the base image?

This is a new problem I'm experiencing after I updated to the latest version 2.5.0. This is happening on your demo page and my website as well.

First, I make the browser small, then I initiate the gallery, then I readjust the size of the browser, or maximize it in this case, and this happens:

Hello, I hope this isn't me being stupid - but whilst the thumbnails are immediately flushed against each other vertically, a gap appears between every image to the right and to the left. Also, when I hover the mouse over the image, a line appears in the centre of this gap between the image hovered on and the image next to it... Thanks!

<!-- Bootstrap core CSS -->

<!-- Custom styles for this template -->

<link rel="stylesheet" href="<?php echo base_url().'cssim/blueimp-gallery.min.css' ?> ">

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title">Photos</h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>

<div id="links">
<a href="<?php echo base_url().'img/Bynglo-1-Llai.jpg'?>" title="View from Garden">
    <img height=75 width=75 src="<?php echo base_url().'img/Bynglo-1-Llai.jpg'?>" alt="View from Garden">
</a>
<a href="<?php echo base_url().'img/Bynglo-2-Llai.jpg'?>" title="Rear of Bungalow">
    <img height=75 width=75 src="<?php echo base_url().'img/Bynglo-2-Llai.jpg'?>" alt="Rear of Bungalow">
</a>
<a href="<?php echo base_url().'img/Bynglo-3-Llai.jpg'?>" title="Side View">
    <img height=75 width=75 src="<?php echo base_url().'img/Bynglo-3-Llai.jpg' ?>" alt="Side View">
</a>
<a href="<?php echo base_url().'img/Bynglo-4-Llai.jpg' ?>" title="Friendly Face">
    <img height=75 width=75 src="<?php echo base_url().'img/Bynglo-4-Llai.jpg' ?>" alt="Friendly Face">
</a>
<a href="<?php echo base_url().'img/Bynglo-5-Llai.jpg' ?>" title="Rear">
    <img height=75 width=75 src="<?php echo base_url().'img/Bynglo-5-Llai.jpg' ?>" alt="Rear">
</a>

<a href="<?php echo base_url().'img/Bynglo-6-Llai.jpg' ?>" title="Front">
    <img height=75 width=75 src="<?php echo base_url().'img/Bynglo-6-Llai.jpg' ?>" alt="Front">
</a>
<a href="<?php echo base_url().'img/Bynglo-7-Llai.jpg' ?>" title="Kids">
    <img height=75 width=75 src="<?php echo base_url().'img/Bynglo-7-Llai.jpg' ?>" alt="Kids">
</a>
<a href="<?php echo base_url().'img/Utility.jpg' ?>" title="Utility Room">
    <img height=75 width=75 src="<?php echo base_url().'img/Utility.jpg' ?>" alt="Utility Room">
</a>
<a href="<?php echo base_url().'img/Kitchen-1.jpg' ?>" title="Kitchen">
    <img height=75 width=75 src="<?php echo base_url().'img/Kitchen-1.jpg' ?>" alt="Kitchen">
</a>
<a href="<?php echo base_url().'img/Kitchen-2.jpg' ?>" title="Kitchen">
    <img height=75 width=75 src="<?php echo base_url().'img/Kitchen-2.jpg' ?>" alt="Kitchen">
</a>
<a href="<?php echo base_url().'img/Kitchen-3.jpg' ?>" title="View from Kitchen Window">
    <img height=75 width=75 src="<?php echo base_url().'img/Kitchen-3.jpg' ?>" alt="View from Kitchen Window">
</a>
<a href="<?php echo base_url().'img/Lounge.jpg' ?>" title="Lounge">
    <img height=75 width=75 src="<?php echo base_url().'img/Lounge.jpg' ?>" alt="Lounge">
</a>
<a href="<?php echo base_url().'img/Master.jpg' ?>" title="Master Bedroom">
    <img height=75 width=75 src="<?php echo base_url().'img/Master.jpg' ?>" alt="Master Bedroom">
</a>
<a href="<?php echo base_url().'img/Twin.jpg' ?>" title="Twin Bedroom">
    <img height=75 width=75 src="<?php echo base_url().'img/Twin.jpg' ?>" alt="Twin Bedroom">
</a>
<a href="<?php echo base_url().'img/Single.jpg' ?>" title="Single Bedroom">
    <img height=75 width=75 src="<?php echo base_url().'img/Single.jpg' ?>" alt="Single Bedroom">
</a>
<a href="<?php echo base_url().'img/Bathroom.jpg' ?>" title="Bathroom">
    <img height=75 width=75 src="<?php echo base_url().'img/Bathroom.jpg' ?>" alt="Bathroom">
</a>
<a href="<?php echo base_url().'img/SS.jpg' ?>" title="South Stack">
    <img height=75 width=75 src="<?php echo base_url().'img/SS.jpg' ?>" alt="South Stack">
</a>
</a>
    <a href="<?php echo base_url().'img/Parys.jpg' ?>" title="Parys Mountain">
    <img height=75 width=75 src="<?php echo base_url().'img/Parys.jpg' ?>" alt="Parys Mountain">
</a>
    <a href="<?php echo base_url().'img/Llynon.jpg' ?>" title="Llynon Mill">
    <img height=75 width=75 src="<?php echo base_url().'img/Llynon.jpg' ?>" alt="Llynon Mill">
</a>
        <a href="<?php echo base_url().'img/Cemlyn.jpg' ?>" title="Cemlyn Beach">
    <img height=75 width=75 src="<?php echo base_url().'img/Cemlyn.jpg' ?>" alt="Cemlyn Beach"> </div> <script src="<?php echo base_url().'js/blueimp-gallery.min.js' ?>"></script> <script>

Is it possible to configure the Gallery for inline video in the lightbox? I can get it working fine in the carousel, but for some reason video in the lightbox always opens the video in a new window.

Nice plugin! I notice on your lightbox demo that if the number of thumbs exceed the width of the window they move to a second row etc. Would be a nice addition to have them scroll if the number exceeds the width of the window like this
just a thought….

Hey @blueimp, there is an easy way to show Youtube or Vimeo videos in the carousel? Could you guide me on how I do that?

Thanks,
Alan

For example...

<div id="links">
  <a href="test.mp4", title="Test", data-poster="test-poster.jpg", data-type="video/mp4">
    <img src="test-poster.jpg" alt="Test" /> <!-- Shouldn't this get auto-generated from data-poster? -->
  </a>
  <a href="foo.jpg" title="Foo">
    <img src="foo-thumbnail.jpg" alt="Foo" />
  </a>
</div>

How can test-poster.jpg be auto generated from data-poster attribute? Also, how can I get the video play icon to be overlayed on top of this child thumbnail?

Can you also export the necessary images and stylesheets? Perhaps have a LESS version of stylesheet with a variable we could override for the path to the @imgDir? I had to clone this repo and then remove main in "package.json" to get my grunt build working properly.

Is it possible to pause carousel when user switches to other tab or minimizes browser and resume carousel when page gets focus again ??

click second thumb img
wait till loaded
close slide
click fourth thumb img.
slide will show the second slide img.

    var linksContainer = $('#links').on('click', 'a', function (event) {
        // Show the Gallery as lightbox when selecting a link,
        // starting with the selected image:
        if (blueimp.Gallery(linksContainer.find('a'), {
                index: $(this).data('index'),
                clearSlides: false,
            }))
        {
            // Prevent the default link action on
            // successful Gallery initialization:
            event.preventDefault();
        }
    });

On an iPad with the Safari browser, after about some 15 to 20 displays of full-screen images of the "Lightbox image gallery" from the Demo site (manual swiping) the browser crashes.

Some investigation shows that the Chrome browser on the same iPad also crashes after roughly the same number of images.

Behaviour on MacBook (Chrome browse) shows memory going up by about 300 MB or so per image, see screenshot after > 100 image displays.

Looks like a resource issue (by the way GREAT application)

As swipe, also this plugin doesn't work with IE10 on touch devices because of the lack of MS Pointer events implementation.

For example:

<a href="xxx.jpg" title="<strong>Title</strong><br/>Common Text" data-gallery="#blueimp-gallery"><img src="xxx.jpg" /></a>

 From China,poor English.Thanks .

I am trying to add "Additional Gallery elements". I followed the instructions mentioned in "Additional Gallery elements". But, I don't see any "description" showing up.

I updated to 2.8.0 yesterday too to make sure I have latest version.

My question is "is it tested and does in work now". If it does then one "sample demo" would be very useful.

From my experiment, it doesn't work.

[ My images pops up from "light box". When I looks in the output, I just don't see the class="description"
has the description value. The title node (class="title") seem to get populated with the proper title value. ]

Thanks

To populate the carousel I use the images inside a div. As stated in the guide. The images, however, remain visible on the page, even outside of the carousel. I would like to know if there is a function automattica that hides the div.

I can't play nor ogv or mp4 video in Opera or Chrome
Got OK in server log:
IP.ADD.RESS.235 - guest [10/Sep/2013:15:04:37 +0400] "GET /2013/2013_06_15/VID_20130615_153017.mp4 HTTP/1.1" 200 77184288
No poster while the "loading image" waits for downloading whole file. Then "error image" appears.
Nor multiple sources or single one - it can't show me video.
But the same videos are shown in static HTML5 tag in my old gallery:

How to fix it?

Congrats on this new gallery! Looks really good!

One major issue is that it totally malfunctions on RTL sites.

Just go to the demo site, run $("body").css("direction","rtl") and gallery will stop working. Run $("body").css("direction","ltr") it will return to work again.

Is there a jQuery Version if this initializer?

<script>
document.getElementById('links').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>

I have multiple id="links" and I change it to class="links" so i can initiate gallery in multiple albums in jquery how do i achieve this?

my pseudo code is

$(this).find('.links').initialize gallery 

something like that sorry im not too sure about it.

It would be nice to have a stretch option for photos that aren't as tall as the viewport to tell the blueimp Gallery to "stretch" them to the full height of the window?

How to Load Images in Demo.js File From My Webpage

Is it possible to only keep slides loaded within "preloadRange" ?
I've got a gallery with nearly 1000 photos, if I watch 'em all my ram memory is full.
So would it be possible to change the "onslide" method to release images not in range?

Instead of using JS to initiate this, could we somehow have data-attr properties? e.g. data-poster, data-sources='1.mp4,1.ogv' etc?

how could we integrate this with videojs for graceful degration?

e.g. https://github.com/videojs/video.js/blob/master/docs/setup.md#step-2-add-an-html5-video-tag-to-your-page

Hi,

The gallery doesn't seem to work when the reference to the source file demo.js is not included at the bottom of the page. When it is included, all the other listed items do work. What's going on?

Hi,

I'm using the uploader for my extension and I noticed you moved this js files to a different folder and the uploader isn't working fully. Can you please locate the javascript files also where it was so it works both ways?

Thanks for the help with my previous question, but I'm experiencing another problem.

When I click on the lightbox thumbnail, the gallery initializes as it should. However, when I scroll up or down, the black backdrop doesn't scroll with the gallery and you can see what happens on my test page: http://www.techhounds.com/gallery-test/

I've noticed that this doesn't happen on your demo page. To see if it was a problem on my end, I literally copied and pasted your code from your demo page as a test, but without any success in solving this problem. I've tried removed my own resources and removing some html, but that didn't help either. Do you have any idea what's going on?

Edit: I just wanted to edit and say that changing removing the 'overflow' attribute of the class blueimp-gallery prevents any scrolling on my test page while it doesn't do so on your demo page.

Also, this is only happening on Chrome. I've tested IE and Firefox and it works fine. In IE and Firefox, both my page and your demo page don't scroll at all, which is correct isn't it?

Would it be possible to have multiple gallery sets on a page? I don't have a dedicated example page but you can look here to see what I mean:

http://www.techhounds.com/2013-season-photos

As you can see I currently have 3 different Picasa photo galleries, which I'm looking to replace with your gallery, set up on three different modals for the three different events. So would it be possible to set up three or more different Blueimp galleries on the same page?

it is possible to always display the navigation arrows, from the beginning? thanks

Love this plugin - one possible feature request, is it possible to set/change options live? I was thinking of something like gallery.option("slideshowInterval", 10000) so we could change the slide show interval live (or any other option)? If this capability is already there and I missed it, my apologies!

Hi, I really like the gallery, it loads quickly and does most of what I need.

I have 3 sets of images - thumbnails, previews and originals. So far I have thumbnails loaded as the thumbnails, and previews used for quickly browsing large images. I want a way of adding a link to each image e.g 'Download Original Image', but I'm not sure how I can achieve this.

any tips?

thanks!

Hi,

Congratulation for your job on Gallery. The feeling is really great !

I'd like to customise a little bit the view when the lightbox is displayed.

Currently the lightbox is centered.

What I'd like to do is having a div on the left part of the screen (let's say 250px large, with a height of 100%) which will contains comments and a description.

Here is an example made with firebug.

Thanks for you help !

Love this plugin. I implemented it in under 10min last night. One question: is it possible to have the caption stay visible when the controls disappear? In my implementation, the captions on some of the photos are humorous and I think people will want to have the captions visible all of the time. Great work!

Currently, in my application, i don't preload the image url. Instead, the image's url is taken from a remote URL.

It would be great if BlueimpGallery can take the remote url as the initialize parameters, and show the loading indicator while loading the content.

There seems to be a vast size difference between the two. Minified version is significantly bigger.

When switching code to use unminified code (for debug) - there is an error:

Uncaught TypeError: Cannot read property 'Gallery' of undefined jquery.blueimp-gallery.js:24
(anonymous function) jquery.blueimp-gallery.js:24
(anonymous function) jquery.blueimp-gallery.js:27

Just downloaded 2.3.2 from https://github.com/blueimp/Gallery/releases/2.3.2 into my local computer.

When I open the index.html on the main page, the Gallery does not display or load. I only see HTML.

I've followed the set instructions & everything works almost perfectly but the gallery controls are not displaying properly. The angle brackets for the prev & next buttons are not positioned correctly.

I've looked for CSS conflicts but could not find any, I tried removing all css other than blueimp-gallery.min.css.

Could I be useing the wrong characters? < and >

My HTML & a screen shot is below.

thanks

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
    <link rel="stylesheet" href="css/blueimp-gallery.min.css">    
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="css/sticky-footer.css" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div id="wrap">
      <div class="container">
        <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="logo.png" alt="aka knits logo" class="logo"/></a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
              <li><a href="index.html">home</a></li>
              <li><a href="about.html">about</a></li>
              <li class="active"><a href="gallery.html">gallery</a></li>
              <li><a href="contact.html">contact</a></li>
            </ul>

            <ul class="nav navbar-nav pull-right nav-pills">
              <!-- http://fortawesome.github.io/Font-Awesome/icons/#brand -->
              <li><a href="#"><i class="icon-envelope icon-1x"></i></a></li>
              <li><a href="#"><i class="icon-facebook icon-1x"></i></a></li>
              <li><a href="#"><i class="icon-twitter icon-1x"></i></a></li>
              <li><a href="#"><i class="icon-linkedin icon-1x"></i></a></li>
              <li><a href="#"><i class="icon-google-plus icon-1x"></i></a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </nav>

        <!-- The Gallery as lightbox dialog, should be a child element of the document body -->
        <div id="blueimp-gallery" class="blueimp-gallery">
            <div class="slides"></div>
            <h3 class="title"></h3>
            <a class="prev"><</a>
            <a class="next">></a>
            <a class="close">x</a>
            <a class="play-pause"></a>
            <ol class="indicator"></ol>
        </div>

        <div id="links">
            <a href="img/gallery/banana.jpg" title="Banana">
                <img src="img/gallery/thumbnails/banana.jpg" alt="Banana">
            </a>
            <a href="img/gallery/apple.jpg" title="Apple">
                <img src="img/gallery/thumbnails/apple.jpg" alt="Apple">
            </a>
            <a href="img/gallery/orange.jpg" title="Orange">
                <img src="img/gallery/thumbnails/orange.jpg" alt="Orange">
            </a>
        </div>

      </div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="text-muted credit">Footer goes here with a  <a href="#">Link</a> if required</p>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/blueimp-gallery.min.js"></script>
    <script>
      document.getElementById('links').onclick = function (event) {
          event = event || window.event;
          var target = event.target || event.srcElement,
              link = target.src ? target.parentNode : target,
              options = {index: link, event: event},
              links = this.getElementsByTagName('a');
          blueimp.Gallery(links, options);
      };
    </script>
  </body>
</html>

In firefox only.

When I click a displayed image (to pop-up the controls, title, etc.), that image becomes highlighted as though I click-drag highlighted it.

I noticed it on the demo, so tried it on multiple machines and it still occurred.

Is there a simple solution to prevent this in Firefox?

Is there any way to "limit" the visible lightbox links to say 30, then have a "Load More" button at the bottom that will load the next 30 lightbox images?

Also, is there a way to style the lightbox image links when using an AJAX call so that they look like Bootstrap Thumbnails? I know you can do it when you have the links set on your local server, but how would I do it when using an AJAX flickr call?

I've noticed some problems on this gallery I've made: http://photos.emmaisgoingtomarry.me/photos/index.htm

• the slideshow interval is ignored, it still waits 5 seconds between photos:
  slideshowInterval: 1000
• There's an error when sliding between photos:
  Uncaught Error: NotFoundError: DOM Exception 8
• The scroll bars don't re-appear after closing an image unless I set:
  hidePageScrollbars: false

Am I doing something wrong? My gallery is almost how I want it!

thanks

Is it possible for the thumbnail links to drive the gallery display? i.e. click on a thumbnail, the gallery image changes to that image.

As set up per the doc, the thumbnail link opens the image in the main browser.

There are problems with the magnification of the images on windows mobile. In practice, the image is opened the top of the page, even if I click when I am in another location. The same problem with the scroll of the page.

Hello,

First up, this is more my issue "lack of knowledge" then Gallery's :)
I'm trying to use your great gallery in combination with Bootstrap Thumbnails.

This means that I have this structure:

<div id="links" class="hip-middle-box">
   <ul class="thumbnails">
      <li class="thmb_left">
        <a class="thumbnail left" href="images/projects/project/LP_penthouse_03.jpg">
<img src="images/projects/project/LP_penthouse_03.jpg">
        </a>
    </li>
    <li class="thmb_right">
        <a class="thumbnail right" href="images/projects/project/LP_penthouse_04.jpg"><img src="images/projects/project/LP_penthouse_04.jpg">
        </a>
    </li>
    <li class="thmb_left">
        <a class="thumbnail left" href="images/projects/project/LP_marmenor_002.jpg"><img src="images/projects/project/LP_marmenor_002.jpg">
    </li>
    <li class="thmb_right">
        <a class="thumbnail right " href="images/projects/project/LP_marmenor_012.jpg"><img src="images/projects/project/LP_marmenor_012.jpg">
    </li>
    <div id="blueimp-gallery" class="blueimp-gallery">
</ul>

The Gallery loads when clicking an image but "browsing" the images does not work as expected. This means. The image clicked opens in the gallery. Clicking next or previous will always load the first image. I suspect the issue is the parent setting. In my case the links (a) are two levels deep and not directly below the div with id="links".

What do I have to change to this:

<script>
    document.getElementById('links').onclick = function (event) {
        event = event || window.event;
        var target = event.target || event.srcElement,
            link = target.src ? target.parentNode : target,
            options = {index: link},
            links = this.getElementsByTagName('a');
        if (blueimp.Gallery(links, options)) {
            return false;
        }
    };
</script>

I tried

link = target.src ? target.parentNode.parentNode.parentNode

but that was not it... Do you have an idea?

Thanks in advance,

Johnny

Hey,

I need a bit help with the carousel gallery.
I wanted to just add the gallery to the page, first It didnt work if I just add the carousel code snippet of your documentation.

I got it working with adding the lightbox script code and the carousel script code same time, but now the carousel gallery only appears if I click on the thumbnail images of the lightbox.

Could you help me with that? How I let the carousel gallery appear without a lightbox gallery?

PS.: Sorry for my bad english :/

Hey thanks for making this plugin its really helpful and sorry for posting this here as this is not a issues but rather a How-to type question .

I want to use carousel and lightbox option too , like for example i want carousel to display all images in gallery and when user clicks on anyone of the image in carousel it should open in lightbox with full size image. How can i do this ??

Please can you help me with this

When resizing the viewport I can see the black background at the top and bottom.

Is it possible to limit the height of the gallery container to the height of the image? Perhaps set the height based on the width/height ratio of the original image, so any change in the width would alter the height accordingly.

That would help a lot when designing fluid websites.

Is there a way to initiate the gallery from a generic button/link without the need to show thumbnails?

We have a "view gallery" button that we simply want to launch a lightbox gallery.

So what we output is below, but we need to call it still

<div id="links">
    <a href="images/banana.jpg"></a>
    <a data-href="images/apple.jpg"></a>
</div>

I have the carousel working but the links div is displaying too, there is way to just display the carousel without links div?

Is it possible to show the lightbox controls by default?
So you don't have to click to see the title e.g...