jQuery सभी छवियों को एक विशिष्ट आकार

Question

से बड़े तत्व के भीतर प्राप्त करें, इसलिए मेरे पास एक छवि प्लेसहोल्डर है और मैं HTML से पहली छवि को DIV तत्व के भीतर लोड करना चाहता हूं जो 70px चौड़ाई या ऊंचाई से बड़ा है। फिर 70px से बड़ी अगली छवि लोड करने के लिए अगला और पिछला लिंक प्रदान करें।

मुझे पता है कि jQuery का अगला & पिछला चयनकर्ता है, लेकिन मुझे यकीन नहीं है कि मैं इसे अगले और पिछले लिंक के साथ कैसे जोड़ूंगा या छवि आकार निर्दिष्ट करूं।

Answer 1

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

var allImages = $('img', yourDivElement) 

var largeImages = allImages.filter(function(){ 
    return ($(this).width() > 70) || ($(this).height() > 70) 
}) 

next/prev प्राप्त करने के लिए कठिन नहीं है:

var nextElement = $(imgElement).nextAll().filter(function(){ 
    return ($(this).width() > 70) || ($(this).height() > 70) 
}).eq(0); 

पिछला नमूना overkill यदि आप हो सकता है बहुत सारी छवियां हैं, इसलिए आप इस तरह से लूप करना चाहते हैं:

var nextElement, nextSilblings = $(imgElement).nextAll(); 

for (var i=0;i<nextSilblings.length;i++){ 
    if (($(nextSilblings[i]).width() > 70) || ($(nextSilblings[i]).height() > 70)){ 
    nextElement = nextSilblings[i]; 
    break; 
    } 
} 

Answer 2

दो चरणों में यह करें:

1) छवियों कि मापदंड फिट को टैग

$('#targetDiv img').each(function() { 
     if($(this).height()>70) { 
     $(this).addClass('biggie') 
     } 
}) 

2) नेविगेशन

var myPos = 0; 

    $('#btnNext').click(function() { 
     //copy this image to the placeholder 
     $('#placeholder').attr('src', $('#targetDiv .biggie').eq(myPos).attr('src')); 
     myPos++; 
     if(myPos>$('#targetDiv .biggie').length) { 
      myPos = 0; 
     } 
    }) 

ऊपर हुक ... ऐसा पिछले बटन को बचाने के लिए , कमी को छोड़कर और शून्य तर्क बदलना।