CODEWITHSUNDEEP
jqueryhtmlcss
anu Radha
anu Radha

Reputation: 73

How can i get the source of the image in one div to another?

I'm working on UI designing, how can i get the source of the image in one div to another div if i click it. Like in FB , how can i get the source of the image in fullscreen to the rightarrrow button. I'm using jQuery, html , css.

Fullscreen:

$('.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 is my plugin to fullscreen

html to the arrows:

<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 to the image :

<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>

I have the image in outputimageId.

Upvotes: 1

Views: 788

Answers (4)

Praveen
Praveen

Reputation: 56549

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

Upvotes: 0

Divya Bhaloidiya
Divya Bhaloidiya

Reputation: 5064

You can use like following code : 

/// 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);

Here is the Demo

use below code : 

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);

Upvotes: 0

karthick
karthick

Reputation: 6178

I think you are looking for slider effect.There are plenty of jquery slider plugins available for free.

For Example :http://www.hongkiat.com/blog/jquery-image-galleries-sliders-best-of/

Demo

Upvotes: 0

TGH
TGH

Reputation: 39278

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

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

Just set the src

Upvotes: 1

Related Questions