karacas / imgliquid Goto Github PK

Hi,

Im Using the Plugin for loading Images from webcam. The images will be refreshed every 2 seconds and there is a flash effect .
Is it possible to remove this effect ? perhaps is this the result of a timeout or fade effect ?

help me please.

Images are blowing up (resizing larger incrementally forever) inside containers in infinite loop. This is caused by this check always returning true:

if ($imgBoxCont.sizeOld && $imgBoxCont.actualSize !== $imgBoxCont.sizeOld) makeOldProcess();

within the checkResponsive() function. An easy fix is to set responsive: false in init call. I've forked the project and I'll be looking into this right now.

is it possible to use imgLiquid on a background image or it's usage is strictly for tags ? if it's possible how can i do that?

Thank you for this, its a great plugin.

Example http://jsfiddle.net/3CRx7/686/

In my case my images have spaces in them. Then CloudFlare optimizes the images and replaces the URL with html encoded URLs. So the spaces become %20.
This breaks your plugin.

Hey there,

I really only need to trigger imgLiquid at certain screen widths and remove it from others, is there any functionality to allow this?

When I use a filter as sepia then is not applicated when I use imgLiquid function.

It comes to be useful to exclude imgLiquid for small screens.

I'd a problem with URIs containing encoded parameters (amazon S3 URIs).

The following code always encode the image URI:

                    // Check change img src
                    if ($imgBoxCont.css('background-image').indexOf(encodeURI($img.attr('src'))) === -1) {
                        // Change
                        $imgBoxCont.css({'background-image': 'url(' + encodeURI($img.attr('src')) + ')'});
                    }

To amend this I did a dirty fix:

          // Check if the URL is already encoded.
          var imgUrl = $img.attr('src').match('%') ? $img.attr('src') : encodeURI($img.attr('src'));

                    // Check change img src
                    if ($imgBoxCont.css('background-image').indexOf(imgUrl) === -1) {
                        // Change
                        $imgBoxCont.css({'background-image': 'url(' + imgUrl + ')'});
                    }

Unfortunately I'm too busy to work on a PR right now.

I'm trying to load any image on my div( 219x172)...but when the image is really big like 2480x600...it doesn't work...and the result image is just a cropp of some part of the image... HELP !!

If there is a title attribute used/provided with the IMG tag, its "popup" functionality gets lost, because the image itself gets hidden.

The attribute could get copied over to the surrounding DIV.

Thanks for the awesome resizer!
I am currently trying to resize images that are dynamically loaded into a bootstrap carousel.
By default the images are hidden with css display:none, so I think the plugin cannot read the width and height. I tried triggering it by attaching it to the carousel slide event, and that did seem to resize it, but it was not able to position it properly in the carousel window.

Any suggestion on how to approach this?

daniel

I'm applying the plugin on a div which has other elements inside it (as a large photo background). When the child elements have images, they are hidden by the plugin. Please target all imageLiquid elements by class/id so it doesn't affect other elements within the selector's ranges.

(similar to the other issue regarding a:first)

Is there a way to make the img height responsive?

I'm using jasny boostrap for file upload http://jasny.github.io/bootstrap/javascript.html#fileupload

Your plugin works great for me after I have uploaded an image, but I am wondering if it is possible to run the script on the preview image before uploading? If this functionality already exists, can you tell me how best to implement with imgLiquid? Thanks.

On FF at least.

I find I MUST use a style attribute to set the width and height of the containing block. A width or height set via a class on that block simply does not work - it leaves the block empty, devoid of any images at all.

This is quite a restriction, especially on systems where the size of the block will vary and is not fixed in the markup. Most responsive sites will be like this. The plugin needs to be able to read the calculated size of the block, and maybe even track changes to that size as the page is resized. Without that, it does not play well with modern web techniques and so should probably be avoided.

we could not find out why this changes original image size to odd sizes and make it blurry. here are the links you can check it:

homepage featured image (blurry):
http://vettimes.makemedia-test.com/

same image on the post with original size:
http://vettimes.makemedia-test.com/news/success-for-cattitude-feline-focused-cpd-days/

original image size is 800px × 400px, but when we make the image featured the size becomes 246px 123px which looks randomly picked. we tried to to find the function how it picks that size but we couldnt.

does anyone can help please?

Hi,
I'm trying to integrate ImgLiquid with a image responsive replacement script, Any sugestion?
This is the srcipt I want to integrate.

https://github.com/kvendrik/responsive-images.js

Thank You.

Hi,
Just to suggest if could able to implement interchange images on responsive size.

Example of Foundation framework:
http://foundation.zurb.com/docs/components/interchange.html

Thanks.

I try to change image for to make a slide show with jQuery attr() Method (http://www.w3schools.com/jquery/html_attr.asp):

Simple example:
sym.$("iGirona").attr('src', 'images/girona2.jpg');
or with array of images:
sym.$("iGirona").attr('src', 'images/'+aGirona[actGirona]);

But the image don't change. If I put comment or delete imgLiquid function lines then works correctly. Why can it be?

Thank you very much.

Note: dGirona is a div container with class imgLiquid and iGirona is inside as img.

While using the plugin blindly on multiple divs (that may or may not have images (may contain embed in place of an image) an error occurs when applying on divs with no image inside (as supposed).
When the error callback is triggered, a "Uncaught TypeError: Cannot read property 'onItemError' of undefined" is raised.

I seem to have an issue with this plug-in. Whenever you try to refresh the page more than once, the images won't load and the animated gif will just be there, spinning away. This works for both the demo of yours and the code I've written on my website. There aren't any errors showing in the console, so I'm not sure what is causing it. Any ideas?

According to the jqMigrate plugin the jQuery.fn.error() is deprecated.

(using jQuery 1.9.0)

Hello, i'm not sure if this is the right place to comment on this, but i was wondering if a method can be added for changing out an image. Meaning, when i dynamically swap out the image with a different one in my app, i'd like to be able to call a function on the container that refreshes the imgLiquid image. I hope that makes sense. Thanks in advance.

Hi,

Im Using the plugin for diffrent images sizes loaded from Webcam.
I have one container and different cameras. on Camera select, a new image will be loaded and placed in the div (and refreshed every 2 seconds).

my problem is: for the first image is everything ok but if a select a new cam with a different ratio, the image will be stretched to fill the old image size and not the original...

calling the imgliquid() on every image Load is a possible solution but i become a flash effect (the image disappear and appear every 2 second)

please help me to fix this problem...

Trying to get an image to fill a DIV on this site:

http://94country.wibwradio.com/

The large image of the cowboy.

I am calling:

jQuery(".imgLiquidFill").imgLiquid({ 
  fill: true, 
  horizontalAlign: "left", 
  verticalAlign: "top" });

with no luck.

This is my div:

<div id="home_slider" class="imgLiquidFill imgLiquid"><img id="slide" src="http://94country.wibwradio.com/wp-content/uploads/2013/07/94_rodeo.jpg"></div>

You need to grab the corner of the browser and dynamically resize it to see that it's not filling.

I am running the latest release of Firefox.

The red box in the upper-left corner shows the size of the DIV.

Screen readers are able to trigger Javascript and read at least some css. When they come across things that are display:none, they skip over those elements.

So even though you put alt text on your images, since the image gets display:none the text wont be read by screen readers.

Hi, it´s possible to check if image exists?

I get imagem from a rss feed, from remote server, and some images do not exits in them, its possible to check if exists, e on error, not show blank image, change with another default image?

If I try to load functions in document.compositionReady event but then the functions are not triggered. But yes if I delay with setTimeout (for example 1000ms) or if I trigger functions with a button.

I need any callback function for to wait load all images?

Thanks.

https://app.box.com/s/5htedprxrdpq6n69mdhh

Thank you for the great plugin!

Doesn't work when images have round parentheses as follows.
image name: http://test/(testimage).jpg

Thanks,

It seems whenever the plugin gets an url that is already encoded, it encodes it again, thus destroying the url.

Perhaps you can test if it is encoded before encoding it, e.g. with a regex, something like /%[0-9A-Z]{2}/g. (that regex needs testing).

Maybe you can do like this:

if (!new RegExp(/%[0-9A-Z]{2}/g).test($img.attr('src'))) {
    // Change
    $imgBoxCont.css({ 'background-image': 'url("' + encodeURI($img.attr('src')) + '")' });
} else {
    // Change
    $imgBoxCont.css({ 'background-image': 'url("' + $img.attr('src') + '")' });
}

Here you can find an example : http://www.trekmag.com/destination-trek-la-sierra-guara-famille
Image is loaded, and just after imgLiquid is apply, disappear. The style "background-image" is not apply, because i suppose there is parenthesis in the name of the image.

When Using ImgLiquid on a container which has an absolute position element with text and a button link. That button links gets "display: block; width: 100%; height: 100%;".

I have located the coolprit in the code:

$('a:first', $imgBoxCont).css({
'display': 'block',
'width': '100%',
'height': '100%'
});

And im wondering why this is being set?
Maybe add a option to disable this?

Hi! and thanks for this awesome plugin, I love it. But as I can see, doesn't work with image file names containing accents or other characters, throwing 'image not found' errors. As I see in other opened issues, seems to be related with the image URI encoding that imgLiquid uses... any plans on fixing it? Thank you!

Hi,

Thanks for the Plugin :-)
I have a problem: im using the Plugin to show images from Webcam. The images will be loaded every second from the camera (by changing the src of the image with jquery) but they will not be showed...

can u help me please?

I'm working to get imgLiquid to work in tandem with http://kenwheeler.github.io/slick/

But using the lazy loading provided by Slick is causing the images to not show up at all when using imgLiquid, i've tried attaching the function to various callbacks in Slick but no luck so far.

Regards,
Devon Mather

Please check the following image for example:
https://fbexternal-a.akamaihd.net/safe_image.php?d=AQBGv3_lA42dvrqq&url=http%3A%2F%2Fimage3.redbull.com%2Frbcom%2F010%2F2015-01-05%2F1331697862706_2%2F0012%2F0%2F0%2F0%2F3360%2F5042%2F1500%2F2%2Fmysterious-places-airplane-graveyard.jpg

Hello,
Pictures aren't displaying well in a cycle2 slideshow after the first round (pictures seems to align themselves at 50% left outside of the frame). Works like a charm on any other browser/config.
Test here : http://www.ecologic-communication.com//pnr09
Thomas