JQuery का उपयोग करके छवि स्रोत बदलना

762

मेरा डोम इस तरह दिखता है:

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

जब कोई छवि पर क्लिक करता है, तो मैं चाहता हूं कि छवि src बदलकर <img src="imgx_off.gif">जहां xछवि संख्या 1 या 2 का प्रतिनिधित्व करती है।

क्या यह संभव है या क्या मुझे छवियों को बदलने के लिए सीएसएस का उपयोग करना होगा?

javascript jquery image

— user67033
स्रोत

यदि आप jQuery का उपयोग करके कुछ चाहते हैं तो आप jQuery Cycle Plugin, डेमो स्क्रॉलराइट (नीचे-दाएं उदाहरण) में

— देखना चाहते हैं

43

jQuery ("# my_image")। Attr ("src", "first.jpg")

— मनीष नौटियाल

9

आपको वास्तव में जोंस्टजोन के उत्तर को स्वीकार करना चाहिए :) प्रश्न और उत्तर दोनों पर उत्थान की संख्या इंगित करती है कि बहुत सारे लोग इस पर चले हैं। यह प्रश्न का एक बेहतर जवाब होगा।

— Xcelled

4

अब तक, यानि 19th July, 2016 15:39 PM, प्रश्न अपवोट्स काउंट 369 और @jonstjohn उत्तर अपवोट्स काउंट 931 । लेकिन, इस तरह के एक बुरा भाग्य, @OP के बाद लॉग इन नहीं किया Feb 17 '09 at 2:57। :(और, @jonstjohn उत्तर रहो अचिह्नित किया ।

— नाना पार्टीकर

@Xcelled, केवल समस्या यह है कि jonstjohn का उत्तर प्रश्न का उत्तर नहीं देता है। यह एक मामूली बात है, लेकिन बनाने लायक है। इंको के उत्तर पर एक नज़र डालें क्योंकि यह यहाँ एकमात्र है जो वास्तव में प्रश्न का सही उत्तर देता है।

— डेविड न्यूकॉम्ब

1686

आप jQuery के attr () फ़ंक्शन का उपयोग कर सकते हैं । उदाहरण के लिए, यदि आपके imgटैग में id'my_image' की विशेषता है, तो आप ऐसा करेंगे:

<img id="my_image" src="first.jpg"/>

तो आप srcइस तरह से jQuery के साथ अपनी छवि को बदल सकते हैं :

$("#my_image").attr("src","second.jpg");

इसे एक clickघटना में संलग्न करने के लिए , आप लिख सकते हैं:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

छवि को घुमाने के लिए, आप ऐसा कर सकते हैं:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

— jonstjohn
स्रोत

79

सामान्य गलतियों में से एक लोग तब करते हैं जब छवि स्रोत को बदलने के लिए छवि लोड की प्रतीक्षा नहीं होती है जैसे बाद में छवि आकार को परिपक्व करना आदि। आपको .load()छवि लोड के बाद सामान करने के लिए jQuery विधि का उपयोग करना होगा ।

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

संपादन का कारण: https://stackoverflow.com/a/670433/561545

— मोहसिन
स्रोत

हाँ। यह आखिरकार चाल चली गई। .destroy () लगभग बहुत दूर नहीं जाता है। सभी एचटीएमएल और थिनिट को Nuking वास्तव में फिर से काम करता है जब विभिन्न आकारों और इस तरह की छवियों को स्वैप किया जाता है।

— मैट जे।

ध्यान दें कि लोड मज़बूती से फायर नहीं करेगा, खासकर अगर छवि कैश में है। JQuery के दस्तावेज़ देखें।

— ट्विलाइट

19

अधिक जानकारी के लिए। मैं उदाहरण के लिए वाक्यविन्यास का उपयोग करके विज्ञापन छवि के लिए jquery में attr विधि के साथ src विशेषता सेट करने का प्रयास करता हूं:$("#myid").attr('src', '/images/sample.gif');

यह समाधान उपयोगी है और यह काम करता है लेकिन यदि पथ परिवर्तन होता है, तो छवि के लिए पथ भी काम नहीं करता है।

मैं इस मुद्दे को हल करने के लिए खोज रहा हूं, लेकिन कुछ भी नहीं मिला।

समाधान शुरुआत में '\' डाल रहा है: $("#myid").attr('src', '\images/sample.gif');

यह ट्रिक मेरे लिए बहुत उपयोगी है और मुझे उम्मीद है कि यह अन्य के लिए भी उपयोगी है।

— wphonestudio
स्रोत

18

अगर वहाँ केवल jQuery या अन्य संसाधन हत्या ढांचे नहीं है - कई kb एक उपयोगकर्ता के लिए एक सरल चाल के लिए हर बार डाउनलोड करने के लिए - लेकिन यह भी देशी जावास्क्रिप्ट (!)

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

यह सामान्य और अधिक सुरुचिपूर्ण लिखा जा सकता है:

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

— सह में
स्रोत

यह हमेशा मुझे आश्चर्यचकित करता है कि कितने लोग एक प्रश्न नहीं पढ़ सकते हैं और अनुरोधित उत्तर दे सकते हैं। यह मुझे (और आपको) स्पष्ट लग रहा था कि प्रश्न एक सामान्य समाधान की तलाश में था, यही वजह है कि ओपी ने 2 उदाहरण दिए। और फिर भी सभी को लग रहा था कि यह न केवल पूरी तरह से छूट जाएगा बल्कि एक ऐसा उत्तर देगा जिसने इस प्रश्न का उत्तर नहीं दिया। :(

— डेविड न्यूकॉम्ब

17

मैं आपको दिखाऊंगा कि छवि को कैसे बदला srcजाए, ताकि जब आप किसी छवि पर क्लिक करें तो यह आपके HTML में ( विशेष रूप से आपकी d1आईडी और c1कक्षा में) सभी छवियों के माध्यम से घूमती हो ... चाहे आपके HTML में 2 या अधिक चित्र हों ।

मैं आपको यह भी दिखाऊंगा कि दस्तावेज़ तैयार होने के बाद पृष्ठ को कैसे साफ किया जाए, ताकि शुरुआत में केवल एक ही छवि प्रदर्शित हो।

पूरा कोड

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

विभाजन

छवियों से युक्त लिंक की एक प्रति बनाएँ (ध्यान दें: आप अतिरिक्त कार्यक्षमता के लिए लिंक की href विशेषता का उपयोग भी कर सकते हैं ... उदाहरण के लिए प्रत्येक छवि के नीचे काम कर रहे लिंक को प्रदर्शित करें ):
```
    var $images = $("#d1 > .c1 > a").clone();  ;
```
जांचें कि HTML में कितनी छवियां थीं और यह दिखाने के लिए एक चर बनाएं कि किस छवि को दिखाया जा रहा है:
```
var $length = $images.length;
var $imgShow = 0;
```
दस्तावेज़ के HTML को संशोधित करें ताकि केवल पहली छवि दिखाई जा रही है। अन्य सभी छवियों को हटा दें।
```
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
```
छवि लिंक पर क्लिक करने पर हैंडल करने के लिए एक फ़ंक्शन को बाइंड करें।
```
    $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });
```
उपरोक्त कोड का दिल ++$imgShow % $lengthछवियों से युक्त jQuery ऑब्जेक्ट के माध्यम से चक्र के लिए उपयोग कर रहा है। ++$imgShow % $lengthपहले एक-एक करके हमारे काउंटर को बढ़ाता है, फिर यह उस नंबर को मॉड करता है जिसमें कितने चित्र हैं। इस से परिणामी सूचकांक साइकिल चालन रखेंगे 0करने के लिए length-1, जिनमें से सूचकांकों हैं $imagesवस्तु। इसका अर्थ है कि यह कोड 2, 3, 5, 10, या 100 छवियों के साथ काम करेगा ... प्रत्येक छवि के माध्यम से साइकिल चलाना और अंतिम छवि तक पहुंचने पर पहली छवि पर पुनरारंभ करना।

इसके अतिरिक्त, .attr()छवियों के "src" विशेषता को प्राप्त करने और सेट करने के लिए उपयोग किया जाता है। $imagesऑब्जेक्ट के बीच से तत्वों को लेने के लिए , मैं फॉर्म का उपयोग करके jQuery संदर्भ के$images रूप में सेट करता हूं । फिर मैं उस विशिष्ट सूचकांक को चुनने के लिए उपयोग करता हूं, जिसमें मेरी रुचि है।$(selector, context).eq()

jsFiddle 3 छवियों के साथ उदाहरण

तुम भी srcएक सरणी में स्टोर कर सकते हैं ।
jsFiddle 3 छवियों के साथ उदाहरण

और यहाँ कैसे छवियों के आसपास लंगर टैग से hrefs को शामिल करने के लिए है:
jsFiddle उदाहरण

— पीटर अज़ताई
स्रोत

17

उम्मीद है कि यह काम कर सकता है

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

— जीशान
स्रोत

हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— डेरेक ब्राउन

धन्यवाद डेरेक अगली बार से मेरे दिमाग में यह बात रखेगा

— जीशान

14

आपको अपने इमेज टैग में आईडी विशेषता को इस तरह जोड़ना चाहिए:

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

तब आप छवियों के स्रोत को बदलने के लिए इस कोड का उपयोग कर सकते हैं:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

— श्री बिटमैप
स्रोत

9

आप इसे इस तरह से jQuery के साथ भी कर सकते हैं:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

यदि आपकी छवि स्रोत के लिए कई राज्य हैं, तो आपके पास एक शर्त हो सकती है।

— FernandoEscher
स्रोत

5

यह वाक्यविन्यास सही नहीं है। jquery attr () फ़ंक्शन 1 या 2 पैरामेट्स लेता है। पहला HTML विशेषता नाम के साथ एक स्ट्रिंग है, दूसरा उस विशेषता के लिए मूल्य है जिसे आप सेट करना चाहते हैं।

— थिगो सिल्वा

7

मुझे वही समस्या थी जब पुनः कैप्चा बटन को कॉल करने की कोशिश की जा रही थी। कुछ खोज के बाद, अब नीचे का फ़ंक्शन लगभग सभी प्रसिद्ध ब्राउज़रों (क्रोम, फ़ायरफ़ॉक्स, IE, एज, ...) में ठीक काम करता है:

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl' का उपयोग नई कैप्चा इमेज को रेंडर करने के लिए किया जाता है और इसे आपके मामले में अनदेखा किया जा सकता है। सबसे महत्वपूर्ण बिंदु नया URL उत्पन्न कर रहा है जो FF और IE को छवि को फिर से प्रस्तुत करने के लिए मजबूर करता है।

— कायवन तेहरानी
स्रोत

7

JQuery का उपयोग करके छवि स्रोत बदलें click()

तत्व:

    <img class="letstalk btn"  src="images/chatbuble.png" />

कोड:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

— अभिजीत पूजारी
स्रोत

7

यदि आप छवि को कई बार अपडेट करते हैं और यह CACHED हो जाता है और अपडेट नहीं होता है, तो अंत में एक यादृच्छिक स्ट्रिंग जोड़ें:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

— kintsukuroi
स्रोत

1

यह बहुत महत्वपूर्ण है, कम से कम मेरे लिए, अंत में यादृच्छिक स्ट्रिंग जोड़ने के लिए! टैंक!

— दिसंबर को मार्सेलो सदर

3

मुझे आज भी वही आश्चर्य है, मैंने इस तरह किया:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

— Anyone_ph
स्रोत

3

यह वेनिला (या बस शुद्ध) जावास्क्रिप्ट में किया जाने वाला एक गारंटीकृत तरीका है:

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

— रेमंड वचागा
स्रोत

1

बस इसके अलावा, इसे और भी छोटा बनाने के लिए:

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

— सजल लाजोस
स्रोत

-1

CSS के साथ छवि स्रोत को बदलने का कोई तरीका नहीं है।

केवल संभव तरीका जावास्क्रिप्ट या किसी भी जावास्क्रिप्ट पुस्तकालय का उपयोग कर रहा है जैसे jQuery ।

तर्क-

छवियां एक div के अंदर होती हैं और उस छवि के साथ classया नहीं होती हैं id।

इसलिए तर्क उन तत्वों का चयन करेगा divजहां छवियां स्थित हैं।

फिर सभी छवियों तत्वों को लूप के साथ चुनें और जावास्क्रिप्ट / jQuery के साथ छवि को बदलें ।

डेमो आउटपुट के साथ उदाहरण कोड-

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});

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

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>

स्निपेट का विस्तार करें

— अबरार जहीन
स्रोत