مواد
- سی ایس ایس ٹرانزیشن کا تعارف
- سی ایس ایس کی تبدیلیوں کا تعارف
- فلپ گیلری ، نگارخانہ jQuery ویجیٹ بنانا
- HTML مارک اپ
- ویجیٹ بنائیں
- متحرک مارک اپ شامل کریں
- متحرک
یہ مضمون سب سے پہلے. نیٹ میگزین کے 223 کے شمارے میں شائع ہوا - ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کا سب سے زیادہ فروخت ہونے والا رسالہ۔
سی ایس ایس ٹرانزیشن اور ٹرانسفارمز اب بھی نسبتا new نیا ہیں اور معیاری بننے سے پہلے نحو تبدیل ہوسکتے ہیں۔ ہم ابھی بھی ان خصوصیات کو استعمال کرنا شروع کرسکتے ہیں ، اگرچہ: ہمیں صرف اس بات کو یقینی بنانا ہوگا کہ ہم فروش کے پہلے سے تیار شدہ ورژن استعمال کریں۔ تمام براؤزرز کے صارفین کے لئے اعانت فراہم کرنے کے ل all ، یہ ضروری ہے کہ تمام وینڈروں کو پہلے سے تیار کردہ ورژن شامل کریں۔ تاہم ، یہ خاص طور پر مختصرا کوڈ کے ل. نہیں بنتا ہے ، لہذا وضاحت کے مفاد میں میں اس سبق کے سبق میں صرف ویکیٹ کا سابقہ استعمال کروں گا۔
سی ایس ایس ٹرانزیشن کا تعارف
سی ایس ایس ٹرانزیشن سی ایس ایس 3 کی ایک نئی خصوصیت ہے جو آپ کو صرف سی ایس ایس کی خصوصیات میں تبدیلی کرکے عناصر کو متحرک کرنے کی صلاحیت فراہم کرتی ہے۔ منتقلی کا استعمال کرتے ہوئے آپ براؤزر کو بتاتے ہیں کہ کن خصوصیات کو متحرک ہونا چاہئے ، انہیں کتنا وقت لینا چاہئے اور کون سی نرمی والی تقریب استعمال کی جانی چاہئے۔ یہاں ایک مثال دی گئی ہے کہ صرف کلاس شامل کرکے عنصر کو خود بخود کیسے ختم کیا جاسکتا ہے:
ڈوی # ٹیسٹ {-ویبکیٹ - منتقلی-جائیداد: دھندلاپن؛ -ویبکیٹ-منتقلی-دورانیہ: 500 ملی میٹر؛ -ویبکیٹ-ٹرانزیشن-ٹائمنگ-فنکشن: آسانی؛ دھندلاپن: 1.0؛} div # test.hmitted {دھندلاپن: 0.0؛
سی ایس ایس کی تبدیلیوں کا تعارف
CSS تبدیلیاں CSS3 میں بھی نئی ہیں اور آپ کو اسکیلنگ ، ترجمہ اور گھومنے جیسے عناصر پر 2D اور 3D ہیرا پھیری انجام دینے دیں۔ یہاں ایک مثال ہے کہ آپ کچھ متن کو گھمانے کے ل to ٹرانسفارم کا استعمال کیسے کرسکتے ہیں:
p # test we -webkit-transform: گھمائیں (45deg)؛
سی ایس ایس ٹرانزیشن اور ٹرانسفارمز کو ایک ساتھ استعمال کرنا آپ کی ویب سائٹ یا ویب ایپ کے لئے واقعی مجبور متحرک تصاویر تخلیق کرنے کا ایک آسان طریقہ ہے۔ ٹرانزیشن میں بھی ہارڈ ویئر کو تیز تر کیا جاسکتا ہے لہذا وہ روایتی ٹائمر پر مبنی جاوا اسکرپٹ متحرک تصاویر کے مقابلے میں موبائل آلات پر زیادہ بہتر کام کرتے ہیں۔
فلپ گیلری ، نگارخانہ jQuery ویجیٹ بنانا
ٹرانزیشن کے ساتھ سی ایس ایس 3 ٹرانسفارمز کو یکجا کرنے کی طاقت کا مظاہرہ کرنے کے لئے آئیے jQuery کے لئے ایک گیلری ویجیٹ بنائیں جو کسی صفحے کے تاثیر کی نقالی کرتا ہے۔ زیادہ تر جدید براؤزر اب سی ایس ایس ٹرانزیشن کی حمایت کرتے ہیں ، لیکن ابھی تک سبھی 3D ٹرانسفارمز کو سپورٹ نہیں کرتے ہیں۔ جب ہم 3D اثر مرتب کررہے ہیں تو ہم صرف ویب کٹ براؤزرز جیسے سفاری ، کروم اور iOS کو نشانہ بنائیں گے۔
HTML مارک اپ
اس کے ساتھ شروع کرنے کے لئے ہمیں اپنا مارک اپ طے کرنے کی ضرورت ہے تاکہ آپکے پاس ویجیٹ کے ساتھ کچھ کام ہوسکے۔
div> img src = "images / photo1.webp" Alt = "Photo 1" /> img src = "images / photo2.webp" Alt = "فوٹو 2" انداز = "ڈسپلے: کوئی نہیں" /> img src = "تصاویر /photo3.webp "alt =" فوٹو 3 "انداز =" ڈسپلے: کوئی نہیں "/> / div>
ایسا کرنے کے ل we ہم ایک سادہ ڈھانچہ تیار کرتے ہیں جس میں ایک DIV پر مشتمل امیج عناصر کی ایک سیریز ہوتی ہے۔ ہم اس عنصر کو ایک کلاس بھی دیں گے تاکہ jQuery کے ذریعے رسائی آسان ہوجائے۔ پہلی شبیہ کے سوا کسی کے لئے بھی ڈسپلے پراپرٹی کو متعین کرنا ضروری ہے: اس طرح سے بہتر انداز میں تاوان ہوجائے گا ، اگر کسی وجہ سے ، مؤکل کا براؤزر جاوا اسکرپٹ کی حمایت نہیں کرتا ہے۔
ویجیٹ بنائیں
اب جب کہ ہمارا مارک اپ ہے ہمیں jQuery ویجیٹ (jQuery کی بارے چیزیں jQuery UI لائبریری کا حصہ ہیں) بنانے کی ضرورت ہے۔ ایک علیحدہ فائل میں ، مندرجہ ذیل بنیادی ویجیٹ ٹیمپلیٹ تشکیل دیں۔
(فنکشن ($) {$. ویجیٹ ("ui.flipGallery" ، {اختیارات: {}، _ create: function () {// سیٹ اپ ویجیٹ}}})؛
ہم DOM ترتیب دینے کے لئے ویجٹ کنسٹرکٹر (_create ()) استعمال کریں گے تاکہ یہ پلٹائیں اثرات کے ل ready تیار ہو۔ ہمیں بوجھ پر گیلری بنانے کیلئے مرکزی HTML دستاویز میں کچھ کوڈ شامل کرنے کی بھی ضرورت ہے۔ ایسا کرنے کے ل your ، اپنے HTML صفحہ میں درج ذیل کو شامل کریں:
اسکرپٹ کی قسم = "متن / جاوا اسکرپٹ" چارسیٹ = "utf-8"> jQuery (دستاویز). تیار (فنکشن ($) {$ (’div.gallery’)۔ فلپ گیلری ()؛})؛ / اسکرپٹ>
لہذا ہمیں سب سے پہلے کچھ عام سیٹ اپ کرنے کی ضرورت ہے۔ مندرجہ ذیل اپنے ویجٹ _ کریٹ () فنکشن میں شامل کریں:
var that = this؛ // गैलरी کے لئے تمام تصاویر ڈھونڈیں۔ آئیمجز = کہ.یلمنٹ.فائنڈ ('img')؛ // اگر ہمارے پاس صرف ایک ہی تصویر ہے تو آگے نہ بڑھیں (that.images.length = 1) واپسی؛ وہ. کورنگایمیج انڈیکس = 0؛ // تصویری جہت حاصل کریں۔ ہیٹ = وہ.ایمجس.فیرسٹ () اونچائی ()؛ that.width = that.images.first () چوڑائی ()؛ // یقینی بنائیں کہ گیلری عنصر یہ sizethat.element.width (that.width) رہتا ہے۔ اونچائی (that. اونچائی)؛ // ذیلی عناصر کو بالکل گیلری میں ہی رکھنے کی اجازت دیں ۔اٹلیٹ سی ایس ایس ('پوزیشن' ، 'رشتہ دار')؛ // سیٹ اپ نقطہ نظر کی حمایت کرنے والا عنصر ۔اٹیمنٹ سی ایس ایس ({'- ویب کٹ تناظر': 1100 ، '- ویب کٹ تناظر-اصل': '50٪ 50٪ '})
مذکورہ کوڈ کو ان تمام تصاویر کی ایک فہرست ملتی ہے جو ہم نے مارک اپ میں بتائی ہیں اور اس بات کو یقینی بناتے ہیں کہ کنٹینر عنصر کا سائز درست ہے۔ اس سے یہ مثال کے طور پر متغیر بھی پیدا ہوتا ہے جس سے ظاہر ہوتا ہے کہ شبیہہ کے انڈیکس نمبر پر نظر رکھیں۔ ہم اسے تصویروں کے تسلسل سے آگے بڑھنے کے لئے تھوڑی دیر بعد استعمال کریں گے۔
اس کوڈ کا آخری حصہ گیلری عنصر کے بارے میں نقطہ نظر مرتب کرتا ہے۔ جب ہم 3D اثر پیدا کررہے ہیں ، ہمیں عنصر کو نقطہ نظر رکھنے کی ضرورت بتانے کی ضرورت ہے بصورت دیگر جب ہم منتقلی چلاتے ہیں تو صفحہ اسکرین سے باہر نہیں آتا ہے۔ وِبکیٹ نقطہ نظر کے ل for جو تعداد کم استعمال ہوتی ہے ، تناظر اتنا ہی واضح ہوتا ہے۔ اس اثر کے ل I میں نے محسوس کیا کہ 1،100 کے قریب قدریں بہترین لگتی ہیں۔
متحرک مارک اپ شامل کریں
اب ہم ویجیٹ کو کچھ کرنے کیلئے تیار ہیں۔ پہلے ہمیں مطلوبہ اثر کے ل what ہمیں کون سے عناصر کی ضرورت ہے اس پر کام کرنے کی ضرورت ہے۔ جب ہم صفحہ پلٹائیں گے تو ہمیں اس کے بارے میں سوچنے کی ضرورت ہے جب آپ کسی کتاب میں کسی صفحے کو تبدیل کرتے ہیں تو کیا ہوتا ہے۔
- ہم پہلی شبیہہ کو مکمل طور پر دیکھ کر شروع کرنا چاہتے ہیں۔
- پھر ہم دیکھنا چاہتے ہیں کہ اس پہلی شبیہہ کے دائیں بائیں دوسری طرف کی شبیہہ کو ظاہر کرتے ہوئے ، مرکز کے چاروں طرف گھوم رہے ہیں۔
- گھومنے والے عنصر کی سکرین پر کھڑے ہونے کے بعد ہم گھومتے رہنا چاہتے ہیں ، لیکن اس کے بجائے دوسری شبیہہ کے بائیں طرف دکھائیں۔
اس کو حاصل کرنے کے ل we're ہم DOM عنصر کا ڈھانچہ تشکیل دینا چاہتے ہیں جو مذکورہ بالا خاکے کو ظاہر کرتا ہے۔
آئیے مطلوبہ پرتوں سے ملنے کے لئے کچھ ڈوم عناصر بنائیں۔ چونکہ ہمیں تصاویر کے کچھ خاص حصے ظاہر کرنے کے قابل ہونے کی ضرورت ہے ، بجائے کہ ہم img /> عناصر پیش کریں ، ہم ان عناصر کے پس منظر میں تصاویر کو لاگو کریں گے۔ اس سے لازمی طور پر ہم اپنی مرضی کے مطابق تصاویر کو متحرک طور پر (یا کلپ) کاشت کرسکیں گے۔ ایک اور دو پرتیں بنانے کے ل we ہمیں درج ذیل کوڈ شامل کرنے کی ضرورت ہے۔
// تصویر کے بائیں ہاتھ کی سلائیڈ کو ظاہر کرنے کے لئے ایک عنصر بنائیں Athat.imageLeftA = $ ('div />'، {'class': 'imageLeftA'}). CSS ({چوڑائی: '100٪'، قد: '100 ٪ '، پوزیشن:' رشتہ دار '})؛ // Bthat.imageRightB = $ (' div /> '، {' کلاس ':' imageRightB '}) کے تصنیف کے دائیں ہاتھ کو دکھانے کے لئے عنصر بنائیں۔ // مکمل اونچائی ، نصف چوڑائی کی چوڑائی: '50٪ '، اونچائی:' 100٪ '، // شبیہہ کے دائیں بائیں حصے کا احاطہ کریں لیفٹ مقام:' مطلق '، اوپری:' 0px '، دائیں:' 0px '، // دائیں سیدھ میں سیدھ کریں پس منظر کی امیج بیک گراؤنڈ پوزیشن: 'رائٹ ٹاپ'}). اپینڈٹو (اس آئی ایمجی لیفٹہ)؛ // ڈوماٹاٹ ڈاٹ ایجج لیفٹ اے ایپینڈٹو میں شامل کریں (کہ۔ عنصر)؛
اگلا ہم ان عناصر کو شامل کریں گے جو اس صفحے کی نمائندگی کریں گے جو مڑ جائے گا۔ اس میں تین اور چار پرتیں شامل ہوں گی:
// اب 'صفحہ' تخلیق کریں جو پلٹ جائے گی اوورٹہاٹ پیج = $ ('div />'، class 'class': 'page'}). CSS ({// مکمل اونچائی ، نصف چوڑائی کی چوڑائی: '50٪ '، اونچائی: '100٪' ، // شبیہہ کے دائیں ہاتھ کا حصہ ڈھانپیں: 'مطلق' ، اوپری: '0px' ، دائیں: '0px' ، // ہمیں اس عنصر کو ذیلی عناصر کی واقفیت کو برقرار رکھنے کے لئے بتانے کی ضرورت ہے۔ is transmitted '-webkit-transform-style': 'preserv-3d'})؛ that.imageRightA = $ ('div />'، {'class': 'imageRightA'}). CSS ({// کنٹینر کو پُر کریں (جو پوری اونچائی ، نصف چوڑائی ہے) کی چوڑائی: '100٪' ، اونچائی: '100٪' ، // پس منظر کی تصویری پس منظر کی سیدھے سیدھ میں لائیں پوزیشن: 'دائیں اوپر' ، // یقینی بنائیں کہ عنصر صفحے کے مقام کے اوپری بائیں سے شروع ہوتا ہے۔ : 'مطلق' ، سب سے اوپر: '0px' ، بائیں: '0px'، // جب تصویر ہمارے سامنے نہیں آرہی ہے تو ہم اسے نہیں دیکھنا چاہتے '-ویبکٹ-بیک فاسٹ ویزئبلٹی': 'پوشیدہ'})۔ (that.page)؛ that.imageLeftB = $ ('div />'، {'class': 'imageLeftB'}). CSS ({// کنٹینر (جس کی پوری اونچائی ، نصف چوڑائی ہے) کو بھریں: '100 ٪ '، اونچائی:' 100٪ '، // یقینی بنائیں کہ عنصر اوپر سے شروع ہوتا ہے صفحہ کی جگہ کے بائیں: 'مطلق' ، ٹاپ: '0px' ، بائیں: '0px' ، // ہمیں اس پینل کو گھمانے کی ضرورت ہے کیونکہ اس کی ابتدا اسکرین سے باہر ہونے کے ساتھ ہی ہونی چاہئے '-ویبکیٹ-ٹرانسفارم': 'روٹیٹ وائی ( 180deg) '، // ہم اس تصویر کو دیکھنے کے لئے نہیں چاہتے جب اس کا سامنا ہمارے سے دور ہو''- ویب سائٹ۔ بیک سطح - مرئیت': 'پوشیدہ'})۔ appendTo (that.page)؛ that.page.appendTo (وہ .element)؛
مذکورہ کوڈ میں نوٹ کرنے والی اہم بات یہ ہے کہ امیج B کی نمائندگی کرنے والے عنصر کے بائیں ہاتھ کو 180 by کے ذریعہ گھمایا جاتا ہے تاکہ جب یہ شروع ہوتا ہے تو اس کا سامنا اسکرین سے دور ہوتا ہے۔ یہ بھی ضروری ہے کہ ہم صفحہ عنصر کے اندر موجود دونوں پرتوں کو صرف سامنے کا چہرہ دکھانے کے لئے کہیں۔ اس کی تکمیل CSS3 پراپرٹی ’’ وِبِکِٹ۔بِکس۔اوفسٹیبلٹی ‘‘ کے استعمال سے کی گئی ہے۔
’پوشیدہ‘ اور اس کا مطلب یہ ہے کہ عنصر کا کوئی بھی حصہ جسے اسکرین کا سامنا نہیں کرنا پڑا وہ صارف نہیں دیکھ سکتا ہے۔ دکھاوے والے عناصر کے پچھلے چہرے کو روکنے سے ، ہم یہ تاثر پیدا کرتے ہیں کہ دونوں ذیلی عنصر صفحے کے دونوں طرف ہیں۔
ہم نے صفحہ کی عنصر پر ایک اور نئی سی ایس ایس 3 پراپرٹی ’’ وِبکیٹ ٹرانسفارم اسٹائل ‘‘ بھی استعمال کی ہے جس میں دو پرتیں ہیں۔ یہ خاصیت ذیلی عناصر میں ہونے والی تبدیلیوں کو اس عنصر کے مقابلہ میں حساب کرنے پر مجبور کرتی ہے۔ یہ تھوڑا سا الجھا ہوا ہے ، لیکن اس مثال کے طور پر اس کا مطلب یہ ہے کہ جب صفحہ کا عنصر گھمایا جاتا ہے ، تو بچے کے دو عناصر اس کے ساتھ گھومتے ہیں۔ اس کے بغیر آپ کو کچھ غیر متوقع سلوک ملے گا۔
متحرک
اس مقام پر ہم نے اپنے تمام ڈوم عناصر ترتیب دیئے ہیں ، لہذا ہمیں کنٹینر سے اصل تصاویر کو ہٹانے اور صحیح تصاویر کو اپنی مختلف پرتوں پر رنگنے کی ضرورت ہے۔ _کرائٹ () فنکشن کو ختم کرنے کے لئے کوڈ کی دو لائنوں کو شامل کریں:
// DOMthat.images.remove () سے تصاویر کو ہٹائیں that وہ._ سیٹ اپ آئیجز ()؛
چونکہ اب ہم کسی نئے فنکشن کو کال کر رہے ہیں ، تب ہمیں ہمیں اس کی وضاحت کرنے کی ضرورت ہوگی کہ _ سیٹ اپ آئیجز () فنکشن کیا کرتی ہے۔ اپنے ویجیٹ میں درج ذیل کوڈ شامل کریں:
_setupImages: Function () {var that = this؛ var nextImageIndex = that.currentImageIndex + 1؛ // حدود اگلی امیج انڈیکسف (اگلایجامی انڈیکس> = یہ.ایمجس لینتھ) اگلا آئیمیج انڈیکس = 0 // // کے ساتھ پلیس ہولڈر عناصر کو سیٹ اپ کریں۔ درست ') +') ')؛ that.imageRightB.add (that.imageLeftB) .css (' پس منظر کی شبیہ '،' یو آر ایل ('+ that (that.images.get (NextImageIndex)) .attr (' src ') + ')')؛}
اب ہمارے پاس جگہ میں موجود ہر چیز موجود ہے جو گیلری کو شروع کرنے کے قابل ہو ، لیکن اس وقت ہم سب براؤزر میں دیکھیں گے وہ پہلی تصویر ہے۔ آئیے پیج فلپ کو حقیقت میں انجام دینے کے لئے ایک فنکشن شامل کریں
پہلے ہمیں اثر کو متحرک کرنے کا ایک طریقہ درکار ہے۔ آپ اپنی HTML فائل میں بٹن شامل کرکے ایسا کرسکتے ہیں:
بٹن کی قسم = "بٹن"> اگلی تصویر / بٹن> دکھائیں
ہمیں سننے والے کو بٹن پر منسلک کرنے کے لئے اپنے jQuery. تیار کوڈ میں بھی ترمیم کرنے کی ضرورت ہے۔ فنکشن کو اس طرح دیکھنے کے لئے تبدیل کریں:
jQuery (دستاویز). تیار (فنکشن ($) {$ ('Div.gallery'). فلپ گیلری ()؛ button ('button.next'). پر کلک کریں (فنکشن (ایونٹ) {ایونٹ.پریوینٹ ڈیفالٹ ()؛ // ٹرگر ایک صفحہ پلٹائیں $ ('Div.gallery'). فلپ گیلری ('باری')؛})؛})؛
جب بٹن دبایا جاتا ہے تو اب یہ ہمارے ویجیٹ میں موڑ کی تقریب کو متحرک کردے گا۔ اب آئیے اس فنکشن کو نافذ کریں تاکہ اس سے پیج کو موڑ دیا جا.۔ درج ذیل کوڈ کو شامل کریں:
باری: فنکشن () {var وہ = یہ؛ // سیٹ اپ ٹرانزیشنthat.page.css ({'- ویب کٹ - منتقلی - پراپرٹی': '-webkit-transform'، '- ویب کٹ-منتقلی-مدت': '1000ms' ، '- webkit-transition-timeing-تقریب': 'آسانی'، // یقینی بنائیں کہ بائیں ہاتھ کے کنارے کے گرد گھومنے والے محور '-ویبکیٹ-ٹرانسفارم-اورینج': 'بائیں'})؛ // سیٹ ٹائم آؤٹ () کو استعمال کریں اس بات کو یقینی بنائیں کہ پروسیسنگنگ ٹائم آؤٹ (فنکشن () (فنکشن ()). that.page.css (left // Y محور کے ارد گرد بائیں سے دائیں پلٹائیں ':' گھومنے والا (-180deg) '})؛}، 50)؛
تو مندرجہ بالا کوڈ کیا کرتا ہے؟ پہلے ، ہم اپنے پیج عنصر کو کچھ سی ایس ایس دیتے ہیں تاکہ یہ بتائے کہ کون سی جائیداد کو متحرک کرنا ہے اور ہم اس حرکت پذیری کو کس طرح ظاہر کرنا چاہتے ہیں۔ اس معاملے میں ہم چاہتے ہیں کہ ویکیٹ - ٹرانسفارم پراپرٹی میں کسی بھی طرح کی تبدیلی کو ایک ہزار میل دوری میں متحرک کیا جائے ، اور ہم آسانی کے وقت کی تقریب کو استعمال کرنا چاہیں گے۔ ہم یہ بھی واضح کرتے ہیں کہ ہم عنصر کے بائیں ہاتھ کے چاروں طرف تبدیلیاں کرنا چاہتے ہیں۔ یہ یقینی بنائے گا کہ جب ہم صفحہ عنصر کو گھماتے ہیں (جو شبیہ کے دائیں بائیں کی نمائندگی کرتا ہے) تو یہ شبیہ کے مرکز کے گرد پھر جائے گا۔
اس کے بعد کوڈ کا دوسرا حصہ اس گردش پر لاگو ہوتا ہے ، جس سے ہم نئی پوزیشن طے کرتے ہیں جس میں ہم چاہتے ہیں کہ صفحہ کا عنصر موجود ہو۔ کیوں کہ ہم نے کہا ہے کہ فوری طور پر نئی گردش کی پوزیشن میں تبدیل ہونے کے بجائے ، تمام ویکیٹ ٹرانسفارم پراپرٹی کی تبدیلیاں متحرک ہوجائیں۔ ، صفحہ کا عنصر آسانی سے متحرک ہوجائے گا ، جس سے مطلوبہ صفحے کو موڑ ملے گا۔
ایسا لگتا ہے جیسے ہم ختم ہوچکے ہیں ، لیکن ہم اگلی امیج کے لئے کیسے ترتیب دیں تاکہ ہم کسی بھی من مانی تعداد میں تصویری نقاط کو چلائیں۔ خوش قسمتی سے ، جب منتقلی مکمل ہوجائے گی تو براؤزر ایک واقعہ کو متحرک کردے گا ، جس کے لئے ہم اسی طرح سن سکتے ہیں جس طرح ہم کسی کلک یا بٹن کو دباسکتے ہیں۔ آئیے اگلی منتقلی کے لئے دوبارہ ترتیب دینے کے لئے ایونٹ کے سامعین کو شامل کرکے اپنی باری () فنکشن میں ترمیم کریں۔ باری کی پہلی لائن () کو مندرجہ ذیل نئے کوڈ کے ساتھ تبدیل کریں:
var that = this؛ // منتقلی ختم ہونے پر ٹرگر کرنے کیلئے ایک فنکشن سیٹ اپ کریں منتقلی ختم ہوجاتی ہے = فنکشن (ایونٹ) {// منتقلی کی تقریبات کے لئے سننے کو روکیں ۔اٹاٹ پیج ڈاٹ یونٹ ('ویبکیٹ ٹرانسمیشن' ، منتقلی اینڈ) that کہ سی۔ورانی امیج انڈیکس ++؛ حد نئی امیج انڈیکسف (کہ. اوسرجیمیج انڈیکس> = that.images.length) کی جانچ پڑتال کریں۔ cCreImageIndex = 0؛ // گیلری کے پس منظر کو نئے امیجٹ ہاٹ.یلیمنٹ سی ایس ('بیک گراونڈ امیج' ، یعنی.ایمج لیفٹ بی پر سیٹ کریں۔ سی ایس ایس ('پس منظر کی شبیہ'))؛ // گیلری کے پس منظرآور عناصر = that.imageLeftA.add (that.page) کو چھپانے کے لئے تخلیق کردہ DOM عناصر کو چھپائیں۔ چھپائیں ()؛ // صفحے میں ہونے والی تبدیلیوں کو متحرک ہونے سے روکیں۔ page.css ({'- webkit-transition-پراپرٹی': 'کوئی نہیں'}) set سیٹ ٹائم آؤٹ (فنکشن () {// اگلے ٹرنھٹ ڈاٹ پیج سی ایس ایس ('- ویب کٹ ٹرانسفارم' ، 'کوئی نہیں' کے لئے عناصر کو دوبارہ ترتیب دیں۔ )؛ that._setupImages ()؛ તત્વો. شو ()؛}، 50)؛} // سنیں جب منتقلی ختم ہو جاتی ہے۔ page.bind ('webkitTransitionEnd'، TransEndEnd)؛
اب جب منتقلی مکمل ہوجاتی ہے تو ہم اگلے صفحے کی باری کے لئے دوبارہ ترتیب دینے کیلئے درج ذیل اقدامات انجام دے رہے ہیں۔
- موجودہ امیج انڈیکس میں اضافہ کریں۔
- نئی تصویر بننے کے لئے گیلری عناصر کا پس منظر مرتب کریں۔
- ہماری کسٹم پرتیں چھپائیں۔
- ٹرانزیشن کو غیر فعال کریں اور ہمارے پیج عنصر پر گردش کو دوبارہ ترتیب دیں۔
- ترتیب میں موجودہ اور اگلی تصاویر کیلئے موجودہ پرتوں کو ہماری تہوں پر پینٹ کرنے کے لئے _ سیٹ اپ آئیجز () کو کال کریں۔
اور اس ساری محنت کے بعد ہمارے پاس تیار شدہ پروڈکٹ ہے۔ ایک دوبارہ پریوست jQuery ویجیٹ جو حیرت انگیز صفحہ پلٹائیں گے جو پورٹ فولیو گیلری کے لئے بہترین نظر آئے گا۔
