用js jquery替换img src

Question

我的CMS中有一个新闻源，可以提取预览图像以及Feed的预告文字。图像都是缩略图@ 75x75px。我想让预览图像更大，但无法缩放那么小的图像。

我想知道我需要运行哪些JS来将所有URL替换为原始图像src。

有：

means %USERPROFILE%

需要将它们全部更改为以下内容 - 这只是将'thumb'替换为'large'：

这需要适用于整个css类;因为它是一个新闻源和会有新文章

这是我在的地方：

<div class="form-group" style='float:left;margin-right:10px;' id="normal_search">
     {!! Form::text('search', '', array('id'=>'yearly_search_id','class' => 'form-control','placeholder'=>trans('main.search').' '.trans('main.customer.title') )) !!}
</div>

Answer 1

如果新闻源包含在课堂中，请尝试这种方式。

function replaceImg($class) {
    $class.find("img").each(function(k, el) {
        var newSrc = $(el).attr("src").replace("_thumb", "_large");
        $(el).attr("src", newSrc);
    });
}

replaceImg($("#newsfeed"));

在HTML中，将新闻源代码包装在可识别的DIV中。

<div id="newsfeed"> {{place newsfeed code in here}} </div>

Answer 2

如果假设您拥有数组img中的所有var imgArray个元素，那么您可以通过它们进行迭代并更新src属性，如下所示：

imgArray.forEach(enlargeImageSrc);

function enlargeImageSrc (image) {
  image.src = image.src.replace('_thumb', '_large');
}

Answer 3

试试这个小提琴jsfiddle.net/bharatsing/wkh6da93/

这将找到页面中的所有图像，并用大图像更改其src。

$(document).ready(function(){           
    $("#btnLarge").click(function(){
    $("img").each(function(){
        var src=$(this).attr("src");
      src=src.replace("_thumb","_large");
      var src=$(this).attr("src",src);
    });
    });
});

Answer 4

尝试将鼠标悬停在该按钮上会使图片的class =“show”变大，只要你移除鼠标就会再次变小。

$("button").mouseenter(function (){
  var srcI = $(".show").attr("src");
  srcI = srcI.replace("thumb","large");
  $(".show").attr("src",srcI);
});
$("button").mouseleave(function (){
  var srcI = $(".show").attr("src");
  srcI = srcI.replace("large","thumb");
  $(".show").attr("src",srcI);
});

button{
  display:block;
}
img.show{
  max-width:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button>Click me</button>
  <img class="show" src="http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png"/>
</div>

Answer 5

我为你制作了一个代码，其中我为两个变量设置一个用于大图像URL，一个用于小图像URL。我创建了一个单击更改图像按钮的功能，您的图像URL更改为大图像，它显示您的大图像，然后您再次单击该按钮，它将大图像更改为小图像。您还可以在此处查看此实时演示https://jsfiddle.net/Arsh_kalsi01/3s1uudhe/2/

 

   $(document).ready(function(){
var big_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_large.png";

var small_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png";


	$(document).on("click",".Changeimagetolarge",function(){
  var obj = $(this);
  	obj.removeClass('Changeimagetolarge');
    obj.addClass('Changeimagetosmall');
  	obj.next("img").attr('src',big_image);
  });
  
  
  $(document).on("click",".Changeimagetosmall",function(){
    var obj2 = $(this);
  	obj2.removeClass('Changeimagetosmall');
    obj2.addClass('Changeimagetolarge');
  	obj2.next("img").attr('src',small_image);
  });
  
  
  
  
  
});

<script
			  src="https://code.jquery.com/jquery-3.1.1.min.js"
			  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
			  crossorigin="anonymous"></script>
<div>

<button class="Changeimagetolarge">
Change Image
</button>
<img src="http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png">

</div>