جاوا اسکرپٹ کی مدد سے بدلتی تصاویر دکھائیں

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

اگرچہ یہ کام ویب سرور پر چلنے والی پروگرامنگ لینگوئج مثلاً PHP کی مدد سے بھی کیا جا سکتا ہے لیکن اس سلسلہ میں کچھ چیلنجز درپیش ہیں:

1. ویب پیج کے ہر دفعہ لوڈ ہونے پر نئی تصویر دکھانے کے سلسلہ میں چیلنج یہ ہے کہ آج کل ورڈ پریس اور ڈروپل وغیرہ جیسی ایپلی کیشنز کی مدد سے ویب سائیٹس تیار کی جاتی ہیں جن کے ویب پیجز کو ویب سرور پر کیش کی صورت میں رکھا جاتا ہے۔ کیش کا مطلب یہ ہے کہ ویب پیجز کو سرور پر تیار حالت میں رکھا جاتا ہے تاکہ جونہی صارف کسی ویب پیج کے لیے درخواست بھیجے اسے تیار شدہ ویب پیج فورًا بھیج دیا جائے، کیونکہ اگر ہر دفعہ ڈیٹابیس سے مختلف نوعیت کے مواد حاصل کرکے کوئی ویب پیج تیار کیا جائے تو اس پر بہت وقت لگ جاتا ہے۔ چنانچہ جب کوئی ویب پیج کیش کی صورت میں ہو گا تو ویب سرور ہر دفعہ نئی تصویر کے ساتھ براؤزر کی طرف وہ ویب پیج نہیں بھیج سکے گا، اس کے لیے پھر کوئی اسپیشل پلگ ان یا موجول انسٹال کرنا پڑے گا جو ویب پیج کی کیش کا حصہ نہ بنے، لیکن ایسا کرنے میں ظاہر ہے کہ کیشنگ کا مقصد متاثر ہوتا ہے۔
2. ویب پیج لوڈ کیے بغیر اگر تصویر بار بار بدلنی ہو تو اس کے لیے Ajax کی تکنیک استعمال کرتے ہوئے ویب پیج کا صرف وہی حصہ سرور سے منگوایا جا سکتا ہے جو نئی تصویر پر مشتمل ہو۔ لیکن ظاہر ہے کہ اگرچہ یہ حصہ ویب سرور پر چلنے والی لینگوئج کی مدد سے تیار کیا گیا ہے لیکن اسے منگوانے کے لیے تو پھر بھی براؤزر پر چلنے والی اسکرپٹنگ لینگوئج پر انحصار کیا جا رہا ہے۔ البتہ ایسی ایپلی کیشنز کے لیے یہی تکنیک مفید اور کارآمد ہے جن کے لیے بہت زیادہ تصاویر ڈاؤن لوڈ کرنے کی ضرورت پیش آتی ہے، جیسا کہ گوگل میپس میں آپ نے دیکھا ہوگا کہ جیسے جیسے آپ میپ کو ڈریگ کرتے جاتے ہیں نئی امیجز ڈاؤن لوڈ ہو کر میپ کو بڑھاتی جاتی ہیں۔

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

ویب پیج کے ہر دفعہ لوڈ ہونے پر ایک نئی تصویر دکھائیں

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

درج ذیل کوڈ کی مثال میں آپ دیکھ سکتے ہیں کہ images_array نام سے ایک اررے ہے جس کے اندر ہر تصویر کا اپنا اررے موجود ہے۔ جبکہ index_no ویری ایبل میں ہم 0 سے 7 تک ایک رینڈم نمبر حاصل کر رہے ہیں جس کے لیے جاوا اسکرپٹ کا فنکشن Math.random استعمال کیا گیا ہے۔ یہ رینڈم نمبر اس سے اگلی لائن میں images_array کی انڈیکس کے طور پر استعمال کیا گیا ہے تاکہ اس انڈیکس کا ریکارڈ مل جائے۔ اور پھر جاوا اسکرپٹ کے document.write فنکشن کی مدد سے وہ HTML کوڈ جنریٹ کیا گیا ہے جس کی مدد سے یہ تصویر ویب پیج میں شامل ہو جائے گی۔

<script>
 
	var images_array = [
		["RoyalBlue", "http://techurdu.org/graphic-design", "https://image.ibb.co/g8tSEx/banner_graphic.png"],
		["#003333", "http://techurdu.org/web-development", "http://image.ibb.co/kLV19x/banner_web.png"],
		["#00cccc", "http://techurdu.org/117", "https://image.ibb.co/gPhXgc/banner_apache.png"],
		["DarkOliveGreen", "http://techurdu.org/46", "http://image.ibb.co/kEUuUx/banner_logo.png"],
		["StealBlue", "http://techurdu.org/177", "http://image.ibb.co/bUGRBc/banner_edit.png"],
		["#4d0000", "http://techurdu.org/103", "http://image.ibb.co/cAqgSH/banner_sanad.png"],
		["#4d004d", "http://techurdu.org/11", "http://image.ibb.co/deQ1z7/banner_website.png"],
		["MidnightBlue", "http://techurdu.org/domain-hosting", "https://image.ibb.co/cgmfZx/banner_domain.png"]
	];
 
	// get a random number within the range of 0 and array size-1
	var index_no = Math.floor((Math.random() * images_array.length) + 1) - 1 ;
	// generate html code to show a random image
	document.write("<div style='text-align:center;background:" + images_array[index_no][0] + "'><a href='" + images_array[index_no][1] + "'><img src='" + images_array[index_no][2] + "'></a></div>");
 
</script>

ویب پیج لوڈ کیے بغیر بدلتی تصاویر دکھائیں

درج ذیل مثال میں آپ دیکھ رہے ہیں کہ پہلے ایک div ٹیگ ہے جس کی id استعمال کرتے ہوئے جاوا اسکرپٹ فنکشن تصویر اور اس کے لنک پر مشتمل کوڈ اس ٹیگ میں شامل کرے گا۔ اس کے بعد script ٹیگ کے اندر جاوا اسکرپٹ کوڈ ہے جس میں موجود فنکشن تصویر دکھانے کے لیے یہ کوڈ جنریٹ کرے گا۔ اس میں موجود کامنٹس کی مدد سے آپ کوڈ سمجھ سکتے ہیں۔

<div id="banner_ad"></div>
 
<script>
 
	index_no = 0;
 
	function showBannerAd() {
 
		var images_array = [
			["http://techurdu.org/html", "https://image.ibb.co/gGK9u7/html.png"],
			["http://techurdu.org/css", "https://image.ibb.co/cKZ3Mn/css.png"],
			["http://techurdu.org/js", "https://image.ibb.co/dbjynS/js.png"],
			["http://techurdu.org/php", "https://image.ibb.co/dLyf1n/php.png"],
			["http://techurdu.org/mysql", "https://image.ibb.co/jqRuSS/mysql.png"],
			["http://techurdu.org/xml", "https://image.ibb.co/kV8r7S/xml.png"]
		];
 
		// insert  html code into banner div
		document.getElementById("banner_ad").innerHTML = "<a href='" + images_array[index_no][0] + "'><img src='" + images_array[index_no][1] + "'></a>";
 
		// after showing all the images set the index_no = 0
		if (index_no == images_array.length - 1) {
			index_no = 0;
		} else {
			index_no = index_no + 1;
		}
 
		 // rerun this function every 4 seconds
		window.setTimeout(showBannerAd, 4000);
	}
 
	// run this function for the first time
	showBannerAd(); 
 
</script>

بدلتی تصاویر کے لیے یہ جاوا اسکرپٹ کوڈ استعمال کیسے کریں؟

• اگر ویب سائیٹ یا ایپلیکیشن ایسی ہے جو فائلز کی بنیاد پر بنائی گئی ہے تو پھر یہ کوڈ (۱) ہوم پیج بینر کے لیے انڈیکس فائل میں (۲) جبکہ چھوٹے اشتہارات کے لیے ایسی فائل میں محفوظ کریں جو ویب سائیٹ کے ہر ویب پیج میں شامل کی گئی ہو۔
• اور اگر یہ ویب سائیٹ ورڈ پریس، جوملا یا ڈروپل وغیرہ کی مدد سے بنائی گئی ہے تو پھر اس کے ایڈمن سیکشن سے ایک نیا وجٹ یا بلاک بنا کر اس میں یہ جاوا اسکرپٹ کوڈ محفوظ کریں۔

درج ذیل اسکرین شاٹ میں ڈروپل کی مدد سے بنائی گئی ویب سائیٹ پر اس جاوا اسکرپٹ کوڈ کا استعمال دکھایا جا رہا ہے۔ (1) ایڈمن سیکشن میں لاگ ان ہونے کے بعد نیا بلاک بنائیں۔ (2) بلاک باڈی کے سیکشن میں جاوا اسکرپٹ کوڈ شامل کریں۔ (3) ٹیکسٹ فارمیٹ کے سیکشن میں فل ایچ ٹی ایم ایل کا آپشن منتخب کریں۔ (4) ریجن والے سیکشن میں یہ بتائیں کہ یہ بلاک ویب سائیٹ تھیم کے کس حصے میں دکھایا جائے۔ (5) ویزیبلیٹی کے سیکشن میں یہ بتائیں کہ ویب سائیٹ کے کون سے ویب پیجز پر یہ بلاک دکھایا جائے گا۔