Develop Reference

Reloading a DIV's image and class by Javascript on click of separate DIV.

The code I’m working with is too long to post, so I’ve made a fiddle here: http://jsfiddle.net/Emily92/5b72k225/
This code takes a random image and cuts it up into a number of pieces depending on the class that is applied in the div which contains the image.
When the page loads, a random image is selected from the array and the class is applied to it, what I’m trying to do is create a separate div, which when clicked on will reload the div containing the image. The result I’m looking for is for the image to be replaced by a new random image with the class applied to it.
Right now, the only way I can make a new image appear in the div is to reload the entire page, ideally this would be achieved by just having the div reload instead of all the other page elements reloading too.
I haven’t been able to do this so far but have received some help on here on how to reload an image and class on click of a div, lines 980-1018 of the Javascript code in the jsfiddle is the current attempt at achieving this, but solving this problem seems much more complicated as the image is being manipulated by the Javascript code, so perhaps this needs to also be reloaded at the same time as the new randomised image is selected?
This is the current attempt at solving this problem:
$(function() {
var imageArray = [
'http://www.webdesignhot.com/wp-content/uploads/2009/10/CatsVectorImage.jpg',
'http://www.costume-works.com/images/halloween_cat_in_witch_hat.jpg',
'http://onthewight.com/wp-content/2013/04/sooty-ryde.jpg'];
reloadImages(imageArray);
$('#reload').on('click',function(){
$( "#masterdiv img[id^='div']" ).each(function(index){
$(this).removeClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeOut( "slow", function() {
if(index==0) {
reloadImages(imageArray);
}
$(this).addClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeIn();
});
});
});
});
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function reloadImages(array){
shuffleArray(array);
for(var i=0;i<3;i++){
// places the first image into all divs
document.getElementById('div'+(i+1)+'id').src=array[0];
}
}
I’ve written more details on the issue in the html section of the jsfiddle. I'd really appreciate any advice in solving this and thank you for any help in advance!

The plugin reads the images' src before page load, takes them and then generates the puzzle. As such, you can not just update the images as they're not there anymore. So you'd have to clear the divs under each difficulty classes (easyDiv,mediumDiv,hardDiv), append a new <img> under each div then calls / reload the plugin. Updated code in : http://jsfiddle.net/5b72k225/6/
Changes I've made:
Separate old reloadImages into initImages and reloadImages. initImages is called in the beginning, while reloadImages is called when reloading.
Created new function makePuzzle by taking out the intialization of the plugin from $(document).ready() block, so makePuzzle can be called after reloading new image.
The new $(document).ready() block now initializes the images and attaches click event handler to the button. When clicked, divs are emptied, new <img>s inserted and plugin is called.

jQuery Guillotine - Swap Image

I am using jquery guillotine to crop image and save to the server but unfortunately when i want to do things dynamically it doesn't work as it should be . I have created thumbnails on the same picture and when you click on a thumbnail it should let you edit that picture and crop etc. I have 3 scripts on the page , 1 ) guillotine , 2) scripts that when you click on thumbnails swaps the small image with the big one , 3) and when you click on crop button gets the values and does the job in php.
after i swap the image , i call/run the guillotine but it seems like it is caching the first images dimensions. i have created a fiddle.
i dont know how to put link to jsfiddle here but it is jsfiddle / 0 unub 77 f

I'm a bit late but as said above it might help others with the same problem.
Guillotine gets the absolute image dimensions when initialized (that's why the image needs to be already loaded or cached) and after that everything is made relative to keep it responsive. If the images don't have the same dimensions you'll get broken aspect ratios and other unexpected behaviors.
So, if you have Guillotine working on an image and you want to swap that image, you should remove the existing instance of the plugin and create a new one over the new image so it can properly render such new image.
var pictures = $('.picture'),
gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' // 1x1 gif
// Guillotine loader
pictures.on('load', function() {
var img = $(this)
// Remove any existing instance
if (img.guillotine('instance')) img.guillotine('remove')
// Create new instance
img.guillotine({width: 400, height: 300})
// Bind buttons, only the first time!
if (! img.data('bindedBtns')) {
img.data('bindedBtns', true)
$('#rotate_left').click(function(){ img.guillotine('rotateLeft') })
$('#rotate_right').click(function(){ img.guillotine('rotateRight') })
// ...
}
})
// Swap images as needed.
// Each time you change a 'src' attribute the function above should run.
picture.on('click', function() { /* Swap thumbnail */ })
// Make sure that the 'onload' event is triggered at least once on each picture.
pictures.each(function() {
// Save the original src, replace it with the 1x1 gif and reload the original src.
if (this.complete !== false) { var src = this.src; this.src = gif; this.src = src }
}
The 'onload' handler serves two purposes, it loads guillotine the first time for each picture and reloads it everytime a picture is swapped.
Two important points to consider:
Actions (rotate, zoom, etc.) should be binded only once to avoid problems like #5.
You have to make sure that the script runs before each image finishes loading, or otherwise you won't have the plugin before swapping images (the last part of the script handles this).
Hope it helps.

ok i figured out , when i set the img src in the second script i had to destroy everything and than call the script again.

right here is my solution to my question
you load the first image as in the demo page , and than put your javascript that does the swap image, basically change the source of the image, destroy it and than call the function again
var swap_img = $(this).find('img').attr('src'); //get the src of the image of the thumbnail
$("#sample_picture").attr('src',swap_img); //set it , swap it
picture.guillotine('remove'); //remove the current instance
guillotine_function(); //and call it again.
and everything should work as it should be

this code work without deleting the guillotine instance, img being the image element :
guillotine._unwrap();
guillotine.zoomInFactor = 1 + guillotine.op.zoomStep;
guillotine.zoomOutFactor = 1 / guillotine.zoomInFactor;
guillotine.glltRatio = guillotine.op.height / guillotine.op.width;
guillotine.width = guillotine.height = guillotine.left = guillotine.top = guillotine.angle = 0;
guillotine.data = {
scale: 1,
angle: 0,
x: 0,
y: 0,
w: guillotine.op.width,
h: guillotine.op.height
};
guillotine._wrap(img);
guillotine.fit();

JavaScript greybox -- slidehow won't work in FF/Safari

is anybody familiar with greyBox JavaScript plugin?
orangoo.com/labs/GreyBox/
it's for slideshows and stuff.. I can't get it to work in FF/Safari; it works great in IE, but FF/Safari won't play ball..
orensanz.org/photos.html
would very much appreciate some suggestions..
supposedly there's a google group (forum) for this thing (can't post url.. this thing limits how many urls u can include in a post, it's linked to from their home pg (url above.. oh brother..) but when you link to it you land on a pg that says they've been booted out b/c they violated google's terms of service....;-)
thank you..

It looks to me as if there's a race condition in some of that Javascript code. If the image isn't in cache, then this looks to me like it'll never make the image box visible:
if(gb_type == "image") {
if(img_holder.width != 0 && img_holder.height != 0) {
var width = img_holder.width;
var height = img_holder.height;
GB.width = width;
GB.height = height;
setupOuterGB();
if(GB.use_fx) {
AJS.setOpacity(frame, 0);
AJS.fx.fadeIn(frame);
}
}
}
else {
GB.width = frame.offsetWidth;
GB.height = frame.offsetHeight;
setupOuterGB();
}
In think that code should be called as the "load" handler for the image. Note that your page works fine in Firefox the second time you click on any particular image.

if(GB.show_loading) {
AJS.AEV(window, 'load', function(e) {
loaded();
});
}
else {
loaded();
}
Try putting these lines on either a timeout or replace the lower loaded() with AJS.AEV(window, 'load', function(e) {loaded();});

(I couldn't add comment, nothing happens when click on 'add comment'..)
yes I know I can use other lightboxes.. but what I do need is one in which slideshow lands in photo the user CLICKED.. at work I've been using this one, flowplayer.org/tools/demos/scrollable/easing.html, but when you tell it to start at a given photo (not photo 1) it SLIDES towards it.. I need one in which it just lands on specified photo without the sliding effect -- other than that this one would be perfect
a lot of slick JS lightboxes out there have 'next' button on top of photo itself and other stuff obstructing photo a bit, I don't want that.. ) oh man, I still can't get this thing to work AT ALL in Safari, whereas examples they have online (orangoo.com/labs/GreyBox/) work fine in Safari, I don't get this.. thank you for your help (btw: I tried many diff settings for setTimeout, all the way from 1000 milliseconds to about 30,000.. either way Safari won't touch it.. :-(

Images show and then disappear in Safari

So this is really weird. If you go to http://floridahome.palmbeachpost.com/ in Safari and do a search for listings, you'll see our image not found come up on results where the images really should come up. If you don't see what I'm talking about the on the first page, click through a couple pages. If you do the same search in Firefox or IE the images should show up.
What is weird is that it looks like the images load for a split second and then disappear. The onerror event gets thrown and that's why we show the place holder image.
If anyone can shed some light on this I'd be forever grateful.
(I know our source doesn't validate, I'm going to work on that tomorrow first thing)

In YAHOO.backyardpost.init(), there’s this:
var imgs = document.images;
for (var i = 0; i < imgs.length; i++) {
if ((!imgs[i].complete ||
imgs[i].naturalHeight == 0 ||
imgs[i].naturalWidth == 0) &&
imgs[i].src.match(/services\.palmbeachpost/i))
{
imgs[i].src = '/static/img/gfx/img_not_available.jpg';
}
}
When does this get called and are you certain that the images have completely loaded at the time it’s called?
I can’t set a breakpoint on this line given the minified code, but I would suspect that one of the conditions—possibly imgs[i].complete—is not true and causing the image to be replaced.
There is anecdotal evidence [1] [2] that the complete attribute doesn’t always work in Safari.

Javascript Show and Hide Divs Reloads Complete Page in IE6

and thank you for taking a look at this question.
We have developed a website which has a navigation control (Next and Previous buttons) written in Flash. These buttons use ExternalInterface to call a Javascript function in my webpage, e.g. ExternalInterface.call("showPage", pageNum);
My HTML page contains a number of Divs which each represent a single 'screen'. The first Div (screen) has the CSS Display set to 'inline' and all of the remaining are set to 'none'.
The Javascript showPage function which is called when the Flash button is clicked is as follows and it calls the hideShow function:
function showPage(which) {
if (pagetype == "lo"){
if(which < 0 && isRunningInFrame()){goPrev();}
else if (which > maxPageNum && isRunningInFrame()){goNext();}
else{dsPages.setCurrentRow(which);}
}
hideShow('page' + currentRow, 'page' + which);
prevRow = currentRow;
currentRow = which;
}
function hideShow(hideDiv, showDiv){
if(document.getElementById(hideDiv)!=null){
document.getElementById(hideDiv).className = "hideDiv clear";
}
if(document.getElementById(showDiv)!=null){
document.getElementById(showDiv).className = "showDiv clear";
}
}
This all works well in contemporary browsers and is very responsive. However our client has Internet Explorer 6 on all of their PCs (well they would wouldn't they!) and when you click Next the complete page reloads. I only assume this is happening because I can see in the bottom left corner of the browser (in the grey bar) all of the JPEG images loading. Some of the HTML pages contain approximately 50 'screens' and this is very slow when they all load over and over again.
I would be very grateful if anyone can see why this is happening or could suggest a more efficient approach to this.
Thank you.
Regards
Chris

Pointy may have a point here (no pun intended). A simple guess-suggestion would be to try placing a 'return false;' after your js-call.