• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

کد جاوااسکریپت آلبوم تصاویر در سایت یا وبلاگ شما

36591 ۱۷ شهریور ۸۹

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

به همین خاطر امروز اومدم و یه کد بسیاز زیبا و کاربردی رو براتون آوردم .

کد جاوا اسکریپت یک آلبوم تصاویر با نمایش اسلایدی که عکسهای اون رو خودتون میتونید انتخاب کنید .

آلبومی که در اون تصاویر با سایز کوچک نمایش داده میشود و با زدن دکمه next به تصویر بعدی میرید و با کلیک روی هر تصویر می تونید تصویر اصلی (بزرگتر) رو ببینید . ضمنا در این آلبوم تصاویر بعدی بدون اینکه شما متوجه باشید در پس زمینه لود میشن که باعث سرعت بخشیدن به نمایش تصاویر میشه .

:: نمایش نمونه ی این آلبوم رو می تونید در زیر ببینید :

دوست دارید چنین آلبومی رو با تصاویر دلخواه خودتون در سایت یا وبلاگتون داشته باشید ؟؟؟

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

=> دریافت کد جاوااسکریپت آلبوم تصاویر1  <=

 

و اما توضیحات مربوط به کد :

کد این آلبوم به شکل زیره :

<script language="JavaScript">
albumTitle="آلبوم تصاویر"
photos=new Array()
picIndex=0
photos[0]="http://www.7Learn.com/js/jsAlbum1/a.jpg"
photos[1]="http://www.7Learn.com/js/jsAlbum1/b.jpg"
photos[2]="http://www.7Learn.com/js/jsAlbum1/c.gif"
photos[
3]="http://www.7Learn.com/js/jsAlbum1/d.jpg"
</script>
<script language="javascript" src="http://www.7Learn.com/js/jsAlbum1/jsAlbum1.js"></script>

:: در خطی که با رنگ قهوه ای مشخص کردم ، می تونید تیتر یا عنوان دلخواهی رو برای آبوم خودتون مشخص کنید . تیتر شما در این خط باید درون " " قرار داشته باشد .

:: در قسمتی هم که با رنگ آبی مشخص شده شما می تونید هر تعداد تصویر که بخواهید به آلبومتان اضافه کنید . مثلا در کد بالا 4 تصویر (تصاویر شماره 0 تا 3) قرار دارند . برای افزودن تصویر جدید (تصویر پنجم) این خط رو بعد از چهار خط آبی رنگ اضافه می کنیم :

photos[4]="ImageUrl"

 که  ImageUrl آدرس تصویر جدید هست .

دقت کنید که هر تصویر جدیدی که بخواید اضافه کنید ، شمارش باید یکی (فقط یکی) بیشتر از شماره ی تصویر آخری در کد باشه . در غیر این صورت در نمایش تصاویر ممکنه اخلال بوجود بیاد . مثلا در کد بالا که شماره آخرین تصویر 3 است (به رنگ سبز) ، شماره تصویر جدید 4 میشه ، بعدی 5 و بعدش 6 و ...

:: در صورت تغیر بقیه ی قسمت های کد ،  آلبوم یا تصاویر آن نمایش داده نمیشود .

 

=> دریافت کد جاوااسکریپت آلبوم تصاویر1  <=

 

موفق و پیروز باشید .

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 61 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    فک کنم آپش نکردید …..آخه من دوباره آلبوم رو گرفتم ولی تفییری نکرده !!!

    • ‏‏
      لقمان آوند(۸ خرداد ۱۳۹۱)

      احتمالا کد جاوااسکریپتش کش شده در مرورگرت . کنترل F5 بزن که از نو لود بشه …

  • ‏‏

    ممنون بالاخره درست شد !!! 😛

  • ‏‏

    سلام آقای آوند …کاش خود فایل جاوا اسکریپتشو هم برای دانلود می ذاشتید …..اینجوری تغییر دادن کدها هم برامون امکان پذیره …..بازم ممنون

  • ‏‏

    سلام ممنون از سایت فوق العادتون
    میشه بهم بگین که کد جاوا اسکریپت دکمه های next و previous آلبوم عکس چیه؟

  • ‏‏
    اسماعیلی(۱ مرداد ۱۳۹۱)

    سلام
    ممنون ازسایت عالیتون خواستم ببینم این آلبوم رومیشه سایزش رو بزرگش کرد؟

    • ‏‏
      لقمان آوند(۱ مرداد ۱۳۹۱)

      سلام
      فعلا نه و سایزش در همین اندازه است .

  • ‏‏

    سلام مرسی از سایت خوبتون.میشه آموزش تغییر سایز آلبوم رو هم بدین.خواهش میکنم زود.

    به ایمیلم هم میتونید ارسال کنید 😛

    • ‏‏
      لقمان آوند(۲۶ مرداد ۱۳۹۱)

      سلام
      این آلبوم فعلا سایزش ثابته و قابل تغیر نیست . ان شاءالله در ورژن بعدی این مورد اعمال میشه .

  • ‏‏
    behzadkhan2012(۱۱ شهریور ۱۳۹۱)

    خدا پدر و مادرتو بیامرزه مرد
    خدا سلامتت کنه مرد
    خدا عوضت بده مرد

  • ‏‏

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

    • ‏‏
      میلاد حیدری(۱۲ شهریور ۱۳۹۱)

      کدهای جاوا اسکریپت را در میهن بلاگ بدون هیچگونه محدودیتی و در هر مکانی از قالب وبلاگ خود می توانید قرار دهید ، اما اگر شما می خواهید کدهای جاوا اسکریپت خود را در بخش تنطظیمات وبلاگ اضافه نمائید ، برای تعیین مکان آن ، در بخش قالب شما کلمه کلیدی به نام [cb:blog_script] وجود دارد ، اگر این کلمه کلیدی تغییر مکان دهید ، اسکریپت های شما به نمایش در خواهد آمد ولی اگر دوست دارید اسکریپت های خود را مستقیما در ویرایش قالب وارد نمائید ، می توانید آن را بین دو نگ اسکریپت قرار دهید و ان را قرار دهید

      • ‏‏

        خوب پس [cb:blog_script] رو به چی تغییر بدم.

        • ‏‏
          میلاد حیدری(۱۲ شهریور ۱۳۹۱)

          این کلمه رو تغییر نمیدهند ، فقط میتوانید مکان آن را به جای دلخواه تغییر دهید…

        • ‏‏

          متوجه منظورتون شدم اما باز هم نمیتونم مشکلم رو حل کنم. 😥

  • ‏‏

    ممنون –
    یکمی نیاز به تغییر اندازه داره

    ولی بدرد میخوره

    ممنون

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram