इमेज एन्लार्जमेंट प्लगइनचे पुनरावलोकन केले गेले आहे झूम, जे वास्तविक भिंगाची नक्कल करते. काही प्रकरणांमध्ये, त्याचा वापर गैरसोयीचा असतो, कारण भिंग मुख्य चित्राला ओव्हरलॅप करते आणि इच्छित क्षेत्रावर लक्ष केंद्रित करणे कठीण करते. मॅग्निफिकेशन पॉइंटच्या अचूक स्थितीसाठी, तुम्ही भिंगाची दुसरी आवृत्ती वापरू शकता - jLoupe. हे प्लगइन विनामूल्य स्क्रिप्ट लायब्ररीसाठी आहे jQueryवेब डिझायनर ख्रिस यूफर यांनी डिझाइन केलेले. यात बरीच सेटिंग्ज आहेत आणि आपल्याला पॉइंटर कर्सरच्या पुढे प्रतिमेचा मोठा तुकडा प्रदर्शित करून भिंगाची नक्कल करणारे सुंदर प्रभाव तयार करण्याची परवानगी देते.
प्लगइनसाठी तीन पर्याय jLoupeआकृतीत दाखवले आहे. डावीकडे - ड्रॉप-आकाराचे भिंग आणि पूर्ण-स्केल इमेज आउटपुटची लिंक आहे, मध्यभागी - दुव्याशिवाय आयताकृती भिंग, उजवीकडे - वर्तुळाच्या स्वरूपात एक भिंग. दुर्दैवाने, राउंडिंग, तसेच पूर्वी चर्चा केलेल्या झूमी मॅग्निफायर प्लगइनमध्ये, IE6 - IE8 ब्राउझरमध्ये कार्य करत नाही. म्हणून, त्यांच्यामध्ये भिंग नेहमी आयताकृती असते आणि योग्य आवृत्ती, सर्वसाधारणपणे, एक संपूर्ण अपमान आहे.
jLoupe प्लगइन उदाहरणे
मॅग्निफायर प्लगइन स्थापित करत आहे jLoupe
प्रथम, संग्रहण डाउनलोड करा. मग, नेहमीप्रमाणे, गोंधळ टाळण्यासाठी, आम्ही साइटवर एक नवीन फोल्डर तयार करू, त्याचे नाव देऊ jloupe, आणि त्यात डाउनलोड केलेले संग्रहण अनपॅक करा. आमच्याकडे तीन फायली असतील:
jquery-1.8.3.min.js, jquery.jloupe.jsआणि गोल भिंगासाठी सहायक प्रतिमा loupe-trans.png.
प्लगइन कार्य करण्यासाठी, प्रतिमेसाठी सेट करणे पुरेसे आहे class="jloupe", आणि लूप आउटपुट स्वतः अनेक प्रकारे आयोजित केले जाऊ शकते:
1.
दोन प्रतिमा तयार करा - मुख्य (image.jpg) आणि मोठे (image_big.jpg). पृष्ठावर ठेवलेल्या प्रतिमेच्या टॅगमध्ये, विशेषता वापरून विस्तारित आवृत्तीचा मार्ग निर्दिष्ट करा डेटा-मूळ:
.
2.
फक्त एक मोठी प्रतिमा वापरा आणि ती ब्राउझरमध्ये कमी करण्यासाठी, विशेषता वापरून पृष्ठावर इच्छित परिमाण सेट करा. रुंदीआणि उंची. फक्त लक्षात ठेवा की ब्राउझरद्वारे केलेले स्केलिंग सहसा प्रतिमेची गुणवत्ता खराब करते:
.
3.
तुम्हाला एखादी मोठी प्रतिमा किंवा दुसर्‍या ऑब्जेक्टला उघडण्यासाठी लिंक देण्याची आवश्यकता असल्यास, खालील फॉर्म वापरा:
.
या प्लगइन इंस्टॉलेशनवर jLoupeपूर्ण झाले, आणि आपण ब्राउझरमधील प्रतिमेसह पृष्ठ उघडून त्याचे कार्य पाहू शकता.
महत्वाची टीप: तुमची साइट एकाधिक प्लगइन वापरत असल्यास jQuery, jquery.js फाईल (शक्यतो नवीनतम आवृत्ती) रूट फोल्डरमध्ये स्थानांतरित करणे अधिक सोयीस्कर आहे जेणेकरून ती अनेक वेळा डाउनलोड होऊ नये. या प्रकरणात, त्यातील संदर्भ ओळ सर्व प्लगइनसाठी समान दिसेल. विशेषतः, आमच्या उदाहरणासाठी हे असे दिसून येते:
.
एका पृष्ठावर अनेक भिन्न आवृत्त्या वापरण्याची शिफारस केलेली नाही jQueryत्यामुळे ते एकमेकांशी भांडत नाहीत. त्याच वेळी, स्थापित आवृत्तीसह प्लगइन तपासण्याचे सुनिश्चित करा. jQuery, कारण सर्व आवृत्त्या अदलाबदल करण्यायोग्य नाहीत.
प्लगइन पर्याय सेट करणे jLoupe
मूलभूत भिंग सेटिंग्ज jLoupeफाइलमध्ये सेट केले आहेत jquery.jloupe.js. ते बदलण्यासाठी, ते कोणत्याही HTML संपादक किंवा नोटपॅडमध्ये उघडा. फाइलच्या अगदी सुरुवातीस, उपलब्ध सेटिंग्जसह ओळी आहेत ज्या बदलल्या जाऊ शकतात:
| मालमत्ता | डीफॉल्ट सेटिंग | भिंग सेटिंगचे वर्णन |
|---|---|---|
| रुंदी | 200 | रुंदी |
| उंची | 200 | उंची |
| समास | 6 | भिंगाभोवती मार्जिन |
| cursorOffsetX | 10 | कर्सरपासून क्षैतिज अंतर |
| cursorOffsetY | 10 | कर्सर पासून अनुलंब अंतर |
| रंग | खोटे | रंगांना परवानगी द्या |
| सीमा रंग | "#999" | सीमा रंग |
| पार्श्वभूमी रंग | "#ddd" | पार्श्वभूमी रंग |
| त्रिज्याLT | 0 | भिंगाच्या वरच्या डावीकडील गोलाकार त्रिज्या |
| त्रिज्याLB | 100 | भिंगाच्या तळाशी डावीकडे गोलाकार त्रिज्या |
| radiusRT | 100 | भिंगाच्या उजव्या वरच्या गोलाकार त्रिज्या |
| त्रिज्याRB | 100 | भिंगाची उजवी तळाशी गोलाकार त्रिज्या |
| प्रतिमा | खोटे | भिंगासाठी बाह्य प्रतिमेचा पत्ता (इमेज url) - भिंगाचा प्रकार निर्धारित करते. योग्य उदाहरणात, ही वर्तुळाची प्रतिमा आहे loupe-trans.png |
| पुनरावृत्ती | खोटे | पार्श्वभूमी प्रतिमा पुन्हा करा |
| कोमेजणे | खरे | भिंग आउटपुट करताना मंदपणा वापरा |
| ठळक होत जाणे | खरे | उघडण्याच्या वेळी गडद होण्याची वेळ (ms) |
| फेडआउट | खरे | बंद होण्याची वेळ (ms) |
उदाहरणार्थ, लेखाच्या शीर्षस्थानी (डावीकडे) दर्शविलेले अश्रू भिंग डीफॉल्ट सेटिंग्ज वापरते, तर उजवीकडील चित्रात खालील गोष्टी आहेत:
त्रिज्या एलटी: 100
समास: १२
सीमा रंग: असत्य
पार्श्वभूमी रंग:"#ffffee",
प्रतिमा: "jloupe/loupe-trans.png"
आयताकृती भिंगाच्या काचेच्या प्रकारासाठी (मध्यभागी), कोणत्याही बाह्य प्रतिमेची आवश्यकता नाही (इमेज: असत्य):
त्रिज्याLT: 0
त्रिज्याआरटी: १०
त्रिज्याRB: 0
त्रिज्या एलबी: १०
रुंदी: 300
उंची: 150
सीमा रंग: "#f2730b",
पार्श्वभूमी रंग: "#000",
fade: खोटे
प्रतिमा: खोटे
प्रतिमा विस्तृत करण्यासाठी, तसेच साइटवर फोटो गॅलरी, प्रतिमा कॅरोसेल आणि स्लाइड शो तयार करण्यासाठी इतर प्रोग्रामसाठी, विभाग पहा आणि "
झूम प्लगइनप्रतिमेवर भिंग फिरवण्याचा एक सुंदर प्रभाव लागू करतो. सर्व काही उच्च स्तरावर केले जाते - भिंग "जिवंत" दिसते.
यामध्ये सत्यापित:
- IE 6-8
- फायरफॉक्स 4
- ऑपेरा 9.5-10
- सफारी ४
- क्रोम
काय डाउनलोड करायचे?
- jquery लायब्ररी डाउनलोड करा किंवा .
- (10.99 Kb) — प्लगइन किंवा त्याचे (4.49 Kb).
- (2.87 Kb) भिंगाच्या शैली.
जलद सुरुवात
लायब्ररी आणि स्टाइलशीट समाविष्ट करा:
एचटीएमएल सोपे आणि अंतर्ज्ञानी आहे - एक लहान चित्र एका मोठ्या दुव्यासह गुंडाळलेले आहे. प्रारंभ करण्याच्या सोयीसाठी, लिंकला झूम वर्ग नियुक्त केला जाईल.
आम्ही प्लगइन सुरू करतो:
प्रत्यक्षात एवढेच आहे.
आणि आता अधिक तपशीलवार
प्रारंभ करताना, आपण खालील पॅरामीटर्स पास करू शकता:
zoomy() पॅरामीटर्स
कार्यक्रम
वापरकर्त्याच्या क्रियांवर अवलंबून तुम्ही भिंग चालू करण्यासाठी सेट करू शकता. चार कार्यक्रम उपलब्ध आहेत:
पॅरामीटर्ससह इनिशियलायझेशनची उदाहरणे
भिंग सेट करा. आम्ही आकार सेट करतो, शिलालेख Russify करतो, मोठ्या चित्राच्या पत्त्यासह विशेषता बदलतो.
1. jQuery भिंग प्लगइन
चौरस क्षेत्रफळ वाढवणे.
2. मेघ झूम
हे प्लग-इन कोणत्याही प्रकारे व्यावसायिक प्रतिमा स्केलिंग स्क्रिप्टपेक्षा निकृष्ट नाही, उदाहरणार्थ, मॅजिक झूम. सर्वात लोकप्रिय ब्राउझरसह अनेक भिन्न वैशिष्ट्ये आणि सुसंगतता. मी डेमो पृष्ठावर ही स्क्रिप्ट क्रियाशीलपणे पाहण्याची शिफारस करतो. मला वाटते की तो तुम्हाला उदासीन ठेवणार नाही.
3. माऊसखालील मजकूर किंवा प्रतिमा क्षेत्र वाढवण्यासाठी jQuery प्लगइन
तुलनेने लवचिक स्क्रिप्ट. CSS सह प्रदर्शन क्षेत्रे सहज सानुकूल करता येतात. प्लगइन बगलाखालील लहान क्षेत्र मोठे करते. सर्व सामग्रीच्या मोठ्या आणि लहान आकारात स्विच करणे डबल-क्लिक करून केले जाते
4. jQuery इमेज एन्लार्जमेंट प्लगइन
आयफोन स्क्रीनच्या स्वरूपात बनविलेले.
5. MooTools प्लगइन "झूमर"
प्रतिमेच्या तपशीलवार दृश्यासाठी, फक्त त्यावर माउस कर्सर हलवा.
6. झूम प्रभावासह jQuery पोर्टफोलिओ
क्लाउड झूम आणि फॅन्सीबॉक्स: दोन jQuery प्लगइन जोडून तयार केलेला एक मनोरंजक पोर्टफोलिओ अंमलबजावणी. जेव्हा तुम्ही थंबनेलवर माउस कर्सर हलवता, तेव्हा कर्सरच्या खाली असलेल्या क्षेत्राची एक मोठी प्रत दिसते. थंबनेलवर क्लिक केल्याने फॅन्सीबॉक्स गॅलरी उघडते, जी तुम्हाला त्या पोर्टफोलिओ प्रकल्पासाठी अनेक पूर्ण आकाराच्या प्रतिमा पाहण्याची परवानगी देते.
7. jQuery प्लगइन "इझी इमेज झूम"
कर्सरच्या खाली असलेल्या क्षेत्रावर झूम वाढवा.
8. jQuery प्लगइन "झूमी"
प्रतिमेचा भाग मोठे करण्यासाठी भिंगाचा काच प्रभाव.
9. jQuery प्लगइन "BeZoom"
10.jQuery इमेजलेन्स प्लगइन
प्रतिमेवर माउस फिरवताना भिंगाचा प्रभाव. jQuery सह लागू केले.
11. jQuery प्लगइन "भिंग"
होव्हरवर झूम इन करण्याचा प्रभाव.
12. ऑनलाइन स्टोअर "jqZoom" साठी इमेज बजर
ऑनलाइन स्टोअरमध्ये वस्तूंचे तपशीलवार दृश्य अंमलात आणण्यासाठी वापरले जाऊ शकते.
13. मर्यादित क्षेत्रात मोठी प्रतिमा पाहणे
jQuery प्लगइन काही मर्यादित ब्लॉकमध्ये मोठी प्रतिमा पाहण्याची अंमलबजावणी करणे शक्य करते. या प्रकरणात, लघुप्रतिमा वर आयत हलवून नेव्हिगेशन केले जाईल.
14. AJAX झूम प्लगइन
AJAX-zoom हे अनेक वैशिष्ट्यांसह अतिशय कार्यक्षम गॅलरी प्लगइन आहे. प्लगइन jQuery आणि PHP द्वारे समर्थित आहे आणि त्यात 250 पेक्षा जास्त प्रदर्शन पर्याय आहेत. त्याच्या कार्यक्षमतेव्यतिरिक्त, हे एक अतिशय लवचिक प्लगइन आहे जे कोणत्याही साइटवर एकत्रित केले जाऊ शकते.
या ट्युटोरियलमध्ये, आपण केवळ jQuery आणि CSS वापरून स्थिर प्रतिमेसाठी भिंगाचा प्रभाव तयार करण्याकडे लक्ष देऊ.
पायरी 1XHTML
प्रभाव मिळविण्यासाठी मार्कअप अगदी सोपे आहे. आम्ही फक्त काही वापरतो divआणि प्रतिमा.
demo.html
div#iphone आयफोन फ्रेम प्रदर्शित करतो. आत स्थित आहे divपृष्ठाच्या स्क्रीनशॉटसह #webpage. स्क्रीनशॉट त्याच्या अर्ध्या वास्तविक आकारात प्रदर्शित केला जातो, म्हणून आम्ही समान प्रतिमा लहान आवृत्तीसाठी (आयफोन फ्रेममध्ये दर्शविलेले) आणि मोठ्या आवृत्तीसाठी वापरतो, जी गोल विंडोमध्ये दर्शविली जाते.
तसेच आहे div#रेटिना CSS3 वापरून गोलाकार सेट करते. हे पार्श्वभूमी म्हणून पृष्ठ स्क्रीनशॉटची एक मोठी आवृत्ती प्रदर्शित करते आणि माउस कर्सर हलवताना हलते.
पायरी 2: CSS
साठी शैली सेट करा div#iphone, #webpage आणि #retina, ज्यामुळे अपेक्षित प्रभाव शक्य होईल.
style.css
#iphone( /* iphone div बॉर्डर */ width:750px; height:400px; background:url("img/iphone_4G.png") नो-रिपीट सेंटर सेंटर; स्थिती:सापेक्ष; ) #webpage( /* चा स्क्रीनशॉट आहे पृष्ठ * / रुंदी:499px; उंची:283px; स्थिती: परिपूर्ण; शीर्ष: 50%; डावीकडे: 50%; समास:-141px 0 0 -249px; ) #रेटिना ( /* भिंगाचा प्रभाव */ background:url( "img/webpage .png") नो-रिपीट सेंटर सेंटर व्हाइट; बॉर्डर: 2px सॉलिड व्हाइट; /* पोझिशनिंग निरपेक्ष आहे म्हणून आम्ही ते हलवू शकतो */ स्थिती: absolute; height:180px; width:180px; /* बाय डीफॉल्ट लपवा */ डिस्प्ले : none; /* रिक्त कर्सर, डीफॉल्ट फॉलबॅक लक्षात घ्या */ कर्सर:url("img/blank.cur"), डीफॉल्ट; /* CSS3 सावली */ -moz-box-shadow:0 0 5px # 777, 0 0 10px #aaa इनसेट; -webkit-box-shadow:0 0 5px #777; box-shadow:0 0 5px #777, 0 0 10px #aaa इनसेट; /* CSS3 गोलाकार कोपरे */ -moz-बॉर्डर -त्रिज्या: 90px; -webkit-border-radius:90px; सीमा-त्रिज्या:90px; ) #retina.chrome( cursor:url("img/blank_google_chrome.cur"), डीफॉल्ट; ) #main( /* O main div */ margin:40px auto; स्थिती: नातेवाईक; रुंदी:750px; )निरपेक्ष स्थिती निर्दिष्ट करणे divपृष्ठावर, आम्ही अनुलंब आणि क्षैतिज केंद्रीकरण तंत्र वापरू शकतो, जे प्रभावीपणे iphone फ्रेमच्या मध्यभागी स्क्रीनशॉट ठेवते.
div#retina ला देखील निरपेक्ष पोझिशनिंग मिळते, त्यामुळे फक्त वरच्या आणि डावीकडून ऑफसेट देऊन ते jQuery भागामध्ये हलवणे शक्य आहे. द divपार्श्वभूमी म्हणून पृष्ठाचा स्क्रीनशॉट देखील आहे (त्याच्या मूळ आकारात). हलताना पार्श्वभूमी ऑफसेट divत्यामागील स्क्रीनशॉटच्या छोट्या तुकड्यावर झूम इन करण्याचा भ्रम निर्माण करतो.
तसेच div#रेटिना ची सीमा-त्रिज्या त्याच्या अर्ध्या रुंदीवर सेट केली आहे, ज्यामुळे ते अगदी गोलाकार बनते (किमान ब्राउझरमध्ये जे समर्थन करतात सीमा-त्रिज्या CSS3 - क्रोम, सफारी, ऑपेरा आणि फायरफॉक्स).
आणि शेवटी, आम्ही एक रिक्त कर्सर सेट करून माउस पॉइंटर लपवतो (पूर्णपणे रिक्त कर्सर प्रस्तुत करताना Google Chrome त्रुटी टाकते, म्हणून आम्हाला त्यासाठी 1px पांढरा कर्सर सेट करणे आवश्यक आहे). ऑपेरा सानुकूल कर्सरकडे पूर्णपणे दुर्लक्ष करते आणि या वस्तुस्थितीबद्दल काहीही केले जाऊ शकत नाही. त्यामुळे, या ब्राउझरच्या वापरकर्त्यांना प्रभाव पाहताना नकारात्मक अनुभव येईल.
पायरी 3 jQuery
शैली सेट केल्या आहेत, प्रोग्रामिंग सुरू करण्याची वेळ आली आहे.
script.js
$(document).ready(function()( /* रेडी इव्हेंट प्राप्त झाल्यावर कोड कार्यान्वित केला जातो */ var left = 0, top = 0, आकार = ( रेटिना: ( रुंदी: 190, उंची: 190 ), वेबपृष्ठ :( रुंदी: 500, उंची: 283 ) ), वेबपृष्ठ = $("#वेबपृष्ठ"), ऑफसेट = ( डावीकडे: webpage.offset().left, top: webpage.offset().top ), रेटिना = $( "#retina"); if(navigator.userAgent.indexOf("Chrome")!=-1) ( retina.addClass("chrome"); ) webpage.mousemove(function(e)( left = (e.pageX- offset.left) ; top = (e.pageY-offset.top); if(retina.is(":not(:animated):hidden"))( webpage.trigger("mouseenter"); ) if(left<0 || top<0 || left >sizes.webpage.width || top > sizes.webpage.height) ( /* आम्ही पृष्ठाच्या स्क्रीनशॉटच्या बाहेर असल्यास, रेटिना div लपवा */ if(!retina.is(":animated"))( webpage.trigger("mouseleave"); ) रिटर्न फॉल्स; ) /* माऊसच्या मागे रेटिना डिव्ह हलवा (आणि पार्श्वभूमी स्क्रोल करा) */ retina.css(( डावीकडे: डावीकडे - sizes.retina.width/2, शीर्ष: top - sizes.retina.height/2 , पार्श्वभूमी स्थिती: "- "+(1.6*डावे)+"px -"+(1.35*शीर्ष)+"px" )); ))mouseleave(function()( retina.stop(true,true).fadeOut("फास्ट"); )).mousenter(function()( retina.stop(true,true).fadeIn("फास्ट"); ) ); ));कार्यात माउस हलवामाऊस कर्सरचे वर्तमान निर्देशांक म्हणून पास केले जातात e.pageXआणि e.pageY, परंतु ते संपूर्ण दस्तऐवजाच्या संबंधात निरपेक्ष आहेत. ऑफसेट वजा करणे div#webpage, आम्हाला माउस कर्सरचे संबंधित निर्देशांक मिळतात, जे नंतर पोझिशनिंगसाठी वापरले जातात div#रेटिना.
त्यामुळे रिक्त कर्सरच्या संयोगाने, आम्ही फक्त JavaScript आणि CSS वापरून भिंगाचा प्रभाव तयार करतो.
निष्कर्ष
फ्लॅश आणि HTML5 उत्साही यांच्यातील वादविवाद अलीकडेच भडकला आहे कारण लोक बाह्य अनुप्रयोग न वापरता समान पातळीची कार्यक्षमता मिळविण्याचे मार्ग शोधू लागले आहेत. हा दृष्टिकोन सोप्या अनुप्रयोगांकडे नेतो. तथापि, आम्ही सोल्यूशन्सची क्रॉस-ब्राउझर सुसंगतता राखण्याबद्दल लक्षात ठेवले पाहिजे, जे नेहमीच शक्य नाही (IE लक्षात ठेवा).
आशा आहे की आपण धड्याचा आनंद घेतला असेल!