tholman / intense-images Goto Github PK

Hey @tholman,

I'd like to host your library, intense-images on cdnjs — It is one of the most famous free and public web front-end CDN services which is used by ~1,143,000 websites worldwide.

The git auto-updater for cdnjs relies on GitHub releases to recognize a release version and automatically update the library in the cdnjs repo.

If it's not too much to ask, can you please add release tags for this repo, say 1.0.0?

cdnjs/cdnjs#11266

Hi,

I started to use this plugin today and I was wondering if there was a way to make it work with tag ? Unfortunately I can't adapt my HTML cause I'm working on wordpress and I actually do that :

    $('.gallery-item a').each(function(){
        var $this = $(this);
        $this.attr('data-image', $this.attr('href'));
        $this.attr('href', '#');
        $this.attr('onclick', 'return false;');
        Intense($this.get(0));
    })

I could do the edit myself if needed but I wanted to know if you are interested before ^^

The Idea

If Intense is attached to a link it would use href instead of data-image and would preventDefault() on click.

The original program just works on existing elements, not lazy loading ones. But there always exists the need for lazy loaded images, then users can add the click event by himself with jquery event delegation.
just change

    function track( element ) {

      // Element needs a src at minumun.
      if( element.getAttribute( 'data-image') || element.src || element.href ) {
        element.addEventListener( 'click', function(e) {
          if(element.tagName === 'A'){
            e.preventDefault();
          }
          if(!active) {
            init( this );
          }
        }, false );
      }
    }

to

    //@senntyou Add click event by user himself
    function track( element ) {

      // Element needs a src at minumun.
      if( element.getAttribute( 'data-image') || element.src || element.href ) {
        /*element.addEventListener( 'click', function(e) {
          if(element.tagName === 'A'){
            e.preventDefault();
          }*/
          if(!active) {
            init( /*this*/element );
          }
        /*}, false );*/
      }
    }

How do you think?

OS X 10.10 (Beta 2)
Version 8.0 (10538.39.41)

(http://cl.ly/image/3O461K3K0k08/)

Querying all elements on a document with a very non-specific class, then splicing that class out of each one of them could lead to unexpected results in the wild 😨.

Suggestion: encapsulate all inner class names with a prefix such as intense--, so .viewing would be 😎 .intense--viewing, .loading would be .intense--loading etc.

I'd be happy to try PR this, if it's a valid idea..

Can you please suggest how to change the dimensions of the zoomed view only to fit the browser screen.

the cursor gets pixelated on Chrome 46.0.2490.80 (Mac): http://oi68.tinypic.com/egvkoz.jpg

on safari looks great!

Hey there,

Awesome script, love it.

I'm having difficulty resolving an issue that occurs after items are either filtered or loaded dynamically - the newly loaded items don't allow intense to show work. Not sure the solution.

Thanks for your help,
Justin

As the images are loading on the page before opening the intense modal, I clicked one. It didn't activate, so I clicked another image that was already full loaded and the modal launched as expected. Then, once the original image was full loaded, it activated a second modal over the one I was viewing. Clicking the 'X' closed the second modal, leaving the first one up. I could not close this one and had to refresh.

(On newest version of Chrome on OS X)

Hey @tholman, this is a great library, thank you! I'm using responsive images in my app so far (using srcset & picture) and wondering how does intense-images play with that paradigm?

To clarify, it would entail adding srcset and sizes attribute to the img tag so that appropriate images are loaded on mobile vs web.

Thank you!

Hi,

Firstly, this is a brilliant little tool and, in my opinion, one of the best ways to show the whole of an image on a web page. I've implemented it on a photography site and it works great up until it hits a panoramic image. It doesn't quite seem to get the dimensions correctly.

To see an example of this head to http://timhallphotography.co.uk/gallery/landscapes-the-elemental-collection and look at one of the bottom 3 images. The image appears in the top left and the scrolling moves the image of the edge of the window.

Thanks!

Hi,

The second time you open the zoom in mobile the image appears aligned to the right instead of centered. I could check this in the sheep image of your demo too.

Any ideas about how to solve this problem?

Thanks

Hi

Great little script. Thanks!

Is there any way we can zoom into the image that is opened up fullscreen?

It would be great if this could work with pinch zoom on mobile too.

Any thoughts on this?

Thanks!

In Internet Explorer 11 on your demo page cursor remains as arrow and not as +. What is the solution of this problem?

Lets say I got an image somewhere in the middle of a long page. If I intensify it, it covers the window as expected. But then when I use the mouse scroller, the whole page behind gets scrolled. Is there a way to make the mouse scroller move the intensified image up and down instead?

When loading an image with data-src, there is the potential to have a situation where the image isn't loaded already, which means there is a delay opening the image for viewing... within this delay, clicking around can confuse intense.js into thinking images are open when they aren't.

The fix: Add a small spinner, which will activate when the image isn't fully loaded, and will only really be on the screen while the image loads. Clicking the background while the spinner is open, will cancel the load, and hide intense straight away.

Merging in #7 and #9 into this issue, and closing them off as duplicates, as they are each small parts of the 1 issue.

There isn't an option to create a gallery and navigate through an images block.

This plugin is great, but a gallery option can make it very complete.

Thank you.

Hello,

I need to show image in a div instead of fullscreen. Is that possible?

Is there a way that when we are clicked into full screen view, to have an [x] at the top right for those who are on mobile / tablets and don't see the cursor so they can exit the image without getting confused as to how?

thank you!

I found that when the user clicks on 2 photos quickly intense-images get kind crazy losing the "open or closed" state.
I was able to reproduce the error even in the demo.

maybe do a try catch?

Would be really cool, when you query your images, to apply some sort of gallery, so you can press "prev" or "next" on the image if you have multiple images.

I see this is very helpful. Maybe you want to package it so other developers can easily add it into their projects. Thanks!

Hi @tholman thanks very much for developing Intense Images; it's really great and fits my needs almost perfectly.

An issue I'm having though is that on clicking the image to zoom it loads the image at the vertical centre of the image (on a vertical image).

I'm using the library to zoom into screenshots of entire websites that I have placed on a page (on desktop only) and want the image to load at the top on click so that the user can scroll down from the top through the image.

So basically I'm trying to set the initial position of a vertical image to be the top of the image when opened full screen..

I've tried playing around with the code but can't figure out how to accomplish this, although it seems like it could be an easy fix. Is this a feature you would consider adding? Or is there an easy fix I'm missing?

Cheers! 🍻

I am trying this library for the first time and have two issues, my code is here: http://jsbin.com/fexeye/1/edit

1. The image is very high res but it is zoomed out here in this viewer
2. Can't we enable panning on both axes? It seems locked to one or the other (by design)

Thanks

I'd like to use your script with bower...
when you have same time... can you register the package?
https://github.com/bower/bower#registering-packages

thanks ;)
mau

I'm not sure why, but the first image shows up black. It's very odd because the image itself is fine, it just doesn't load correctly on the page.

I'm not sure how this could be fixed or if there's even anything to fix. It's possible it's just my computer being old.

I think it'll be better if you provide the version number of this awesome library, also minified version will be saving time for everyone:)

Another feature request:

Sometimes the image are used as the background cover of the web page, or the slideshow that is almost full screen. Instead of popping a full screen layer, I think you you can append the figure element to the div which has data-image attribute, and fill the width and height.

Simplify this library, I think you can drop the support for img, only accept any other elements with data-image attribute.

Even further, tilting the image on mobile devices which has the Accelerometer & Gyroscope.

When activates intense images, the scroll (swipe) direction is inverted not natural on iOS.

Hi,

Thank's for Intense !

I got an right after I close an image, the image is well closed but when a tried to click an other one, i got this error :

intense.js:1 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I use this js code to Intense my images :
var elements = document.querySelectorAll( '.item' ); Intense( elements );

and here is my html (i am using angular) :

<div ng-repeat="galery in galerys">
   <h1 class="galeryTitle" ng-click="checked = ! checked">{{galery.gal_title}}</h1>
   <div ng-show="checked" class="owl-carousel owl-theme">
        <img on-finish-render="finish" ng-repeat="img in galery.imgs" class="item" data-title="{{img.title}}" data-caption="{{img.comment}}" ng-src="{{img.path}}"/>
   </div>
</div>

I modified the demo page and used it as a quick way to display 3 large panorama images at http://korfhage.org/grandcanyon/. It works perfectly fine on Chrome 35.0.1916.153 m on my computer running Windows 8.1, but on my wife's computer, using the same version of Chrome but running Windows 7, the image alternately shows and disappears as she moves the mouse. As she move the cursor right or left, the image scrolls, then it disappears, showing the white background. If she keeps moving the mouse, the image reappears, scrolling again, and then disappears, repeating across the width of the window. It is like there are alternating bands of visibility and invisibility.

Per #30 — Would be great to have an option to "invert" scroll direction. Thanks, @tholman

When an image's width and height are both beyond the window's, sliding of both two direction can be much more perfect.

This is not really an issue, but a question:

I'm trying to edit a wordpress theme were this script is used (http://clapat.ro/themes/soho-wordpress/soho_portfolio/sexy-woman/). I would like to load a bigger image while intense zoom is activated.

How could I get this result?

I figured i could use 2 different images: 1 normal (for example: image-one.png) and one bigger one (= same image but bigger) (for example: image-one-tag.png).

Is it possible to ad something to the code, to add something (-tag) to the image source so the bigger image is shown instead of the original one while 'zooming'?

I'm not really used to using scripts so i'm not really sure how to handle this...

Thank you in advance,

Jonas

hi i like ur plug in how i can actually make it work with this plug in ?
http://www.pixedelic.com/plugins/camera/

Hi! great work, this plugin is great,
But due the sizes of big images, the time between the click on thumbs and the load of big ones is too long.
How can I put a loader gif before the big images will loaded?
Thanks a lot!

Hi, how can i make the image viewer without get fit (width or height) in browser window? I just need to zoom my images to full scale.

Thanks!

Scroll left and the image moves right and vice-versa.

Hi tholman, It looks like the script doesn't work properly with opera, have you tested it?
I use Opera 12.16 with Mac OS X 10.9.4

Hi, Library is perfect but has mobile responsiveness issues.

I want to style the title and caption with css. What's the best way to do this, changing the js file?

This is broken on iOS 7.1.2 (mobile safari)

I like the idea behind the project. But i miss a zoom in and out functionality. For example with the mouse wheel.

When the picture is smaller than the screen, there is a weird effect and the picture is not accessible anymore.

Do you get the same bug?

Thanks

Hi there,

It would be really cool if you could target some sort of API to get the imageProperties (and other properties as well which make sense) when you call the Intense function to manipulate with the cursor and width.
I had a problem with the width in IE 10 + on a larger screen (1400p). I solved the problem by setting the width: 100% instead of the size calculation of the image in the script. But i will face the issue again when updating the bower component.