javascript - JQuery का उपयोग कर छवि स्रोत बदल रहा है




image (7)

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

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

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

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


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

<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>

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

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

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

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

यह चाल मेरे लिए बहुत उपयोगी है और मुझे आशा है कि यह दूसरे के लिए उपयोगी होगा।


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

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

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


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

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

});

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


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

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

मैं आपको दिखाऊंगा कि छवि src कैसे बदलें, ताकि जब आप किसी छवि पर क्लिक करते हैं तो यह आपके HTML में मौजूद सभी छवियों के माध्यम से घूमता है (विशेष रूप से आपके d1 आईडी और c1 कक्षा में) ... चाहे आपके पास 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();

    });
});

विभाजन

  1. छवियों वाले लिंक की एक प्रति बनाएं (नोट: आप अतिरिक्त कार्यक्षमता के लिए लिंक की href विशेषता का भी उपयोग कर सकते हैं ... उदाहरण के लिए प्रत्येक छवि के नीचे कार्य लिंक प्रदर्शित करें ):

        var $images = $("#d1 > .c1 > a").clone();  ;
    
  2. जांचें कि HTML में कितनी छवियां थीं और यह देखने के लिए एक चर बनाएं कि कौन सी छवि दिखायी जा रही है:

    var $length = $images.length;
    var $imgShow = 0;
    
  3. दस्तावेज़ के HTML को संशोधित करें ताकि केवल पहली छवि दिखाई दे। अन्य सभी छवियों को हटाएं।

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
    
  4. जब छवि लिंक क्लिक किया जाता है तो इसे संभालने के लिए एक फ़ंक्शन बाध्य करें।

        $("#d1 > .c1 > a").click(function(event) { 
            $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
            event.preventDefault();
        });
    

    उपर्युक्त कोड का दिल छवियों वाले jQuery ऑब्जेक्ट के माध्यम से चक्र के लिए ++$imgShow % $length का उपयोग कर रहा है। ++$imgShow % $length पहले हमारे काउंटर को एक से बढ़ाता है, फिर यह उस संख्या को ++$imgShow % $length करता है जिसमें कितनी छवियां हैं। यह परिणामी इंडेक्स साइकलिंग को 0 से length-1 रखेगा, जो $images ऑब्जेक्ट के सूचकांक हैं। इसका मतलब यह है कि यह कोड 2, 3, 5, 10, या 100 छवियों के साथ काम करेगा ... प्रत्येक छवि के माध्यम से साइकिल चलाना और अंतिम छवि पर पहुंचने पर पहली छवि पर पुनरारंभ करना।

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

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


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

और यहां छवियों के चारों ओर एंकर टैग से href को शामिल करने का तरीका बताया गया है:
जेएसएफल्ड उदाहरण


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

केवल संभावित तरीका Javascript या jQuery जैसी किसी भी Javascript लाइब्रेरी का उपयोग कर रहा Javascript

तर्क-

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

तो तर्क div अंदर तत्वों का चयन करेगा जहां छवियां स्थित हैं।

फिर लूप के साथ सभी छवियों के तत्वों का चयन करें और Javascript / 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>





image