Swap img src, ahref src for gallery. Javascript//Jquery

Question

I am having a real struggle.

This is for a webshop. I have a "Big image" and a few thumb images. When I click the big image I want to open a lightbox gallery with my other images.

What I'm also trying to do is that when I press a thumb image I want to swap place and link with the big image. So that the thumb that is pressed becomes the big image and the big image becomes the thumb image.

I've been trying for hours and don't seem to get it to work.

This is the HTML structure:

<div id="gallery" style="max-width: 400px;">

    <div class="image">
        <a href="http://image/cache/data/50RO160-600x600.jpg" title="50 Speeds Of Play - Gray Steel" class="zoomThis" data-lightbox="bilder">
            <img src="http://image/cache/data/50RO160-388x388.jpg" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" id="main-img" width="388" height="388">
        </a>
    </div>


    <ul>
        <li id="1" style="float: left;">
            <a href="http://image/cache/data/50RO160-03-600x600.jpg" class="thumb-link-1" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-03-74x74.jpg" class="thumb-img-1" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>

        <li id="2" style="float: left;">
            <a href="http://image/cache/data/50RO160-02-600x600.jpg" class="thumb-link-2" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-02-74x74.jpg" class="thumb-img-2" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>

        <li id="3" style="float: left;">
            <a href="http://image/cache/data/50RO160-04-600x600.jpg" class="thumb-link-3" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-04-74x74.jpg" class="thumb-img-3" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>

        <li id="4" style="float: left;">
            <a href="http://image/cache/data/50RO160-05-600x600.jpg" class="thumb-link-4" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-05-74x74.jpg" class="thumb-img-4" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>
    </ul>
    <div style="clear: both;"></div>
</div>

This is the javascript I've worked with so far (and alot of others) but I can't get it to work:

<script type="text/javascript">
$("#gallery li").click(function() {
    var id = $(this).attr('id'); //Getting the ID of the LI that is pressed
    var oldBIGIMG = $("#main-img").attr('src'); //Getting the OLD big img link
    var oldBIGLINK = $(".zoomThis").attr('href'); //Getting the OLD big ahref
    var newBIGIMG = $(".thumb-img-" + id).attr('src'); //Getting the OLD thumb img
    var newBIGLINK = $(".thumb-link-" + id).attr('href'); //Getting the OLD link

    $("#main-img").attr('src',newBIGIMG.replace('74x74', '600x600')); //Makeing the OLD thumb img BIG by replaceing 74x74 with 600x600 and adds the "newBIGIMG" value to to #main-img's src
    $(".zoomThis").attr('href',newBIGLINK);  //Giveing the old THUMB link to the big LINK (So correct image opens on lightbox press)
    $(".thumb-img-" + id).attr('src',oldBIGIMG); //Makeing the old big image to take the thumbs place
    $(".thumb-link-" + id).attr('href',oldBIGLINK); //Makeing the olg big link to take the thumbs link place

});

</script>

If I make every variable hardcoded, like var oldBIGIMG("I type the link"); it seems to work pretty ok. So I guess I'm missing something or doing something wrong.

Anyone that could help me in correct direction would be really great.

Thanks!

Answer 1

Try this out it might work.

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
          $("ul li").each(function(){
            $(this).click(function(){
               var a=$(this).children("a").attr("href");
               $(".image a img").attr("src",a);
            });
          });
        });
</script>

Answer 2

 function LoadIframeSrc(elemID) { $('.areffer').each(function(){ if(elemID==$(this).attr('id')){ var mainSrc = $('#main-img').closest("img").attr('src'); $('#main-img').closest("img").attr('src',$(this).find('.imager').attr('src')); $(this).find('.imager').attr('src', mainSrc); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="gallery" style="max-width: 400px;"> <div class="image" name="myTarget"> <a href="#" title="50 Speeds Of Play - Gray Steel" class="zoomThis" data-lightbox="bilder"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBDs29Z9gJa8eMnmBVK4ziKc3L325HppfJFBEzpHlzBMGKDHu4" class="imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" id="main-img" width="388" height="388"> </a> </div> <ul> <li id="1" style="float: left;"> <a href="#" onclick="LoadIframeSrc(this.id)" class="thumb-link-1 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh1"> <img src="http://cdn.filipekberg.se/fekberg-blog/wp-content/uploads/2014/04/VS2013Logo.png" class="thumb-img-1 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a> </li> <li id="2" style="float: left;"> <a href="#" onclick="LoadIframeSrc(this.id)" class="thumb-link-2 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh2"> <img src="https://redhoop.com/blog/wp-content/uploads/2013/11/c_sharp.png" class="thumb-img-2 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a> </li> <li id="3" style="float: left;"> <a href="#" onclick="LoadIframeSrc(this.id)" class="thumb-link-4 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh3"> <img src="https://university.xamarin.com/images/topic-icons/csharp.png" class="thumb-img-3 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a> </li> <li id="4" style="float: left;"> <a href="#" onclick="LoadIframeSrc(this.id)" class="thumb-link-4 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh4" > <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiFG_7WJ3lSIX3bZ0VqgOavhox1X5CIRc40BJ34C9r9zscCtzd" class="thumb-img-4 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a> </li> </ul> <div style="clear: both;"></div> </div> 

Rgds :)

Answer 3

 function LoadIframeSrc(elemID) { $('.areffer').each(function(){ if(elemID==$(this).attr('id')){ var mainSrc = $('#main-img').closest("img").attr('src'); var newSrc = $(this).find('.imager').attr('src'); $('#main-img').closest("img").attr('src',newSrc); $(this).find('.imager').attr('src', mainSrc); $('#main-href').attr('href', newSrc); $(this).attr('href', mainSrc); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="gallery" style="max-width: 400px;"> <div class="image" name="myTarget"> <a href="#" title="50 Speeds Of Play - Gray Steel" class="zoomThis" data-lightbox="bilder" id="main-href"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBDs29Z9gJa8eMnmBVK4ziKc3L325HppfJFBEzpHlzBMGKDHu4" class="imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" id="main-img" width="388" height="388"> </a> </div> <ul> <li id="1" style="float: left;"> <a href="http://cdn.filipekberg.se/fekberg-blog/wp-content/uploads/2014/04/VS2013Logo.png" target="myIfOne" onclick="LoadIframeSrc(this.id)" class="thumb-link-1 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh1"> <img src="http://cdn.filipekberg.se/fekberg-blog/wp-content/uploads/2014/04/VS2013Logo.png" class="thumb-img-1 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a> </li> <li id="2" style="float: left;"> <a href="https://redhoop.com/blog/wp-content/uploads/2013/11/c_sharp.png" target="myIfOne" onclick="LoadIframeSrc(this.id)" class="thumb-link-2 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh2"> <img src="https://redhoop.com/blog/wp-content/uploads/2013/11/c_sharp.png" class="thumb-img-2 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a> </li> <li id="3" style="float: left;"> <a href="https://university.xamarin.com/images/topic-icons/csharp.png" target="myIfOne" onclick="LoadIframeSrc(this.id)" class="thumb-link-4 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh3"> <img src="https://university.xamarin.com/images/topic-icons/csharp.png" class="thumb-img-3 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a> </li> <li id="4" style="float: left;"> <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiFG_7WJ3lSIX3bZ0VqgOavhox1X5CIRc40BJ34C9r9zscCtzd" target="myIfOne" onclick="LoadIframeSrc(this.id)" class="thumb-link-4 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh4" > <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiFG_7WJ3lSIX3bZ0VqgOavhox1X5CIRc40BJ34C9r9zscCtzd" class="thumb-img-4 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a> </li> </ul> <div style="clear: both;"></div> </div> <iframe id="ifOne" name="myIfOne" src="" style="display:none"> </iframe> 

I could only manage to get the href on a-tag when I set the target to a iframe that i dont display..Mayby someone else has a better, less sneaky, idea :)