کد نمایش عکس و تصاویر تصادفی

چندین سال پیش اون اوایل کارم که روی وبلاگ کار می کردم به این فکر افتادم که یک فال حافظ درست کنم ، برای همین یک تعداد تصویر آپلود کردم و این کد یا اسکریپت رو گذاشتم تا هر بار یک عکس رو به کاربر نشون بده.شما تعدادی عکس آپلود می کنید و با استفاده ازین کد هر بار یک عکس که دارای سایز و لینک دلخواه شما هم می باشد رو به صورت شانسی و رندوم انتخاب می کنه و نشون میده که یک دمو هم ازش در انتهای مطلب قرار دادم.

کد تصاویر تصادفی

اسکریپت یا کدی که در زیر قرار دادم به صورت جاوااسکریپت هستش که می تونید داخل صفحات و قالب سایت یا وبلاگ خودتون ازش استفاده کنید ، و همینطور می تونید اونو به صورت js ذخیره کنید و فقط آن را فراخوانی کنیدش ، که اگر فراخوانی رو هم بلد نیستید من در آخر یه کوچولو بهش اشاره می کنم.

<script type="text/javascript" language="JavaScript">// <![CDATA[

// !!! Reload page
// add 1,2,3 'img'
var NumberOfAds = 5;
var now = new Date()
var sec = now.getSeconds()
var AdNumber = sec % NumberOfAds;
AdNumber +=1;
if (AdNumber==1)
{
url="http://doctorwp.com";
Graphic="https://doctorwp.com/wp-content/uploads/2013/03/1.png";
width = "124"
height = "124"
}
if (AdNumber==2)
{
url="http://doctorwp.com";
Graphic="https://doctorwp.com/wp-content/uploads/2013/03/2.png";
width = "124"
height = "124"
}
if (AdNumber==3)
{
url="http://doctorwp.com";
Graphic="https://doctorwp.com/wp-content/uploads/2013/03/3.png";
width = "124"
height = "124"
}
if (AdNumber==4)
{
url="http://doctorwp.com";
Graphic="https://doctorwp.com/wp-content/uploads/2013/03/4.png";
width = "124"
height = "124"
}
if (AdNumber==5)
{
url="http://doctorwp.com";
Graphic="https://doctorwp.com/wp-content/uploads/2013/03/5.png";
width = "124"
height = "124"
}
document.write('<center>');
document.write('<a href=\"' + url + '\">');
document.write('<img src=\"' + Graphic + '\" width=') document.write(width + ' height=' + height + ' '); document.write('border=0>
');
document.write('</a>');
document.write('</center>');
// ]]></script>

فقط چند نکته رو ذکر می کنم.

در اول کد تعداد مجموع تصاویری که هستن و باید به صورت تصادفی از بین آنها انتخاب شود ذکر شده ، شما باید اون عدد 5 رو که الان هستش را به تعداد تصاویر خودتون تغییر بدید.

همونطور که می بینید من پنج تصویر رو داخل اسکریپت گذاشتم ، شما اگر تعداد تصاویرتون بیشتر یا کمتر هستش خودتون طبق همون فرمولی که مشخصه از داخل کد تصویر اضافه و یا کم کنید.

همونطورم که میبینید شما می توانید برای هر تصویر به صورت جداگانه لینک و سایز نمایش انتخاب کنید که برای تصاویر من 124 در 124 هستش و لینک سایت خودم ، شما تغییرش بدین.

فراخوانی فایل اسکریپت

مطلب بالا برای تصاویر تصادفی تمام شد ، ولی اگر دوست دارید تا کد بالا رو جداگانه به صورت js ذخیره و آپلود کنید ، فقط کافیه که با یک خط کد زیر اون رو در قالب خودتون فراحوانی کنید.

<script type="text/javascript" language="javascript" src="http://.../code.js"></script>

همونطور که دیدید باید آدرس فایل آپلود شده رو وارد کنید.

همچنین در مطالب دیگر سایت کد نمایش جملات تصادفی و قصار رو قرار داده ایم که می تونید از اون کد هم استفاده کنید.

———

مشاهده دموی اسکریپت تصاویر تصادفی – صفحه باز شده رو رفرش کنید تا ببینید هر بار تصویر تصادفی میاره.

این آموزش به درخواست آقا محمد از بازدیدکنندگان سایت نوشته شد ، با تشکر از ایشون.اگر شماهم مطلبی مدنظر دارین بگین تا ما دربارش بنویسیم.ممنون