Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Dec 2015
    Posts
    2
    Member #
    52846

    Amend Image SRC and Append to Div

    I have a HREF that contains an image:

    HTML Code:
    <a href="#" class="small-gallery">
        <img src="001.jpg">
    </a>
    On clicking this image, a popup modal (Bootstrap) appears, and fills the modal body (ie. the content of the modal) with the same image as appears inside the HREF. ie:

    HTML Code:
    $('.thumbnail').click(function(e){
      e.preventDefault();
      $($(this).parents('.small-gallery').html()).appendTo('.modal-body');
      $('#myModal').modal({show:true});
    });
    This all works great, but what I actually want to do is change the image SRC that appears in modal body, so that it takes the SRC from the image (ie. 001.jpg) and adds a string of "-m" before the image extension, so it changes the image SRC to "001-m.jpg"

    So the sequence of events would be:

    Click .small-gallery href
    Grab image SRC from .small-gallery img
    Output full image tag in .modal-body but ensure the image SRC has "-m" before the .jpg extension

    I'm sure it's simple, but I'm having a mind dump and can't get it working.

    Thanks for your help in advance, and Merry Christmas!

  2.  

  3. #2
    Junior Member
    Join Date
    Dec 2015
    Posts
    2
    Member #
    52846
    Thanks for those that looked. This has been resolved with the help from another forum...

    ather than split the string could you just not supply the new source in a data attribute and grab that instead.

    e.g.

    Code:
    <a href="#" class="small-gallery">
        <img data-img-modal="001-m.jpg" class="thumbnail" src="001.jpg">
    </a>
    JS

    Code:
    $('.thumbnail').click(function(e){
      e.preventDefault();
      var myClone = $(this).closest('.small-gallery').clone();
      var theImg =  myClone.find('img');
      var newSrc = $(this).data('img-modal'); 
      theImg.removeClass('thumbnail').attr("src", newSrc);
      myClone.appendTo('.modal-body');
     $('#myModal').modal({show:true});
    });


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:48 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com