Replacing href text with something else using Javascript

Question

How can I replace the "echo ucwords($row2[mainImage1]);" in the href attribute of the tag below with the "echo $row2[selectionThumb3];" from the src attribute of the tag below using Javascript?

Here is how my code looks:

    <img class="thumbNotSelected" src="../images/ThumbSelection/<?php echo $row2[selectionThumb3]; ?>.jpg"  />

<div class="mainImage magnify">
     <a href="../images/MainImage/<?php echo ucwords($row2[mainImage1]); ?>.jpg" rel="lightbox" title="<?=$row2[name]?>">
           <img class="mainImage small" src="../images/MainImage/<?php echo $row2[mainImage1]; ?>.jpg" /></a>
</div>

Adding my current Javascript:

$('#thumbs').delegate('img', {
click: function(){
$('.mainImage').attr('src',$(this).attr('src').replace('ThumbSelection','MainImage').replace('selectionThumb','mainImage')); //here I replace the src of the Main Image to match the selected thumbnail.
var $this = $(this),
  index = $this.index();
$("#thumbs img").removeClass('thumbSelected');
 $this.addClass('thumbSelected');

}});

There are several thumbs that the user can click on. The main image loads the corresponding picture after clicking on its Thumb. However, the (used for a lightbox) never changes to adapt to the new loaded picture and the lightbox always uses the same image instead of the one the user has clicked on. Thanks!

If you're using JavaScript, show the rendered mark-up of the page ('view source' in the browser), and then clarify what you're asking us to help with. — David Thomas
– David Thomas, Commented Jun 21, 2013 at 14:07
Sorry, just realized it wasn't clear. I added the JS and additional info. Thanks! — samyb8
– samyb8, Commented Jun 21, 2013 at 14:36

Raibaz · Accepted Answer · 2013-06-21 14:48:56Z

2

$('.mainImage a').attr('href', $('.thumbNotSelected').attr('src'));

Should do what you need.

answered Jun 21, 2013 at 14:48

Raibaz

9,74010 gold badges49 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2509541 · Accepted Answer · 2013-06-21 15:37:58Z

1

With the js below you would be dynamically changing the href of your link to the same exact path of the image loaded. Let me know if it works

 $('#thumbs').delegate('img', {
    click: function(){
        $('.mainImage').attr('src',$(this).attr('src').replace('ThumbSelection','MainImage').replace('selectionThumb','mainImage'));
        $('.mainImage a').attr('href',$(this).attr('src').replace('ThumbSelection','MainImage').replace('selectionThumb','mainImage'));
        var $this = $(this),
        index = $this.index();
        $("#thumbs img").removeClass('thumbSelected');
        $this.addClass('thumbSelected');

    }});

answered Jun 21, 2013 at 15:37

user2509541

2684 silver badges15 bronze badges

Collectives™ on Stack Overflow

Replacing href text with something else using Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related