Develop Reference

How can jQuery fancy refresh an image div?

I have a few camera that uploading images trougth FTP connection.
I whould like to show the latest image with javascript, but I don't want to see white screens while the next image is loading.
I have this code:
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
var $img = $('#image1');
setInterval(function() {
$.get('https://alarmstudio.hu/<?php print($scriptfolder); ?>funkciok/kamerakep.php?ui=<?php print($_SESSION['userData']['user_id']); ?>&ci=<?php print($_REQUEST['kamera']); ?>&t='+ new Date().getTime(), function(data) {
var $loader = $(document.createElement('img'));
$loader.one('load', function() {
$img.attr('src', $loader.attr('src'));
});
$loader.attr('src', data);
if($loader.complete) {
$loader.trigger('load');
}
});
}, 5000);
});
</script>
<div id="load">
<img id="image1" src="https://alarmstudio.hu/<?php print($scriptfolder); ?>funkciok/kamerakep.php?ui=<?php print($_SESSION['userData']['user_id']); ?>&ci=<?php print($_REQUEST['kamera']); ?>" alt="kamerakep"/></div>
My problem is: The image is not showing at refresh. The refreshing response appears as such:
ÿØÿàJFIFÿÛC
%# , #&')*)-0-(0%()(ÿÛC
(((((((((((((((((((((((((((((((((((((((((((((((((((ÿÀÐ"ÿÄ
ÿĵ}!1AQa"q2¡#B±ÁRÑð$3br
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚáâãäåæçèéêñòóôõö÷øùúÿÄ
ÿĵw!1AQaq"2B¡±Á #3RðbrÑ
$4á%ñ&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚâãäåæçèéêòóôõö÷øùúÿÝÿÚ? uÝG?ññÿ/øQý»¨ÿÏÏþ8¿á]ÂBæßÅPYÃ&Ëk½ÞrmvÔr¼éGÅmBæãÅsÙÍ.ëkM¾Jmfèз8ÉÉõ®e^cÙÇçÿ·u/ùøÿÇü(ö¥ÿ?<¸¿á^¥ý¿©ÿªþØûOüLç·¿óßgÝÆ>ï+/\ÿç¸5S÷ú;¼¹¾î38Sò®ÝtªtcÓ×aû
I dont know what is this. It gives me code 200, but no new image. First time the image is showing...

I suspect your image is in binary format, which cannot be used as value in "src", what you should do is using it in base64.
Here an example: Embedding Base64 Images
Plan B is to update just the link, but as you said probably the browser won't show an image during the fetching process.

I have the answer. This jquery script needs to get the URL of the next image not the image source.

Open specific image in fancybox from main image area

I have fancybox opening when I click on the "main image" area in my gallery, and no matter what image is open fancybox always starts at the first image in the gallery. For example when a user clicks on the 4th image thumbnail, it loads into the "main image" area correctly, but when clicking on the main image fancybox starts from the beginning.
I understand why it's doing this, because the main image area is wrapped in:
<a rel="gallery" class="fancybox" href="#hover0"> <img/> </a>
But what I would like to happen is to have the href '#hover0' change to #hover2, #hover3, #hover4 etc when the corresponding image is loaded in the main area. Not sure how to go about doing this.
Test Page: http://www.pixlsnap.com/j/testb.php

Alright, so I have tested this by saving your whole page (along with all the resources linked to your live site, so glad the images had a direct path), you could do the following, but before I go to that there is a script error that you need to correct:
$(function(){
// Bind a click event to a Cloud Zoom instance.
$('#1').bind('click',function(){
^ You have not closed this function correctly, it needs an extra }); at the end.
Now there are 2 things you need to do for your problem:
1) Paste the following code above the function I mentioned previously (the order matters so it needs to be above it):
$(document).ready(function(){
$('#imgconstrain img').on('click',function(){
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#1').closest('a').attr('href','#'+$new_hoverid);
});
});
To explain what this code is doing, when the big image is clicked, we are going to get the active image, in case you haven't noticed, when you click on a thumbnail it gets the class cloudzoom-gallery-active. So, on click of the bigger image, we are going to retrieve the id of the thumbnail with the cloudzoom-gallery-active class.
Now, since we are getting the id attribute, each image should have a unique id. So here we go for the second part:
2) Give your thumbnails image a unique id like:
<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
<!-- ^ here -->
<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
<!-- ^ here -->
...till hover6 and that's it.
Let me know if that works for you and feel free to ask if the explanation wasn't clear enough ^-^
Edits:
So as per the comments, here's a few things to be done:
1) In your this anchor tag:
<div id="imgconstrain">
<a rel="gallery" class="fancybox" href="#hover0">
<img class = "cloudzoom" id="1" src =
Take out rel="gallery" (this is the reason fancybox is showing from start on click of next) and remove fancybox class and instead add open-fancybox (the reason for this is coming later)
2) All these lines:
<script type="text/javascript">
function displayCaption() {
var caption = document.getElementById('caption');
caption.innerHTML = this.alt;
}
document.getElementById('1').onclick = displayCaption;
document.getElementById('2').onclick = displayCaption;
//....
</script>
is not needed, we will do this in a smaller way
3) Like I mentioned previously, please add the ids here:
<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
<!-- ^ here -->
<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
<!-- ^ here -->
and so on till the last image.
4) Now the final piece:
$('ul#carousel.elastislide-list img').on('click',function(){
//here we get the updated id (hover1, hover2 etc.)
//and pass it to the cloud-zoomed anchor tag
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#imgconstrain a').attr('href','#'+$new_hoverid);
//get the caption of the thumbnail image and set it to the
//p tag with id caption
caption_text = $(this).attr('alt');
var caption_element = document.getElementById('caption');
caption_element.innerHTML = caption_text;
});
//what this code does is, when the cloud-zoomed image is clicked,
//we get the updated href (which is what the above code does)
//and we are going to make that href get clicked so that the fancybox opens
$('#imgconstrain a.open-fancybox').on('click',function(){
$to_open = $(this).attr('href');
$('a.fancybox[href="'+$to_open+'"]').click();
});
});
You can take out this code which was in my previous answer as I have already placed it in the new one:
$(document).ready(function(){
$('#imgconstrain img').on('click',function(){
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#1').closest('a').attr('href','#'+$new_hoverid);
});
Full code pastebin
Let me know if it works for you :)

Gallery of Images not displaying properly with document.getElementbyId()

So I'm working on a website for my job's store, a sort of gallery of our products. I've gotten the main web page, cut out the fat, put in the meat, and have tested it numerous times along the way. Now I am having some troubles with the JQuery not working properly. I have provided direct links to the JQuery code, a copy of the website itself, and the source code below..
The general layout of the JQuery(or Javascript, I'm not exactly sure which) is:
window.onload = function() {
function displayImage() {
var mainImg = document.getElementById('Main_IMG');
var caption = document.getElementById('caption');
mainImg.src = this.src;
caption.innerHTML = this.alt;
}
document.getElementById('Zero').onclick = displayImage;
document.getElementById('One').onclick = displayImage;
document.getElementById('Two').onclick = displayImage;
// Etc etc
}
Here is a segment of the website (with some extra fluff removed):
<h1 class="Wrapper Main ClearFix">Image Gallery</h1>
<div id="Main" class="Wrapper Main ClearFix">
<div id="container11">
<img id="Main_IMG" src="img/100___06/IMG_0001.JPG" alt=""><br>
<p id="caption"></p>
</div>
<div id="gallary">
<img id="One" src="img/100___06/IMG_0020.JPG" alt="Headboard Pricing">
<img id="Two" src="http://images.craigslist.org/00P0P_84oo9H7byag_600x450.jpg" alt="Needle Point Upholstered Chair Price: $40">
<!-- etc etc -->
The program is simple: When a user clicks on an image (say in a table for example), that image will display to the left of the gallery with the alt tag being the product and price and such.
The problem: At image number 16 I needed to give it a... different-from-normal tag
(tag I wanted to use: sixteen.
Tag I used: F_sixteen)
The program then worked fine for a few more 'numbers' up until the 36's and 40 where the program refuses to respond properly.
This is a link to the website as of writing this question:Here
This is a link to the actual jquery code: Here
And for those on mobile, the link to the source code is: Here
I apologize for the size of this question, as well as if this seems complicated. Thank you for viewing this, as I appreciate any help.
EDIT: I am not sure if the web page will work in Safari. If it doesn't, I'll see what I can do to change it.

OK, I hate to suggest using jQuery to someone who bravely is not. But use it. You can cut out the 40 calls to document.getElementById and reduce the risk of typos. Just include jquery in your page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Then you can use the following code:
window.onload = function() {
function displayImage(img) {
var mainImg = document.getElementById('Main_IMG');
var caption = document.getElementById('caption');
mainImg.src = img.src;
caption.innerHTML = img.alt;
}
$("#gallary img").click(function(){
displayImage(this);
});
}
I've kept the required changes in the above code to a minimum. To 'jquerify' it further you could write this equivalent code instead:
$(function(){
var mainImg = $('#Main_IMG');
var caption = $('#caption');
$("#gallary img").click(function(){
mainImg.attr('src', this.src);
caption.html(this.alt);
});
});

Loading the site produces javascript error: "Uncaught TypeError: Object # has no method 'getElementByID'"
Examining the javascript, some of your calls are to getElementById, and some to getElementByID. Javascript is case-sensitive, you have a typo.

Determine file extension of a dynamic image's src

Working on a Greasemonkey script, that will take a certain action if the image loaded on a webpage is a gif or jpg. The code from the page is as follows:
<div id="current_photo">
<div style="text-align:center;">
<img src="[url]/[random numbers].gif/jpg" alt="" style="[styles]">
</div>
</div>
The start of the URL will be unique, as there is only one image on the page with that URL. Need a way to pull that path and get the extension from it.

The HTML in the question is malformed. Is that really an accurate snippet? Link to the target page.
Anyway, code like this should work:
var payloadImage = document.querySelector ("#current_photo div img");
if (/\.gif$/i.test (payloadImage.src) ) {
// DO GIF ACTION HERE
}
else if (/\.jpg$/i.test (payloadImage.src) ) {
// DO JPG ACTION HERE
}
else {
// DO WHATEVER HERE
}

Add id="something" for your image tag. Then something like this:
var path = document.getElementById('something').src;
var extidx = path.lastIndexOf('.');
var extension = path.substr(extidx+1);

jQuery, JavaScript, HTML: how to load images after everything else is loaded?

I have a very complex page with a lot of scripts and a rather long loading time. On top of that page I want to implement the jquery Nivo Slider (http://nivo.dev7studios.com/).
In the documentation it says I have to list all images for the slider inside of a div#slider
<div id="slider">
<img src="images/slide1.jpg" alt="" />
<img src="images/slide2.jpg" alt="" title="#htmlcaption" />
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>
However I might have 10 images with a 1000x400px which is quite big. Those images would load when the page loads. Since they are in my header this might take quite a while.
I looking for a way to use any jquery Slider Plugin (like the nivo slider) but either dynamically load images or load all those images after everything else on my page has loaded.
Any idea how I could solve that?
Is there even a way to start a javascript process after everything else on the page has loaded? If there is a way I might have an solution for my problem (using the jquery ajax load() method) ... However I have no idea how to wait for everything else to load and then start the slider with all the images.

Here's what we did and its working great. We skipped setting src attribute of img and added img-location to a fake attribute lsrc. Then we load a dynamic image with lsrc value, and set the src of actual image only after its loaded.
Its not about faster loading, but its about showing the images only when its downloaded completely on your page, so that user do not have to see that annoying half-loaded images. A placeholder-image can be used while the actual images are being loaded.
Here's the code.
$(function(){
$.each(document.images, function(){
var this_image = this;
var src = $(this_image).attr('src') || '' ;
if(!src.length > 0){
//this_image.src = options.loading; // show loading
var lsrc = $(this_image).attr('lsrc') || '' ;
if(lsrc.length > 0){
var img = new Image();
img.src = lsrc;
$(img).load(function() {
this_image.src = this.src;
});
}
}
});
});
Edit: Trick is to set the src attribute only when that source is loaded in temporary img. $(img).load(fn); handles that.

In addition to Xhalent's answer, use the .append() function in jQuery to add them to the DOM:
Your HTML would just have:
<div id="slider">
</div>
And then your jquery would be:
jQuery(function(){
$("#slider").append('<img src="images/slide1.jpg" alt="" />');
});

check out jquery load() event, it waits for everything including graphics
$(window).load(function () {
// run code
});
on load you could then load the images using:
var image = new Image();
image.src = "/path/to/huge/file.jpg";
You can add a function onload to the image too
image.onload = function() {
...
}

I am using the below to power my slider and improve the page load performance.
for (var i = document.images.length - 1; i >= 0; i--) {
var this_image = document.images[i];
var src = $(this_image).attr('src') || '' ;
if(!src.length > 0){
var lsrc = $(this_image).attr('lsrc') || '' ;
if(lsrc.length > 0){
$(this_image).attr("src",lsrc);
}
}
}

the best way to use is b -lazy js.
bLazy is a lightweight lazy loading image script (less than 1.2KB minified and gzipped). It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page.
For a full list of options, functions and examples go to the blog post: http://dinbror.dk/blog/blazy.
The following example is a lazy loading multi-serving responsive images example with a image callback :) If your device width is smaller than 420 px it'll serve a lighter and smaller version of the image. When an image has loaded it removes the loader in the callback.
In Html
<img class="b-lazy"
src="placeholder-image.jpg"
data-src="image.jpg"
data-src-small="small-image.jpg"
alt="Image description" />
In js
var bLazy = new Blazy({
breakpoints: [{
width: 420 // Max-width
, src: 'data-src-small'
}]
, success: function(element){
setTimeout(function(){
// We want to remove the loader gif now.
// First we find the parent container
// then we remove the "loading" class which holds the loader image
var parent = element.parentNode;
parent.className = parent.className.replace(/\bloading\b/,'');
}, 200);
}
});
Example

jquery has a syntax for executing javascript after document has loaded:
<script type="text/javascript">
jQuery(function(){
//your function implementation here...
});
</script>