Как я могу получить источник изображения в одном div другому?

Question

Я работаю над дизайном пользовательского интерфейса, как я могу получить источник изображения в одном div для другого div, если я его нажму. Как в FB, как я могу получить источник изображения в полноэкранном режиме до кнопки с правопорядком. Я использую jQuery, html, css.

Полноэкранный:

$('.fullscreen').bind('click', function(event) { 
    var sectionId = $(this).parents('ul').attr('id'); 
    var outputId sectionId.replace('ul','img'); 
    var fullObj = $('#singleTemp').clone(); 
    var imgTarget = $('#' + outputId).attr('src'); 

    fullObj.find('#full').attr('src', imgTarget); 

    $('#fullscreenTemp').html(fullObj.html()); 

    var target = document.getElementById('fullscreenTemp'); 
    $('#fullscreenTemp').show(); 

    screenfull.request(target); 
}); 

screenfull.js мой плагин в полноэкранный режим

HTML стрелкам:

<div id="singleTemp" style="display:none"> 
    <div id="fullDiv" style="text-align: center"> 
     <div class="fs-main"> 
      <div class="fs-pic"> 
       <img id="full" style="max-height:100%; max-width:100%;" alt="imagecontainer image" src=""/> 
      </div> 
      <div class="fs-leftarrow"> 
       <img id="1" src="jqe13/image/leftarrow.PNG"/> 
      </div> 
      <div class="fs-rightarrow"> 
       <img src="jqe13/image/rightarrow.PNG"/> 
      </div> 
      <div class="fs-remove"> 
       <img src="jqe13/image/removee.png" height="20"onclick=""/> 
      </div> 
      <div class="fs-like"> 
       <img src="jqe13/image/like.PNG" height="45"/> 
      </div> 
      <div class="fs-unlike"> 
       <img src="jqe13/image/unlike.PNG" height="45"/> 
      </div> 
     </div> 
    </div> 
</div> 

HTML к изображению:

<div id="outputTemp" style="display:none"> 
<div id="rightoutputimgae"> 
<div id="rightimgId" class="rightimg" rel="tooltip" content=" 
    <img src='jqe13/image/1.jpg' class='tooltip-image'/> "> 
<div id="outputimageId" class="outputimage"> 
    <img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div> 
</div> 
<ul> 
    <li id="outfullscreen"><a href="#"> 
    <img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" 
    title="Full Screen"></a></li> 
    </ul> 
</div> 

У меня есть изображение в outputimageId.

Answer 1

Вы можете использовать как следующий код:

/// First div 
<div id="first"> 
    <img alt="example" src="\images\test.jpg" /> 
</div> 

// second div 
<div id="first"> 
    <img alt="example2" src="\images\blank.jpg" /> 
</div> 



var divsrc1 = $('img[alt="example"]').attr('src'); 

var divsrc2 = $('img[alt="example2"]').attr('src'); 
divsrc2 = divsrc1; 
alert("source of image with alternate text = example - " + divsrc2); 

Вот это использовать Demo

ниже код:

var divsrc1 = $('#first img').attr('src'); 
//alert("source of image with alternate text = example - " + divsrc1); 
var divsrc2 = $('#sec img').attr('src'); 
//alert("source of image with alternate text = example - " + divsrc2); 
divsrc2 = divsrc1; 
alert("source of image with alternate text = example - " + divsrc2); 

Answer 2

var src = $("#someImg").attr("src"); 

var src = $("#otherImg").attr("src",src); 

Просто установите СРК

Answer 3

Я думаю, что вы ищете слайдер effect.There много JQuery слайдер плагинов доступны бесплатно.

Для примера: http://www.hongkiat.com/blog/jquery-image-galleries-sliders-best-of/

Demo

Answer 4

var input = $("#rightoutputimgae").prop("src"); 
$("#otherImg").prop("src",input);