Загрузить изображение в div в зависимости от URL

Question

В настоящее время у меня есть страница с несколькими миниатюрными изображениями. Когда пользователь нажимает на одно из миниатюр, тогда большая версия этого изображения загружается в div. JQuery, что я использовал, чтобы сделать это:

$(document).ready(function() { 
    $('a.sigProBettonLink').click(function() { 
    var url = $(this).attr('href'), 
    image = new Image(); 
    image.src = url; 
    image.onload = function() { 
    $('.itemImage').empty().append(image); 
    }; 
    image.onerror = function() { 
     $('.itemImage').empty().html('That image is not available.'); 
    } 
    $('.itemImage').empty().html('Loading...'); 
    return false; 
    }); 
}); 

Я хочу сохранить эту функциональность, но добавить к нему. Я установил сайт таким образом, чтобы страница URL могла иметь несколько переменных в зависимости от того, как пользователь попал на эту страницу. Например

http://www.mysite/mypage?image=1 
http://www.mysite/mypage?image=2 
http://www.mysite/mypage?image=3 

В принципе, если URL является http://www.mysite/mypage?image=1, то я хочу, чтобы первый изображение для загрузки (как если бы пользователь нажал на первый эскиз). Если URL является http://www.mysite/mypage?image=2 я хочу второе изображение для загрузки в DIV (как если бы пользователь нажал на второй эскиз) и так далее ..

Answer 1

Благодарим вас за Marc Audet за то, что вы протолкнули меня в правильном направлении.

Я изменил свой код на следующее:

$(document).ready(function() { 

    var pathname = window.location.pathname; 
    if (window.location.href.indexOf("image1") > -1) { 
     var urlvalue = $('a.sigProBettonLink').get(0); 
    } 
    else if (window.location.href.indexOf("image2") > -1) { 
     var urlvalue = $('a.sigProBettonLink').get(1); 
    } 
    else if (window.location.href.indexOf("image3") > -1) { 
     var urlvalue = $('a.sigProBettonLink').get(2); 
    } 
    else if (window.location.href.indexOf("image4") > -1) { 
     var urlvalue = $('a.sigProBettonLink').get(3); 
    } 
    else if (window.location.href.indexOf("image5") > -1) { 
     var urlvalue = $('a.sigProBettonLink').get(4); 
    } 
    else if (window.location.href.indexOf("image6") > -1) { 
     var urlvalue = $('a.sigProBettonLink').get(5); 
    } 
    image = new Image(); 
    image.src = urlvalue; 
    image.onload = function() { 
     $('.itemImage').empty().append(image); 
    }; 

    $('a.sigProBettonLink').click(function() { 
     var url = $(this).attr('href'); 
     image = new Image(); 
     image.src = url; 
     image.onload = function() { 
      $('.itemImage').empty().append(image); 
     }; 
     image.onerror = function() { 
      $('.itemImage').empty().html('That image is not available.'); 
     } 
     $('.itemImage').empty().html('Loading...'); 
     return false; 
    }); 

}); 

Это теперь работает отлично. Большое вам спасибо за вашу помощь в этом :)

Answer 2

$(location).attr('href') дает текущий URL

Answer 3

В в этом случае вам нужно проанализировать URL-адрес. Следующий фрагмент кода будет анализировать каждый параметр и сохранить массив в качестве переменной:

var vars = [], hash; 
    var q = document.URL.split('?')[1]; 
    if(q != undefined){ 
     q = q.split('&'); 
     for(var i = 0; i < q.length; i++){ 
      hash = q[i].split('='); 
      vars.push(hash[1]); 
      vars[hash[0]] = hash[1]; 
     } 
} 

Теперь вы можете проверить, если «изображение» установлен или нет, и решить, что делать

var image = ''; 
if(typeof vars["image"] != "undefined"){ 
    //set 
    image = vars["image"]; 
}else{ 
    //not set 
} 

UPDATE:

О, непонятно.

Вам не нужен документ.URL, но ссылка href.

$('a.sigProBettonLink').click(function() { 

    var vars = [], hash; 

    //Clicked img url 
    var q = $(this).attr('href'); // <---------------- 

    if(q != undefined){ 
     q = q.split('&'); 
     for(var i = 0; i < q.length; i++){ 
      hash = q[i].split('='); 
      vars.push(hash[1]); 
      vars[hash[0]] = hash[1]; 
     } 
    } 


    image = new Image(); 

    if(typeof vars["image"] != "undefined"){ 

     //set the image url You will to load 
     image.src = q; 

    }else{ 
     //not set 
     image.src = ' default url ?'; 
    } 

    image.onload = function() {} 
    ... 


}); 

Answer 4

Вот код прототипа для подхода с использованием JQuery:

В демо, я использовал следующий фрагмент кода HTML:

<a class="sigProBettonLink" href="http://placekitten.com/50/100">Image 1</a><br> 
<a class="sigProBettonLink" href="http://placekitten.com/100/100">Image 2</a><br> 
<a class="sigProBettonLink" href="http://placekitten.com/150/100">Image 3</a> 

<div class="itemImage"></div> 

и вот JQuery:

$(document).ready(function() { 
    var pathname = window.location.pathname; 
    if (pathname.contains("image1")) { 
     var urlvalue = $('a.sigProBettonLink').get(0); 
    } 
    if (pathname.contains("image2")) { 
     var urlvalue = $('a.sigProBettonLink').get(1); 
    } 
    if (pathname.contains("image3")) { 
     var urlvalue = $('a.sigProBettonLink').get(2); 
    } 
    image = new Image(); 
    image.src = urlvalue; 
    image.onload = function() { 
     $('.itemImage').empty().append(image); 
    }; 

    $('a.sigProBettonLink').click(function() { 
     var url = $(this).attr('href'); 
     image = new Image(); 
     image.src = url; 
     image.onload = function() { 
      $('.itemImage').empty().append(image); 
     }; 
     image.onerror = function() { 
      $('.itemImage').empty().html('That image is not available.'); 
     } 
     $('.itemImage').empty().html('Loading...'); 
     return false; 
    }); 
}); 

Используйте window.location.pathname, чтобы получить URL-адрес, а затем использовать родной JavaScript .contains() для проверки имени изображения.

Демо-код по адресу: http://jsfiddle.net/audetwebdesign/sdQTv/

Чтобы увидеть функциональные возможности работы, попробуйте: http://jsfiddle.net/audetwebdesign/sdQTv/show/image2

Вы, возможно, придется настроить парсинг, если вы используете пару имя-значение в URL (?image=1) ,

Для получения информации и примеров о разборе URL, см:
https://developer.mozilla.org/en-US/docs/Web/API/window.location

Однако этот пример иллюстрирует основной подход.