पृष्ठभूमि छवि की उपस्थिति पर आग JQuery कोड? - jquery

    <script type="text/javascript">

jQuery(function ($) {

$.supersized({

// Functionality
slide_interval: 5000,       // Length between transitions
transition: 1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed: 700,      // Speed of transition

// Components
slide_links: "blank",   // Individual links for each slide (Options: false, "num", "name", "blank")
slides: [           // Slideshow Images
{ image: "http://farm9.staticflickr.com/8080/8339311971_cb6706842b_h.jpg", title: "Image Credit: Maria Kazvan", thumb: "http://farm9.staticflickr.com/8080/8339311971_cb6706842b_h.jpg", url: "http://farm9.staticflickr.com/8080/8339311971_cb6706842b_h.jpg" },
{ image: "http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg", title: "Image Credit: Maria Kazvan", thumb: "http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg", url: "http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg" },
{ image: "http://farm8.staticflickr.com/7055/6866255833_cf22b71843_b.jpg", title: "Image Credit: Maria Kazvan", thumb: "http://farm8.staticflickr.com/7055/6866255833_cf22b71843_b.jpg", url: "http://farm8.staticflickr.com/7055/6866255833_cf22b71843_b.jpg" },
{ image: "http://farm9.staticflickr.com/8487/8185988415_62ca8175e9_h.jpg", title: "Image Credit: Colin Wojno", thumb: "http://farm9.staticflickr.com/8487/8185988415_62ca8175e9_h.jpg", url: "http://farm9.staticflickr.com/8487/8185988415_62ca8175e9_h.jpg" },
{ image: "http://farm9.staticflickr.com/8079/8340357550_397f7e09e3_h.jpg", title: "Image Credit: Colin Wojno", thumb: "http://farm9.staticflickr.com/8079/8340357550_397f7e09e3_h.jpg", url: "http://farm9.staticflickr.com/8079/8340357550_397f7e09e3_h.jpg" },
{ image: "http://farm9.staticflickr.com/8490/8187033496_cf9587943c_h.jpg", title: "Image Credit: Colin Wojno", thumb: "http://farm9.staticflickr.com/8490/8187033496_cf9587943c_h.jpg", url: "http://farm9.staticflickr.com/8490/8187033496_cf9587943c_h.jpg" },
{ image: "http://farm7.staticflickr.com/6002/5923622568_46d8e065cc_b.jpg", title: "Image Credit: Brooke Shaden", thumb: "http://farm7.staticflickr.com/6002/5923622568_46d8e065cc_b.jpg", url: "http://farm7.staticflickr.com/6002/5923622568_46d8e065cc_b.jpg" },
{ image: "http://farm9.staticflickr.com/8502/8339293377_a1574a28be_h.jpg", title: "Image Credit: Brooke Shaden", thumb: "http://farm9.staticflickr.com/8502/8339293377_a1574a28be_h.jpg", url: "http://farm9.staticflickr.com/8502/8339293377_a1574a28be_h.jpg" },
{ image: "http://farm9.staticflickr.com/8497/8339319687_629c824dc1_h.jpg", title: "Image Credit: Brooke Shaden", thumb: "http://farm9.staticflickr.com/8497/8339319687_629c824dc1_h.jpg", url: "http://farm9.staticflickr.com/8497/8339319687_629c824dc1_h.jpg" }
]

});
});

</script>

<script>

$(document).ready(function () {
function loop(){
$("#p1").delay("1000").fadeIn("slow");
$("#p2").delay("1000").fadeIn("slow");
$("#p1").delay("3000").fadeOut("slow");
$("#p2").delay("3000").fadeOut("slow");
$("#p3").delay("6000").fadeIn("slow");
$("#p3").delay("3000").fadeOut("slow");
$("#p4").delay("12000").fadeIn("slow");
$("#p4").delay("3000").fadeOut("slow");
$("#p5").delay("18000").fadeIn("slow");
$("#p5").delay("3000").fadeOut("slow");
$("#p6").delay("24000").fadeIn("slow");
$("#p6").delay("3000").fadeOut("slow");
$("#p7").delay("30000").fadeIn("slow");
$("#p7").delay("3000").fadeOut("slow");
$("#p8").delay("35000").fadeIn("slow");
$("#p8").delay("3000").fadeOut("slow");
$("#p9").delay("41000").fadeIn("slow");
$("#p9").delay("3000").fadeOut("slow");
$("#p10").delay("46000").fadeIn("slow");
$("#p10").delay("4084").fadeOut("slow",loop);
}
loop();
});


</script>

ठीक दोस्तों, यहाँ समस्या है।मुझे एक पूर्ण पृष्ठभूमि स्लाइड शो मिला है जिसे मैं स्क्रीन पर दिखाई देने वाले कुछ पाठ के साथ सिंक करना चाहता हूं। जैसा कि आप देख सकते हैं, यह टेक्स्ट "पी" fadeIns द्वारा दर्शाया गया है। मेरी समस्या यह है कि यह सुनिश्चित करने के लिए मेरी वर्तमान विधि पाठ हमेशा सही पृष्ठभूमि स्लाइड पर दिखाई देता है, केवल आखिरी छवि में देरी करने के लिए है, जो आदर्श से कम है क्योंकि यह सिंक्रनाइज़ेशन से बाहर है। मैं किसी को बेहतर तरीके से बताता हूं कि यह किया जा सकता है: DI सोच रहा था कि हम बता सकते हैं जैसे ही पृष्ठभूमि पर पहली पृष्ठभूमि छवि दिखाई देती है, सक्रिय करने के लिए fadeIn फ़ंक्शन, लेकिन यह सुनिश्चित नहीं है कि यह कैसे करें।

उत्तर:

जवाब के लिए 0 № 1

आदर्श रूप से आपको थीम के फ़ंक्शन के अंदर टेक्स्ट को फीका करने के लिए कोड रखना चाहिए theme.beforeAnimation (), यदि आप डिफ़ॉल्ट थीम (शटर) का उपयोग कर रहे हैं तो फ़ाइल supersized.shutter.js को जांचें और "पहले एनीमेशन: फ़ंक्शन (दिशा) {" के लिए खोजें।

एक और (बदसूरत) तरीका हो सकता है:

  • स्लाइड शो को बंद करें
  • आप जिस पाठ का उपयोग करना चाहते हैं उसके साथ "मैन्युअल रूप से" स्लाइड्स को स्थानांतरित करने के लिए एपीआई का उपयोग करें api.nextslide ()

संपादित करें: सबसे पहले सुनिश्चित करें कि आप टेम्पलेट संस्करण का उपयोग कर रहे हैं जो छोटा नहीं है: आपके एचटीएमएल के सिर में आपको यह मिल जाएगा:

<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>

से बदलो:

<script type="text/javascript" src="theme/supersized.shutter.js"></script>

फिर supersized.shutter.js फ़ाइल को संपादित करें और पहले एनीमेशन () फ़ंक्शन (लाइन 23 9) के अंदर फॉलो लाइन जोड़ें

$("[id^="p"]").fadeOut();
$("#p" + (vars.current_slide + 1)).delay(500).fadeIn("slow");

क्योंकि मुझे नहीं पता कि आपका एचटीएमएल कैसा है, मैं आईडी के साथ सभी तत्वों को छुपा रहा हूं जो "पी" से शुरू होते हैं, यदि आप इस चयनकर्ता $ ("[id ^ =" p "]") में सुधार करते हैं तो बेहतर होगा। FadeOut (); । बस इतना ही।

आशा करता हूँ की ये काम करेगा।


संबंधित सवाल
सबसे लोकप्रिय