1

I want to load all image from array and return into this field instead link parameter .src of Object Image().

Example of my array:

var slides = {
    "123456": {
        "type": "type",
        "material": [ "material" ],
        "size": [ "size"],
        "price":  "price",
        "color": {
            "#000000":"jpg.jpg",
            "#C1876B":"jp.jpg", 
            "#ffffff":"j.jpg", 
            "#B5B8B1":"jp.jpg", 
            "#4D220E":"jpg.jpg"  
        }
    },
    "123457": {
        "type": "type",
        "material": [ "material" ],
        "size": [ "size"],
        "price":  "price",
        "color": {
            "#000000":"jpg.jpg",
            "#C1876B":"jp.jpg", 
            "#ffffff":"j.jpg", 
            "#B5B8B1":"jp.jpg", 
            "#4D220E":"jpg.jpg"  
        }
    },

If it so ease - sorry me, but I can't to do it myself.

More details: I have an array on page type of shopping-page. I load only first image and don't touch others. They will load only after user click on other color. But I want don't spend time and load all image into array after page load. Is it possible?

serge
  • 391
  • 1
  • 3
  • 9
  • Its not so clear what you are trying to do – thefourtheye Jan 21 '14 at 09:46
  • @thefourtheye, you can see an example on [link](http://stackoverflow.com/questions/7438287/jquery-how-to-check-when-all-images-in-an-array-are-loaded) but it creating second array. I want to load image in already exist array and return into field with image instead links - objects. Is it clear for you? – serge Jan 21 '14 at 09:51
  • Can you give an example of roughly what the HTML of the expected result would look like? – Anthony Grist Jan 21 '14 at 09:58
  • It's possibile using onClick event on the button for change the color and than load the relative image for `"#C1876B" -load-> "jp.jpg"` ecc... – Frogmouth Jan 21 '14 at 10:17
  • @AnthonyGrist you can see on the [next page](http://s.fhero.net) array has name "slides". But it is site on russian language – serge Jan 21 '14 at 10:22
  • @Frogmouth thx.. but I want load image on load page, NOT on click! – serge Jan 21 '14 at 10:24
  • I see your page and i see you already do a "loop" for set the "set" of colors for a item. Inside this loop you can preload the relative image using `new Image().src` = your url. Image with src preload the image store it in a object or array with refer on color button. – Frogmouth Jan 21 '14 at 10:53
  • @Frogmouth please, help me. I cannot do it normaly – serge Jan 21 '14 at 10:55
  • :P I'm so sorry I'm at work... if you can wait I help you seriously only after 20:00 CET. :) You can see this post: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/ "method 2" and use it inside your code in loop `for (var k in slides){` when you set the color. (at same time set an array or object that contain the Image Object and onClick on color display it instead the current image) – Frogmouth Jan 21 '14 at 11:19
  • @Frogmouth it will be nice! – serge Jan 21 '14 at 18:22

1 Answers1

1

Right.

Find and try to change this parts of your JS:

 var background = arrayKeys(slides[k]["color"],"array");
 for(var i=0;i<background.length;i++){
     html += "<li style=\"background: " + background[i] + ";\"></li>";
 }

to:

 var _color = slides[k]["color"]; 
 for(var _k in _color){
    var _image = new Image();
    _image.src = _color[k]
    var _cacheImage.push(_image);
    html += "<li class='selectColor' data-url='"+_color[k]+"' style=\"background: " + _k + ";\"></li>";
 }

and, after this for cicle:

for (var k in slides){
    if (slides.hasOwnProperty(k)) {
        //.. code
    }
}

add:

$(".selectColor").on("click",function(){
    $(this).parentAll(".slide").find("> img").attr("src","" + $(this).attr("data-url"));
});

right now... every time you click on a color the image will be change.

Frogmouth
  • 1,808
  • 1
  • 14
  • 22