3 آسان مراحل میں جاوا اسکرپٹ سلائیڈ شو بنانے کا طریقہ

اگر آپ نے ہماری گائیڈ پڑھ لی ہے۔ ویب سائٹ بنانے کا طریقہ ، آپ سوچ رہے ہوں گے کہ اپنی صلاحیتوں کو بہتر بنانے کے لیے آگے کیا کریں۔ فوٹو سلائیڈ شو بنانا حیرت انگیز طور پر آسان کام ہے ، اور جو آپ کو پروگرامنگ کی نوکری حاصل کرنے کے لیے درکار قیمتی مہارتیں سکھا سکتا ہے۔

آج میں آپ کو دکھاؤں گا کہ شروع سے جاوا اسکرپٹ سلائیڈ شو کیسے بنایا جائے۔ آئیے سیدھے اندر جائیں!

---

---

ضروریات۔

کوڈنگ شروع کرنے سے پہلے آپ کو کچھ چیزیں جاننے کی ضرورت ہوگی۔ مناسب ویب براؤزر اور اپنی پسند کے ٹیکسٹ ایڈیٹر کے ساتھ (میں تجویز کرتا ہوں۔ شاندار متن۔ ) ، آپ کو کچھ تجربے کی ضرورت ہوگی۔ ایچ ٹی ایم ایل ، سی ایس ایس ، جاوا اسکرپٹ۔ ، اور jQuery .

اگر آپ کو اپنی مہارتوں پر اتنا اعتماد نہیں ہے تو ، اس بات کو یقینی بنائیں کہ آپ دستاویز آبجیکٹ ماڈل استعمال کرنے کے لیے ہماری گائیڈ اور سی ایس ایس سیکھنے کے لیے ان تجاویز کو پڑھیں۔ اگر آپ جاوا اسکرپٹ کے ساتھ پراعتماد ہیں لیکن پہلے کبھی jQuery استعمال نہیں کیا ہے ، تو jQuery کے لیے ہماری بنیادی گائیڈ دیکھیں۔

1. شروع کرنا۔

یہ سلائیڈ شو کئی خصوصیات کی ضرورت ہے:

1. تصاویر کے لیے سپورٹ۔
2. تصاویر کو تبدیل کرنے کے لیے کنٹرول
3. ایک ٹیکسٹ کیپشن۔
4. خودکار موڈ۔

یہ خصوصیات کی ایک سادہ فہرست لگتا ہے۔ آٹومیٹک موڈ خود بخود تصاویر کو ترتیب میں اگلے ایک میں آگے بڑھا دے گا۔ کوئی بھی کوڈ لکھنے سے پہلے میں نے جو خاکہ بنایا ہے وہ یہ ہے:

اگر آپ سوچ رہے ہیں کہ منصوبہ بندی کی زحمت کیوں کرتے ہیں ، تو تاریخ کی ان بدترین پروگرامنگ غلطیوں پر ایک نظر ڈالیں۔ یہ پروجیکٹ کسی کو ہلاک نہیں کرے گا ، لیکن بڑے کوڈ پر کام کرنے سے پہلے کوڈ اور منصوبہ بندی کے طریقہ کار کی ٹھوس تفہیم رکھنا بہت ضروری ہے - چاہے یہ صرف ایک خاکہ ہو۔

---

---

یہاں ابتدائی HTML ہے جو آپ کو شروع کرنے کی ضرورت ہے۔ اسے مناسب نام والی فائل میں محفوظ کریں ، جیسے۔ index.html :







MUO Slideshow










Windmill





Plant





Dog


❮
❯




یہاں کوڈ کیسا لگتا ہے:

---

---

یہ تھوڑا سا گندگی ہے نا؟ آئیے اسے بہتر بنانے سے پہلے اسے توڑ دیں۔

یہ کوڈ 'معیاری' پر مشتمل ہے ایچ ٹی ایم ایل ، سر ، سٹائل ، سکرپٹ ، اور جسم ٹیگز. یہ حصے کسی بھی ویب سائٹ کے لازمی اجزاء ہیں۔ JQuery گوگل سی ڈی این کے ذریعے شامل کیا گیا ہے - اب تک کوئی انوکھا یا خاص نہیں۔

جسم کے اندر ایک id ہے جس کی id ہے۔ شو کنٹینر . یہ سلائیڈ شو کو محفوظ کرنے کے لیے ایک ریپر یا بیرونی کنٹینر ہے۔ آپ سی ایس ایس کے ساتھ بعد میں اس میں بہتری لائیں گے۔ اس کنٹینر کے اندر ، کوڈ کے تین بلاکس ہیں ، ہر ایک کا مقصد یکساں ہے۔

پیرنٹ کلاس کی کلاس کے نام سے وضاحت کی جاتی ہے۔ امیج کنٹینر :

یہ ایک ہی سلائیڈ کو ذخیرہ کرنے کے لیے استعمال کیا جاتا ہے - ایک تصویر اور سرخی اس کنٹینر کے اندر محفوظ ہوتی ہے۔ ہر کنٹینر کی ایک منفرد شناخت ہوتی ہے ، جو حروف پر مشتمل ہوتی ہے۔ میں_ اور ایک نمبر. ہر کنٹینر میں ایک سے تین تک مختلف نمبر ہوتے ہیں۔

ایک آخری مرحلے کے طور پر ، ایک تصویر کا حوالہ دیا جاتا ہے ، اور کیپشن کو ایک div کے اندر ذخیرہ کیا جاتا ہے کیپشن کلاس:



Dog


میں نے اپنی تصاویر کو عددی فائل کے ناموں کے ساتھ بنایا ہے ، اور انہیں نامی فولڈر میں محفوظ کیا ہے۔ تصاویر . آپ اپنی پسند کی کسی بھی چیز کو کال کر سکتے ہیں ، بشرطیکہ آپ ایچ ٹی ایم ایل کو اپ ڈیٹ کریں۔

اگر آپ اپنے سلائیڈ شو میں کم یا زیادہ تصاویر رکھنا چاہتے ہیں تو ، کوڈ کے بلاکس کو کاپی اور پیسٹ کریں یا حذف کریں امیج کنٹینر کلاس ، ضرورت کے مطابق فائل کے نام اور ایڈ کو اپ ڈیٹ کرنا یاد رکھیں۔

آخر میں ، نیویگیشن بٹن بنائے جاتے ہیں۔ یہ صارف کو تصاویر کے ذریعے تشریف لے جانے کی اجازت دیتے ہیں:

❮
❯

یہ HTML ہستی کوڈز کو آگے اور پیچھے والے تیروں کو ظاہر کرنے کے لیے استعمال کیا جاتا ہے ، اسی طرح آئیکون فونٹس کیسے کام کرتے ہیں۔

2. سی ایس ایس۔

اب جب کہ بنیادی ڈھانچہ اپنی جگہ پر ہے ، اب وقت آگیا ہے کہ اسے نظر کیا جائے۔ خوبصورت . اس نئے کوڈ کے بعد یہ کیسا ہوگا

اپنے درمیان یہ CSS شامل کریں۔ سٹائل ٹیگز:

html {
font-family: helvetica, arial;
}
#showContainer {
/* Main wrapper for all images */
width: 670px;
padding: 0;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.navButton {
/* Make buttons look nice */
cursor: pointer;
float: left;
width: 25px;
height: 22px;
padding: 10px;
margin-right: 5px;
overflow: hidden;
text-align: center;
color: white;
font-weight: bold;
font-size: 18px;
background: #000000;
opacity: 0.65;
user-select: none;
}
.navButton:hover {
opacity: 1;
}
.caption {
float: right;
}
.imageContainer:not(:first-child) {
/* Hide all images except the first */
display: none;
}

اب بہت بہتر لگ رہا ہے نا؟ آئیے کوڈ پر ایک نظر ڈالیں۔

میں نمونے کی تصاویر استعمال کر رہا ہوں جو سب ہیں۔ 670 x 503 پکسلز ، لہذا یہ سلائیڈ شو زیادہ تر اس سائز کی تصاویر کے ارد گرد ڈیزائن کیا گیا ہے۔ اگر آپ مختلف سائز کی تصاویر استعمال کرنا چاہتے ہیں تو آپ کو مناسب طریقے سے سی ایس ایس کو ایڈجسٹ کرنے کی ضرورت ہوگی۔ میں تجویز کرتا ہوں کہ آپ اپنی تصاویر کا سائز بدلتے ہوئے سائز میں تبدیل کریں - مختلف جہتوں کی مختلف تصاویر اسٹائل کے مسائل کا سبب بنے گی۔

زیادہ تر۔ اس سی ایس ایس کی خود وضاحت ہے۔ تصاویر کو اسٹور کرنے کے لیے کنٹینر کے سائز کی وضاحت کرنے کے لیے کوڈ موجود ہے ، ہر چیز کو مرکز میں سیدھا کریں ، فونٹ کی وضاحت کریں ، بٹن اور ٹیکسٹ کلر کے ساتھ۔ کچھ سٹائل ہیں جو آپ کو پہلے نہیں ملے ہوں گے:

1. کرسر: اشارہ کرنے والا۔ - جب آپ اپنے کرسر کو بٹنوں پر منتقل کرتے ہیں تو یہ کرسر کو تیر سے اشارہ کرنے والی انگلی میں بدل دیتا ہے۔
2. دھندلاپن: 0.65 - اس سے بٹنوں کی شفافیت میں اضافہ ہوتا ہے۔
3. یوزر سلیکٹ: کوئی نہیں۔ - یہ یقینی بناتا ہے کہ آپ غلطی سے بٹنوں پر موجود متن کو نمایاں نہیں کر سکتے۔

آپ اس کوڈ کا زیادہ تر نتیجہ بٹنوں میں دیکھ سکتے ہیں:

یہاں کا سب سے پیچیدہ حصہ یہ عجیب نظر آنے والی لائن ہے:

.imageContainer:not(:first-child) {

یہ کافی غیر معمولی لگ سکتا ہے ، تاہم یہ کافی حد تک خود وضاحت کرنے والا ہے۔

سب سے پہلے ، یہ کسی بھی عناصر کو نشانہ بناتا ہے امیج کنٹینر کلاس کی : نہیں () نحو بتاتا ہے کہ بریکٹ کے اندر کوئی بھی عنصر ہونا چاہیے۔ خارج اس سٹائل سے آخر میں ، : پہلا بچہ نحو بتاتا ہے کہ اس سی ایس ایس کو نام سے مماثل کسی بھی عنصر کو نشانہ بنانا چاہیے۔ لیکن پہلے عنصر کو نظر انداز کریں اس کی وجہ سادہ ہے۔ جیسا کہ یہ ایک سلائیڈ شو ہے ، ایک وقت میں صرف ایک تصویر درکار ہے۔ یہ سی ایس ایس پہلی تصویر کے علاوہ تمام تصاویر کو چھپاتا ہے۔

3. جاوا اسکرپٹ۔

پہیلی کا آخری ٹکڑا جاوا اسکرپٹ ہے۔ سلائیڈ شو کو صحیح طریقے سے کام کرنے کے لیے یہ منطق ہے۔

اس کوڈ کو اپنے میں شامل کریں۔ سکرپٹ ٹیگ:

$(document).ready(function() {
$('#previous').on('click', function(){
// Change to the previous image
$('#im_' + currentImage).stop().fadeOut(1);
decreaseImage();
$('#im_' + currentImage).stop().fadeIn(1);
});
$('#next').on('click', function(){
// Change to the next image
$('#im_' + currentImage).stop().fadeOut(1);
increaseImage();
$('#im_' + currentImage).stop().fadeIn(1);
});
var currentImage = 1;
var totalImages = 3;
function increaseImage() {
/* Increase currentImage by 1.
* Resets to 1 if larger than totalImages
*/
++currentImage;
if(currentImage > totalImages) {
currentImage = 1;
}
}
function decreaseImage() {
/* Decrease currentImage by 1.
* Resets to totalImages if smaller than 1
*/
--currentImage;
if(currentImage <1) {
currentImage = totalImages;
}
}
});

یہ جوابی بدیہی لگ سکتا ہے ، لیکن میں کوڈ کے ابتدائی بلاکس کو چھوڑ کر جا رہا ہوں ، اور کوڈ کو آدھے راستے سے سمجھانے کے لیے سیدھا کود رہا ہوں-فکر مت کرو ، میں تمام کوڈ کی وضاحت کرتا ہوں!

آپ کو دو متغیرات کی وضاحت کرنے کی ضرورت ہے۔ (جاوا اسکرپٹ میں متغیرات کی وضاحت کرنے کا طریقہ یہ ہے۔) ان متغیرات کو سلائیڈ شو کے لیے مرکزی کنفیگریشن متغیر سمجھا جا سکتا ہے۔

var currentImage = 1;
var totalImages = 3;

یہ سلائیڈ شو میں تصاویر کی کل تعداد ، اور شروع ہونے والی تصویر کی تعداد کو محفوظ کرتے ہیں۔ اگر آپ کے پاس مزید تصاویر ہیں تو ، صرف تبدیل کریں۔ کل تصاویر آپ کے پاس موجود تصاویر کی کل تعداد میں متغیر۔

دو افعال۔ تصویر میں اضافہ اور تصویر میں کمی پیشگی یا پیچھے ہٹنا موجودہ تصویر متغیر کیا یہ متغیر ایک سے کم ہونا چاہیے ، یا اس سے زیادہ۔ کل تصاویر ، یہ ایک یا پھر ری سیٹ ہو جاتا ہے۔ کل تصاویر . اس بات کو یقینی بناتا ہے کہ سلائیڈ شو اختتام تک پہنچنے کے بعد لوپ کرے گا۔

شروع میں کوڈ پر واپس جائیں۔ یہ کوڈ اگلے اور پچھلے بٹنوں کو 'ٹارگٹ' کرتا ہے۔ جب آپ ہر بٹن پر کلک کرتے ہیں تو ، یہ مناسب کال کرتا ہے۔ اضافہ یا کمی طریقے ایک بار مکمل ہونے کے بعد ، یہ اسکرین پر موجود تصویر کو دھندلا دیتا ہے ، اور نئی تصویر میں دھندلا جاتا ہے (جیسا کہ موجودہ تصویر متغیر)

کی روکنا () طریقہ jQuery میں بنایا گیا ہے۔ یہ کسی بھی زیر التواء ایونٹس کو منسوخ کر دیتا ہے۔ یہ یقینی بناتا ہے کہ ہر بٹن پریس ہموار ہے ، اور اس کا مطلب ہے کہ اگر آپ ماؤس پر تھوڑا سا پاگل ہو جائیں تو آپ کے پاس 100 بٹن پریس نہیں ہیں۔ کی دھندلا (1) اور دھندلا ہوا (1) ضرورت کے مطابق طریقے دھندلا یا ختم ہو جاتے ہیں۔ نمبر ملی سیکنڈ میں دھندلا ہونے کی مدت کی وضاحت کرتا ہے۔ اسے بڑی تعداد میں تبدیل کرنے کی کوشش کریں جیسے 500 تاہم ، بہت دور جاؤ ، اور آپ تصویر کی تبدیلیوں کے درمیان عجیب و غریب واقعات یا 'ٹمٹماہٹ' دیکھنا شروع کر سکتے ہیں۔ عمل میں سلائیڈ شو یہ ہے:

خودکار ترقی۔

یہ سلائیڈ شو اب بہت اچھا لگ رہا ہے ، لیکن ایک آخری فائنشنگ ٹچ کی ضرورت ہے۔ خودکار ترقی ایک ایسی خصوصیت ہے جو واقعی اس سلائیڈ شو کو چمکائے گی۔ ایک مقررہ مدت کے بعد ، ہر تصویر خود بخود اگلی تصویر میں آگے بڑھ جائے گی۔ تاہم ، صارف اب بھی آگے یا پیچھے کی طرف جا سکتا ہے۔

میں مرسل کے ذریعے جی میل کو کیسے ترتیب دوں؟

jQuery کے ساتھ یہ ایک آسان کام ہے۔ آپ کے کوڈ کو ہر ایک پر عمل کرنے کے لیے ایک ٹائمر بنانے کی ضرورت ہے۔ ایکس سیکنڈ نیا کوڈ لکھنے کے بجائے ، تاہم ، سب سے آسان کام اگلے امیج بٹن پر 'کلک' کی تقلید کرنا ہے ، اور موجودہ کوڈ کو تمام کام کرنے دیں۔

یہ ہے نیا جاوا اسکرپٹ جس کی آپ کو ضرورت ہے - اسے بعد میں شامل کریں۔ تصویر میں کمی فنکشن:

window.setInterval(function() {
$('#previous').click();
}, 2500);

یہاں بہت کچھ نہیں ہو رہا ہے۔ کی window.setInterval طریقہ باقاعدگی سے کوڈ کا ایک ٹکڑا چلے گا ، جیسا کہ اختتام پر متعین کردہ وقت کے مطابق ہے۔ وقت 2500۔ (ملی سیکنڈ میں) کا مطلب ہے کہ یہ سلائیڈ شو ہر 2.5 سیکنڈ میں آگے بڑھے گا۔ چھوٹی تعداد کا مطلب ہے کہ ہر تصویر تیز رفتار سے آگے بڑھے گی۔ کی کلک کریں طریقہ کوڈ کو چلانے کے لیے بٹنوں کو متحرک کرتا ہے جیسے کسی صارف نے اپنے ماؤس سے بٹن پر کلک کیا ہو۔

اگر آپ اپنے اگلے جاوا اسکرپٹ چیلنج کے لیے تیار ہیں تو ، ویب سائٹ بنانے کی کوشش کریں جامد ویب سائٹ بلڈر جیسے GatsbyJS ، یا Vue جیسے فرنٹ اینڈ فریم ورک کے ساتھ۔ اگر آپ روبی سیکھنے والے ہیں تو ، جیکل بھی ایک آپشن ہے۔ یہ ہے کہ جیکیل اور گیٹسبی جے ایس ایک دوسرے کے خلاف کیسے کام کرتے ہیں۔

تصویری کریڈٹ: تھرانات سرسری بذریعہ Shutterstock.com۔

بانٹیں بانٹیں ٹویٹ ای میل۔ آڈیو بکس مفت میں ڈاؤن لوڈ کرنے کے لیے 8 بہترین ویب سائٹس۔

آڈیو بکس تفریح ​​کا ایک بڑا ذریعہ ہیں ، اور ہضم کرنے میں بہت آسان ہیں۔ یہاں آٹھ بہترین ویب سائٹ ہیں جہاں آپ انہیں مفت میں ڈاؤن لوڈ کر سکتے ہیں۔

اگلا پڑھیں۔ متعلقہ موضوعات۔

• پروگرامنگ۔
• جاوا اسکرپٹ۔
• ویب ڈیزائن

مصنف کے بارے میں جو کوبرن۔(136 مضامین شائع ہوئے)

جو یونیورسٹی آف لنکن یونیورسٹی سے کمپیوٹر سائنس میں گریجویٹ ہیں۔ وہ ایک پیشہ ور سافٹ وئیر ڈویلپر ہے ، اور جب وہ ڈرون نہیں اڑاتا یا موسیقی نہیں لکھتا ، تو وہ اکثر تصاویر لیتے یا ویڈیو بناتے ہوئے پایا جا سکتا ہے۔

جو کوبرن سے مزید۔

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔