Изменение фиксированного изображения при прокрутке

Question

Я пытаюсь иметь фиксированное изменение изображения, когда я просматриваю 3 определенные строки. Изображение - это телефон с интерфейсом, который должен соответствовать нормальному тексту, так как я просматриваю новый текст, и интерфейс телефона должен соответственно меняться!

Мне удалось изменить JSFiddle, который я нашел в другом потоке, чтобы сделать трюк с некоторым текстом Div, но я не могу его внедрить на своем сайте, у которого есть изображения с URL-адресами в качестве источника.

Вот JSFiddle: http://jsfiddle.net/dB7eF/25/

Вот JS, что швы сделать трюк в JSFiddle:

$("#image1").fadeIn(1000); 
$(document).scroll(function() { 
    var pos = $(document).scrollTop(); 
    if (pos < 200) { 
    hideAll("image1"); 
    $("#image1").fadeIn(1000); 
    } 
    if (pos > 200 && pos < 600) { 
    hideAll("image2"); 
    $("#image2").fadeIn(1000); 
    } 
    if (pos > 600 && pos < 1000) { 
    hideAll("image3"); 
    $("#image3").fadeIn(1000); 
    } 
}); 

function hideAll(exceptMe) { 
    $(".image").each(function(i) { 
    if ($(this).attr("id") == exceptMe) return; 
    $(this).fadeOut(); 
    }); 
} 

Сайт построен с визуальной Composer, поэтому я хотел бы исходники изображений для URL вместо идентификаторов, как в примере JSFiddle!

Answer 1

Я обновил Js скрипку и добавлены теги изображений с источника, добавив тег изображения внутри Div теги

<div id="c3" class="left"><img src="https://dummyimage.com/300x200/000/fff" style="width:100px"/></div> 

http://jsfiddle.net/dB7eF/26/

это то, что вы просили?