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

دسته بندی: جاوا اسکریپت
زمان مطالعه: 2 دقیقه
۱۷ شهریور ۱۳۸۹

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

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

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

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

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

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

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

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

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

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

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

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

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

photos[4]="ImageUrl"

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

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

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

 

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

 

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

چه امتیازی به این مقاله می دید؟
نویسنده لقمان آوند
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

مهران

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

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

ممنون

erfan1

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

میلاد حیدری

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

erfan1

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

میلاد حیدری

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

erfan1

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

behzadkhan2012

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

shiva

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

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

لقمان آوند

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

اسماعیلی

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

لقمان آوند

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

saye00

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

mrg1367

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

mrg1367

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

mrg1367

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

لقمان آوند

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

mrg1367

حالا نميشه خودتون بنويسيد بعداينجا بزاريش ….شرمنده كارم گيره ها !

لقمان آوند

آلبوم رو تصحیح کردم .
به صورت خودکار هر کی ازش استفاده می کرده تصاویرش هر 5 ثانیه عوض میشه …
موفق باشید .

mrg1367

مثلا چه تغييري ؟

لقمان آوند

از SetTimeOut و یه تابع بازگشتی باید استفاده کرد .