1. घर
  2. सवाल और जवाब
  3. प्लगइन के बिना Jquery क्रॉसफ़ेड

प्लगइन के बिना Jquery क्रॉसफ़ेड

2011-04-14 16 views
5

क्रॉसफ़ेड्स और सामान करने के लिए प्लगइन को इंगित करने वाली बहुत सारी चीज़ें, लेकिन कोई भी वास्तव में मेरी ज़रूरतों को पूरा नहीं करता है। एक बड़ी छवि, एक div 3 या चार छोटे थंबनेलप्लगइन के बिना Jquery क्रॉसफ़ेड

जब एक थंबनेल क्लिक किया जाता है यह src में पढ़ता है और बदलता है नई छवि के लिए मुख्य छवियों स्रोत युक्त

मैं अपने पन्ने पर 2 बातें की है।

मैं इसे में जब अन्य फ़ेड आउट एक फीका करने के लिए (इसलिए यह नई छवि में fading से पहले कुछ भी नहीं करने के लिए जाना नहीं है) कैसे मिलता है

heres मेरी कोड:

$('.TnImage').live('click', function() { 
     var newImage = $(this).attr('src'); 
     var oldImage = $('.mainImage').attr('src') 
     $('.mainImage').fadeOut('slow'); 
     $('.mainImage').attr('src', newImage).fadeIn('slow'); 
    });

बस के लिए स्पष्टीकरण मैं मौजूदा प्लग-इन का उपयोग क्यों नहीं करना चाहता, यह है कि आपको हाथों से पहले लोड होने वाली छवियों की सूची जानने की आवश्यकता होती है, थंबनेल छवियों को php के माध्यम से एक MySQL डेटाबेस से पुनर्प्राप्त किया जाता है, और मुझे इसके बजाय नहीं करना होगा थंबनेल के लिए 2 सूचियां बनाएं और मुख्य छवियों के लिए 1 को फिर से छुपाएं, लेकिन छवि के साथ एक मुख्य div जिसमें मैं दिखाना चाहता हूं।

मैंने एक चक्र प्लगइन देखा है, लेकिन मैं इसका उपयोग नहीं करना चाहता हूं, मुझे पता है कि लोग पहिया को पुनर्निर्मित करने के बारे में नहीं चलते हैं, लेकिन अगर मैं सामान करने के लिए प्लगइन का उपयोग करता रहता हूं, तो मैं कभी नहीं जा रहा हूं jquery कैसे काम करता है के पागल और बोल्ट सीखो। मैं उत्कृष्ट IMAGESWITCH का उपयोग करता था लेकिन jquery 1.4.3 के साथ काम नहीं करता है, और मुझे इस संस्करण को इसके एचटीएमएल डेटा() के लिए चाहिए और इसलिए पहले इस पर रिलायंस करके, अब मैं अटक गया हूं इसलिए मैंने ऐसा करने का तरीका क्यों पूछा है प्लगइन्स का उपयोग किए बिना।

स्रोत

2011-04-14 Dizzy Bryan High

+0

मैं अपने जवाब संपादित किया है, एक बार देख ले है। –

उत्तर

2

jQuery चक्र ऐसा करेंगे, लेकिन यह एक प्लगइन है।

प्लगइन के बिना ऐसा करने के लिए, आप छवियों को लोड कर सकते हैं और फिर पहले को छुपा सकते हैं। जब एक थंबनेल क्लिक किया जाता है, तो आप चयनित छवि को फीका करते हैं। मैं इसे करने के लिए आसान बनाने के लिए पहली छवि में एक सीएसएस वर्ग जोड़ना होगा। मैं उन्हें संदर्भित करने के लिए प्रत्येक छवि को एक आईडी भी दूंगा। एक दूसरे के शीर्ष पर रखने के लिए सीएसएस का प्रयोग करें। आपके थंबनेल छवि टैग में, आपको बड़ी छवि के संदर्भ में कुछ प्रकार की संदर्भ की आवश्यकता होगी।

$('.TnImage').live('click', function() { 
    $('.selected').fadeOut(500, function(){ 
     $(this).removeClass('selected'); 
    }); 
    $('#'+$(this).attr('imgidref')).delay(250).fadeIn('slow').addClass('selected'); 
});

मुझे पता है कि यह एक कच्चा उदाहरण है, लेकिन इसमें बुनियादी सिद्धांतों को शामिल करना चाहिए।

स्रोत

2011-04-14 14:34:10

+0

आपके उत्तर के लिए धन्यवाद, मैं पेज पर कई छिपे हुए divs को आजमाने और टालने की कोशिश करना चाहता हूं, असल में मैं सिर्फ छवि के साथ मुख्य div चाहता हूं और सामग्री को स्वैप कर दूंगा, अधिकतम 2 divs जहां मैं नीचे दिए गए एक में नया भार लोड कर सकता हूं , फिर शीर्ष div को फीका करें, शीर्ष divs स्रोत को नई छवि में बदलें और इसे अगले थंबनेल के लिए तैयार में वापस फीका करें –

+0

इस कोड को बेहतर बनाने के कुछ तरीके: किसी भी jQuery ऑब्जेक्ट को कैश करें जिसे आप एक से अधिक बार उपयोग करना चाहते हैं; फ़ंक्शन को 'सेटटाइमआउट' कॉलबैक में कॉल करें; 'setTimeout' का उपयोग न करें, इसके बजाय '.delay()' का उपयोग करें। –

+0

सुधार के लिए धन्यवाद, मैट! :) –

2

के बाद से वहाँ एक प्लगइन के बिना crossfading, यहाँ के बारे में एक जवाब नहीं किया गया है समाधान है कि मैं के साथ आया है:

<!DOCTYPE html> 
<html> 
<head> 

<script type="application/javascript" src="jquery-1.9.1.js"></script> 
<script type="application/javascript" src="jquery-ui-1.10.2.custom.min.js"></script> 

<link type="text/css" rel="stylesheet" href="jquery-ui-1.10.2.custom.min.css" /> 

<title></title> 

<script> 
var list = new Array(); 
var increment = 0; 

$(function(){ 
$.when(
    $("#image_preload img").each(function(i, e){ 
     image = $(this).attr('src'); 
     list.push(image); 
    }) 
).then(function(){ 
    rotate() 
}); 
}); 

function rotate(){ 
$("#deactive").fadeOut(1000, function(){ 
}); 

$("#active").attr('src', list[increment]); 

setTimeout(function(){ 
    increment++; 

    if(increment == list.length){ 
     increment = 0; 
    } 

    $("#deactive").attr('src', list[increment]); 

    $("#deactive").fadeIn(1000, function(){ 
     rotate(); 
    }); 
}, 5000); 
} 
</script> 

<style> 
html, body { 
margin: 0px; 
padding: 0px; 
} 

#display { 
margin: 0px auto; 
position: relative; 
text-align: center; 
width: 220; 
} 

#display img { 
left: 0px; 
margin: 0px auto; 
position: absolute; 
top: 0px; 
} 

#image_preload { 
display: none; 
} 
</style> 

</head> 
<body> 

<div id="display"> 
<img src="" width="200" height="200" alt="" id="active" /> 
<img src="" width="200" height="200" alt="" id="deactive" /> 
</div> 

<div id="image_preload"> 
<img src="1.png" width="200" height="200" alt="" /> 
<img src="2.jpg" width="200" height="200" alt="" /> 
<img src="3.png" width="200" height="200" alt="" /> 
<img src="4.jpg" width="200" height="200" alt="" /> 
<img src="5.jpg" width="200" height="200" alt="" /> 
</div> 

</body> 
</html>

दुनिया में सबसे अच्छा नहीं हो सकता है, लेकिन यह आसान है और यह काम करता ।

और यहाँ जे एस फिडल उदाहरण http://jsfiddle.net/DYYCy/

स्रोत

2013-08-08 18:28:48

+1

यह वास्तव में सवाल का जवाब देता है। निश्चित नहीं है कि इसे वोट क्यों प्राप्त नहीं हुए हैं या उत्तर के रूप में चिह्नित किया गया था। यह कुछ है जो मैं यहां से छीन दूंगा। – Err

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

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