تبلیغات

تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده

تبلیغات
تبلیغات تبلیغات

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

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='http://dl.20script.ir/img/ads-468-red.jpg' alt='تبلیغات'></a>";
images[1] = "<a href = 'http://www.20script.ir/ads/'><img src='http://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="http://dl.20script.ir/img/1-random-images.png";
width = "124"
height = "124"
}
if (AdNumber==2)
{
url="http://www.20script.ir/";
Graphic="http://dl.20script.ir/img/2-random-images.png";
width = "124"
height = "124"
}
if (AdNumber==3)
{
url="http://www.20script.ir/";
Graphic="http://dl.20script.ir/img/3-random-images.png";
width = "124"
height = "124"
}
if (AdNumber==4)
{
url="http://www.20script.ir/";
Graphic="http://dl.20script.ir/img/4-random-images.png";
width = "124"
height = "124"
}
if (AdNumber==5)
{
url="http://www.20script.ir/";
Graphic="http://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>

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

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

موفق باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
ثبت نام در بروکر فارکس با قابلیت واریز و برداشت به صورت ریالی کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=23803
کلمات کلیدی پست :
مطالب مرتبط
4,048جلوگیری از حذف مطالب توسط نویسنده ها در وردپرس تاریخ : 2018/07/13
5,483افزونه قدرتمند تگ گذاری روی تصاویر wpStickies نسخه 2.1.1 تاریخ : 2015/01/6
2,320نمایش خلاصه مطالب در برگه وردپرس تاریخ : 2019/04/28
5,862جستجوگر تمام صفحه برای وردپرس با افزونه Full Screen Search Overlay تاریخ : 2017/04/30
2,512نمایش جدیدترین کاربران در وردپرس بدون افزونه تاریخ : 2019/04/26
19,558افزونه وردپرس نمایش مطالب پربازدید WordPress Popular Posts تاریخ : 2015/02/22
3,044آموزش افزایش امنیت صفحه ورود وردپرس تاریخ : 2019/07/7
3,256۳ روش برای مبارزه با دیدگاه های اسپم در وردپرس تاریخ : 2018/10/7
5,549اسکریپت مدیریت محتوای Sitemakin and Cloner نسخه 1.4 تاریخ : 2015/11/18
5,143مخفی کردن نوشته ها از صفحه ی اصلی در وردپرس تاریخ : 2016/12/23
8,029دانلود قالب وردپرس بنگاه تبلیغاتی FlatAds تاریخ : 2017/02/18
11,793افزونه فارسی لایک مطالب I Recommend This برای وردپرس تاریخ : 2015/01/18
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
شرکت سئو سایت
تبلیغات
تبلیغات
تبلیغات
تبلیغات
تبلیغات