ارزدیجیتال
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند

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

 

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

آموزش نمایش عکس و بنر تصادفی random image

 

قرار دادن بنر ها و تصاویر تصادفی به صورت PHP

Random Image نام یک اسکریپت رایگان می باشد که برپایه PHP است و بی نیاز به هیچگونه نصب و پایگاه داده ها می باشد و فقط کافیست بعد از دریافت فایل های پی اچ پی را در جایگاه مناسبی در هاست خود قرار دهید و بعد فایل با نمونه کدی که زیر قرار داده شده را برای فراخوانی تصاویر پوشه که مشخص کرده اید استفاده نمایید.

<li>
<p>Type 1, default images folder:<br />
<img src="randim.php?type=1"></p>
</li>

<li>
<p>Type 2, default images folder:<br />
<img src="<?php $_GET['type']=0; include 'randim.php'; ?>"></p>
</li>

<li>
<p>Type 1, folder <i>images2</i>:<br />
<img src="randim.php?type=1&folder=images2"></p>
</li>

<li>
<p>Type 2, folder <i>images2</i>:<br />
<img src="<?php $_GET['type']=0; $_GET['folder']='images2'; include 'randim.php'; ?>"></p>
</li>

قابل به ذکر است که با ویرایش فایل randim.php به آسانی می توانید فرمت های دلخواه تصاویر یا بنر خود را اضافه کنید. در حال حاظر تصاویر با فرمت [ jpg , gif , png ] پشتیبانی می شود. برای دانلود اسکریپت کلیک کنید.

 

افزونه وردپرس قرار دادن بنر ها و تصاویر تصادفی Random Banner

Random Banner نام یک افونه رایگان برای وردپرس می باشد که توسط آن به آسانی می توانید تصاویر و بنر های تصادفی یا همان رندوم بساید و با استفاده ا شورت کد به آسانی آنهارا در هر کجای وب سایت یا حتی درون برگه یا مطالب وب سایت وردپرسی خود قرار دهید ا قابلیت های برجسته آن می توان به دسته بندی بنر ها , قابلیت اعمال محدودیت در نمایش بنر در روز و همچنین بخش مدیریت قدرتمند این پلاگین اشاره نمود. برای دریافت این افزونه وردپرس کلیک کنید.

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

 

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

در مثال آورده شده در زیر برای نمونه، ۳ تصویر با نام دلخواه و  فرمت  gif انتخاب کردم.

  • headerimage_1.gif
  • headerimage_2.gif
  • headerimage_3.gif

دوست دارید این تصاویر در کجا به صورت تصادفی نشان داده شوند؟ کافیست تا کد زیر را در همان قسمت بنویسید.

<img src="http://path_to_images/headerimage_<?php echo(rand(1,3)); ?>.jpg"
width="image_width" height="image_height" alt="image_alt_text" />

البته این کد تنها مخصوص وردپرس نیست و با هر سیستمی که بر مبنای php است کار می کند. حال به صفحه مورد نظر رفته و هنرنمایی خود را مشاهده کنید. به همین سادگی شما می توانید وب سایت خود را از یکنواختی نجات دهید.

 

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

این روش بسیار ساده و آسان می باشد کافیست بنر های خود و لینک جایگزین بنر های تستی قرار دهید و از آن استفاده نمایید . قابل به ذکر می باشد که اگر می خواهید تعداد بیشتری بنر برای تصادفی کردن ایجاد کنید بخش images[0] شماره هر بنر را به میزان تعداد بنر ها قرار دهید مثل کد زیر عمل کنید.

<script type="text/javascript">
//store the quotations in arrays www.20script.ir
var images = [], 
index = 0;

images[0] = "<a href = 'http://www.20script.ir/ads/'><img src='https://dl.20script.ir/img/ads-468-red.jpg' alt='تبلیغات'></a>";
images[1] = "<a href = 'http://www.20script.ir/ads/'><img src='https://dl.20script.ir/img/ads-468-blue.jpg' alt='تبلیغات'></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
//done by http://www.20script.ir
</script>

[ تست آنلاین ] برای تست صفحه را رفرش کنید

 

2- کد نمایش عکس و تصاویر تصادفی با جاوا اسکریپت

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

<script type="text/javascript" language="JavaScript">// <![CDATA[
 // by http://www.20script.ir/
// !!! 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://www.20script.ir/";
Graphic="https://dl.20script.ir/img/1-random-images.png";
width = "124"
height = "124"
}
if (AdNumber==2)
{
url="http://www.20script.ir/";
Graphic="https://dl.20script.ir/img/2-random-images.png";
width = "124"
height = "124"
}
if (AdNumber==3)
{
url="http://www.20script.ir/";
Graphic="https://dl.20script.ir/img/3-random-images.png";
width = "124"
height = "124"
}
if (AdNumber==4)
{
url="http://www.20script.ir/";
Graphic="https://dl.20script.ir/img/4-random-images.png";
width = "124"
height = "124"
}
if (AdNumber==5)
{
url="http://www.20script.ir/";
Graphic="https://dl.20script.ir/img/5-random-images.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><br>'); 
document.write('</a>'); 
document.write('</center>');
 // by http://www.20script.ir/
// ]]></script>

[ تست آنلاین ] برای تست صفحه را رفرش کنید

اگر سوالی یا مشکلی در استفاده این آموزش ها داشتید ما در تالارگفتگو منتظر شما هستیم 🙂

موفق باشید.

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 5 / 5. تعداد رای : 1

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=23803
کلمات کلیدی پست :
مطالب مرتبط
12,810افزونه صلوات شمار برای وردپرس تاریخ : 2015/10/26
7,392آموزش تغییر پیشوند جداول وردپرس تاریخ : 2019/06/21
5,324افزودن پرونده ی چند رسانه ای در وردپرس تاریخ : 2019/06/15
11,364آموزش ساخت فرم ورود در وردپرس با گرویتی فرم تاریخ : 2019/11/1
9,635دانلود قالب چندمنظوره Krwn برای وردپرس تاریخ : 2015/04/27
2,052انتقال کاربر به صفحه تشکر بعد از ثبت نظر در وردپرس تاریخ : 2023/11/7
10,172حل مشکل ایجکس هنگام قرار دادن رمز بر روی wp-admin تاریخ : 2015/08/6
9,287نحوه حذف کدهای کوتاه بدون استفاده از وردپرس تاریخ : 2016/03/23
9,252حل مشکل محدودیت منو در وردپرس تاریخ : 2018/08/1
37,545دانلود قالب وردپرس Hueman فارسی نسخه 2.2.2 تاریخ : 2015/04/1
11,973افزونه وردپرس آخرین عکس های ارسالی توسط کاربران در اینستاگرام تاریخ : 2015/03/18
10,632افزونه اسلایدر واکنش گرا Cloud Slider برای وردپرس تاریخ : 2016/07/3
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file