बूटस्ट्रैप मोडल

Question

के लिए क्लिक पर src value प्राप्त करना मैं JQuery के साथ एक छवि के src मान को प्राप्त करने के लिए इसे बूट करने के लिए बूटस्ट्रैप मोडल में पास करने का प्रयास कर रहा हूं। मेरी समस्या यह है कि मुझे यह src मान प्राप्त करने का तरीका नहीं है, मैंने कुछ जावास्क्रिप्ट बनाने की कोशिश की है लेकिन मुझे लगता है कि यह ठीक से काम नहीं करता है। कृपया कोई मदद करें।

यहाँ मेरी छवि है:

<img class="img-thumbnail" src="" data-def-dd="pic" id="pic" name="pic"> 

बूटस्ट्रैप मोडल:

<div id="img_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <img class="img-thumbnail" src="" data-onload="loadImage()" 
       data-def-dd="photo" id="photo_modal" name="photo"> 
     </div> 
    </div> 
</div> 

और अंत में जावास्क्रिप्ट:

var src = $(this).attr('src'); 
console.log(src); 

function loadImage(){ 
    $('#photo_modal').attr('src', src); 
} 

Answer 1

इस प्रयास करें, अनिवार्य रूप से आप का स्रोत प्राप्त करने की आवश्यकता img और इसे मोडल के "" में डालें;

सबसे पहले, आपको उस छवि को एक आईडी देना चाहिए जिसे आप स्रोत प्राप्त करना चाहते हैं ताकि इसे पुनर्प्राप्त करना आसान हो और यह भी सुनिश्चित हो सके कि 1 से अधिक छवि कक्षा से संबद्ध नहीं है।

<img id="img-thumbnail" class="img-thumbnail" src="" data-def-dd="pic" id="pic" name="pic"> 

दूसरा, समारोह के रूप में पालन समायोजित किया जाना चाहिए:

function loadImage(){ 
    // get the src of the image 
    var image_src = $("#img-thumbnail").attr('src'); 

    // assign it to the modal's body 
    $("#photo_modal").attr('src',image_src); 
} 

दूसरे, आप इस कोड को निष्पादित कर सकते हैं जहां पृष्ठ लोड:

विकल्प 1:

jQuery(document).ready(function($){ 
    loadImage(); 
}); 

विकल्प 2:

मोडल लोड होने पर आप फ़ंक्शन निष्पादित कर सकते हैं, वहां एक अंतराल हो सकता है क्योंकि इसे लोड करने की आवश्यकता है।

$('#img_modal').on('show.bs.modal', function (event) { 

    loadImage(); 
}); 

उम्मीद है कि इससे मदद मिलती है।

Answer 2

जब आप छवि #pic पर क्लिक करते हैं, तो इसका स्रोत छवि #photo_modal छवि के स्रोत के रूप में जोड़ा जाएगा।

$('#pic').on('click', function() { 
    $('#photo_modal').attr('src', $(this).attr('src')); 
}); 

Answer 3

आप कर सकते हैं यदि आप किसी भी चित्र का स्रोत प्राप्त करने के लिए की जरूरत है:

$('img').on('click', function(){ 
    var imageSource = $(this).attr('src') 
}) 

Answer 4

clicked-img-src द्वारा एक इनपुट hidden पहचान उदाहरण के लिए जोड़ें और img पर उपयोगकर्ता क्लिक संभाल करने click घटना को परिभाषित करने और मिल .attr('src') का उपयोग करके क्लिक छवि से src विशेषता तो इनपुट में स्टोर:

<input type="hidden" id='clicked-img-src'/> 

$('body').on('click', 'img', function(){ 
    var img_source = $(this).attr('src'); 
    $('#clicked-img-src').val(img_source); 
}) 

फिर जब loadImage() समारोह onload में कहा जाता है इनपुट से src मिलती है:

function loadImage(){ 
    $('#photo_modal').attr('src', $('#clicked-img-src').val()); 
} 

आशा इस मदद करता है।

Answer 5

यहां एक विचार है।JSFiddle

एचटीएमएल

<img class="thumbnail mini-thumb" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" /> 

<img class="thumbnail mini-thumb" src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" /> 

<div id="img_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <img class="img-thumbnail" src="" id="photo_modal" name="photo"> 
     </div> 
    </div> 
</div> 

• मैं इतना है कि आप अपने थंबनेल के लिए एक छोटी सी छवि जोड़ सकते हैं और एक दूसरे बड़े मोडल के लिए एक कर सकते हैं डेटा-bigpic इस्तेमाल किया।

• एक वर्ग jQuery समारोह की कार्यक्षमता

---

जावास्क्रिप्ट (jQuery)

$(document).ready(function(){ 
    loadPreviews(); 

}); 

function loadPreviews(){ 
    $(".mini-thumb").on('click', function(){ 
     console.log("Img url " + $(this).data('bigpic')); 
     $("#photo_modal").attr("src", $(this).data('bigpic')); 
     $("#img_modal").modal("show"); 
    }); 
} 

• समारोह डेटा-bigpic मूल्य हो जाता है पुन: उपयोग करने के लिए जोड़ा गया और इसे मोडल छवि में जोड़ता है।

--EDIT-- यहां एक ही fiddle है लेकिन छवि से स्रोत का उपयोग कर रहा है।

यह मेरी राय है लेकिन मेरा मानना ​​है कि यह AJAX का उपयोग करके मोडल सामग्री को फिर से लोड करना बेहतर हो सकता है। यदि आप ऐसा करते हैं, तो आपके पृष्ठ को केवल मिनी-अंगूठे लोड करने की आवश्यकता होगी। फिर डेटा-बिगिमेज वैल्यू का उपयोग करके आप अपने सर्वर को लौटाते डेटा को लोड करते हैं। यह आपकी मदद कर सकता है यदि आपके पास बहुत सारी छवियां हैं