2012-04-28 15 views
7

मेरे पास एक पृष्ठ है जिसमें पंजीकृत उपयोगकर्ताओं का विवरण शामिल है। प्रत्येक HTML तालिका में 80-90 उपयोगकर्ता शामिल हैं। प्रत्येक उपयोगकर्ता के लिए एक $ उपयोगकर्ता नाम चर है। मैं आमतौर पर नीचे दिए गए कोड की तरह एक तालिका में अपनी तस्वीरों को दिखाता हूं।छवियों के लिए ट्विटर बूटस्ट्रैप-मोडल

print "<a href=\"small-avatar-$username.jpg\" target=\"_blank\"> 
<img src=\"big-avatar-$username.jpg\"> 
</a>"; 

लेकिन उपयोगकर्ता एक नए टैब में छवियां खोल सकते हैं। मैं आसानी से बड़े अवतार दिखाना चाहता हूं। मेरी पहली पसंद लाइटबॉक्स-jquery थी। लेकिन क्योंकि मैं अपनी साइट में ट्विटर-बूटस्ट्रैप का उपयोग करता हूं, इसलिए मैंने डिफ़ॉल्ट बूटस्ट्रैप और jquery सुविधाओं का उपयोग करने का निर्णय लिया।

मैंने देखा कि "बूटस्ट्रैप-मोडल" है। जब उपयोगकर्ता लिंक पर क्लिक करता है, तो मैं बड़ी तस्वीर से ज्यादा कुछ दिखाने की योजना नहीं बनाता।

print "<a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" > 
     <img src=\"small-avatar-$username.jpg\" ></a>"; 
print '</td>'; 

:

मैं इस कोशिश की।

print "<div id=\"$username\" class=\"modal\">"; 
     <img src=\"big-avatar-$username.jpg\"> 
print "</div>"; 

<script type="text/javascript" id="js"> 
     $('#username').modal(); 
</script> 

मैं अपने पृष्ठ के लिए हर उपयोगकर्ता HTML फ़ाइल बड़ा कर देगा के लिए $('#username').modal();
डालने लगता है।

लेकिन फिर मैंने इस तरह के एंकर के वर्ग नाम की कोशिश की: $('.img-modal').modal();
लेकिन यह काम नहीं किया।

इस स्थिति में आप क्या सलाह देंगे?

उत्तर

17

मैं तुम्हें अपने <a> टैग में एक HTML5 Custom Data Attributes उपयोग करने के लिए उपयोगकर्ता नाम की पहचान करने और अपने img-modal वर्ग रखने के लिए सिफारिश करेंगे।

"<a href="#myModal" data-username='".$username."' class="img-modal">... 

उत्प्रेरक कॉल .img मोडल पर क्लिक करने पर ही मोडल करने के लिए (आप = डेटा-टॉगल की जरूरत नहीं है "मोडल")

$('.img-modal').click(function(event) { 

आप द्वारा उपयोगकर्ता नाम का मूल्य प्राप्त कर सकते हैं

var username = $(this).attr('data-username') 

का उपयोग कर जब से तुम उपयोगकर्ता नाम है आप की तरह कुछ के साथ अपने अद्वितीय मोडल में अपने <img> टैग की src संपत्ति बदल सकते हैं।

$("#img-in-modal").attr("src","big-avatar-" + username + ".jpg") 

और खोलने के अपने मॉडल

$('#myModal').modal('show') 

और अंत में, यकीन है कि बूटस्ट्रैप-modal.js या boostrap.js शामिल किया गया है।

+11

डेटा तक पहुंचने का एक विकल्प- * गुण '$ (यह) .डेटा (' उपयोगकर्ता नाम ') होगा। –

संबंधित मुद्दे