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

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

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

اسکریپت یا کدی که در زیر قرار دادم به صورت جاوااسکریپت هستش که می تونید داخل صفحات و قالب سایت یا وبلاگ خودتون ازش استفاده کنید ، و همینطور می تونید اونو به صورت 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>

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

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

———

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

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

امتیاز شما برای این مقاله
23 نظرات
  1. آرش می گوید

    سلام
    من از این کد میخوام استفاده کنم داخل ویژوال کمپسور میزنم نمیخونه کد رو از کدوم قسمت باید فراخوانی کنم؟؟؟؟

  2. مهرنوش می گوید

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

    1. دکتر آرش حیدری می گوید

      سلام
      اگر تصاویر میخواهین که متحرک باشند باید به صورت gif طراحی و ذخیره بشوند
      با احترام

  3. رضا می گوید

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

  4. حسین می گوید

    سلام اول ممنون از سایت خوبتون
    من از این کد استفاده کردم و مقداری هم کد نویسی بلدم یعنی داخل فراخوانی و ویرایش مشکلی نداشتم
    ولی متاسفانه نمیدونم چرا و کجا مشکل وجود داره که چیزی به نمایش در نمیاد
    آدرس فایل js رو بارها تست کردم و فراخوانی رو حذف و دوباره وارد کردم قالب و چند باز ذخیره کردم
    ولی هیچ هیچ هیچ
    ممنون میشم راهنماییم بکنید چیکار باید انجام بدم

    1. آرش حیدری می گوید

      سلام
      دمو آنلاین قرار دادیم
      http://doctorwp.com/wp-content/uploads/2013/03/random.html
      حتما دارید اشتباه انجام میدید ، دوباره تکرار کنید
      سپاس

      1. حسین می گوید

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

      2. آرش حیدری می گوید

        سلام
        سورس پیج دمو ما رو راست کلیک کنید و نگاه کنید ، همش قابل مشاهده هستش .
        ممنون

  5. عسلی می گوید

    چرا فقط پسرا نظر دادن؟؟؟؟؟ای خدا…

  6. جعفر می گوید

    سلام
    من می خام تعدادی عکس برای ساید بار (بالا پایین راست چپ) بذارم …

    در واقع باید این کد رو تو فایل sidebar.php بذارم و تو فال هدر فراخوانی کنم

    چطور میشه این فایل js تو پوشه js باشه و برای سایدبار فراخوانی بشه ؟
    ممنون

  7. مصطفی می گوید

    سلام من هر کاری کردم نمایش نداد
    یک بار دیگه نحوه فراخوانی کد را می گی
    البته بطور مفصل
    با تشکر

  8. ali می گوید

    ممنون

  9. شایان می گوید

    چجوری میشه تو ابزارک وردپرس ازش استفاده کرد؟

    1. آرش حیدری می گوید

      بستگی یکم به سلیقه خودتون داره … من یه زمانی تو بلاگفا باهاش فال حافظ هم ساخته بودم !

  10. امید می گوید

    سلام.آقا آرش خیلی دیر به دیر جواب میدی . این قسمت پایین پست ها “پیشنهاد می کنیم” کدش چیه ؟؟؟ مطالب به صورت رندوم میاد دیگه نه ؟؟؟

    1. آرش حیدری می گوید

      سلام ، نه افزونه related post via category هستش که مطالب رو که موضوع مشابه نوشته دارند رو میاره.

  11. احسان می گوید

    آقا میشه گذاشتن یک لینک تصادفی همراه با آدرس این تصویرو یاد بدین؟!

    1. آرش حیدری می گوید

      سلام
      کارهای زیادی با این کد میشه انجام داد که نیاز به یکمی خلاقیت داره
      حتما ، در اولین فرصت

  12. شهاب می گوید

    من الان میخوام عکس فال حافظ بذارم که رو اون کلیک کنند فال ها بیان باید چی کار کنم تورو خدا بهم بگوووووووو

    1. آرش حیدری می گوید

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

  13. شهاب می گوید

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

  14. اکبر می گوید

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

    1. آرش حیدری می گوید

      سلام ، هر کجای قالب که این کدها رو قرار بدید یا اصلا اونو به به صورت js ذخیره کنید همون قسمت قالب تصاویر نشون داده میشه.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.