campaign-edianeh-98

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



visibility  
mode_comment   ۶۱

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

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

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

آلبومی که در اون تصاویر با سایز کوچک نمایش داده میشود و با زدن دکمه 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  <=

 

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

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران
mohssen

با سلام خدمت شما

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

لقمان آوند : سلام
دوست عزیز ما در این آلبوم برای هر آدرس 1 عکس داریم که در آلبوم نمایش کوچک اون رو می بینیم و با کلیک روی هر عکس بزرگ شدشو .

sonar

با سلام و آرزوی توفیق

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

ممنون

mohssen

با سلام خدمت شما !
آقای مهندس ، این کد آلبوم در وبلاگ امتحان کردم نمایش داده میشه اما در سایت من نمایش داده نمیشه . در سایت من این امکان وجود داره که از کدهای Html استفاده بشه مثل کدهای آمار و خبر نامه و … ولی وقتی کد شمارو کپی میکنم هیچی نمایش داده نمیشه !!!؟؟؟
میخواستم بدونم آیا من یه جای کار رو اشتباه میکنم یا کد شما مخصوص وبلاگه ؟؟؟
ممنونم از زحمات شما

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

parmis

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

میلاد

این کد رو بین چه تگی باید گذاشت

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

Sina

سلام دوست من.نماز و روزه هاتون قبول.
من یه سوالی داشتم،البته در باره این مطلب نیست.
من از سایتwww.teh-music.net یه سریالی دانلود کردم که این سریال زیر نویس نداره.ولی خود سایت تهران موزیک زیر نویس شو به صورت جدا برای دانلود گذاشته و من هم دانلود کردم.ولی حالا نمی دونم که چه طور باید این و اجرا کنم.
پسوند هایی هم که داره:IDX و Sub.
می خواستم اگر امکانش هست من و راهنمایی کنید.
با تشکر

پاسخ نویسنده(حمزه فیضیان) :
درود بر شما. دوست عزیز زیرنویسهایی که میگید خیلی راحته ، راحترینش اینه که فایل فیلم و زیرنویسها رو همه رو به یه اسم بنویسید مثلا Movie بعد توی یه پوشه بندازید و فیلمتون رو با نرم افزاری مثل KmPlayer پخش کنید. زیرنویستونم به نمایش در میاد. یا اینکه فیلم رو با نرم افزاری که گفتم پخش کنید و بعد زیرنویس رو درگ کنید توی فیلم یعنی یکی از فایلهای زیرنویس رو بگیرید و بکشید توی فیلم. موفق باشید…

صادق

درود بر شما دوست عزیز

من از مشتری های دائم سایت شما هستم ولی هر بار که می خواستم نظری را برای شما ارسال کنم صفحه با ارور مواجه شد . بگذریم !
فونت وبلاگ من خیلی درشت و زشت هستش . می خواستم بدونم که چه جوری میشه فونت وبلاگ را تغییر داد ؟ منظورم سرتیتر منو ها یا پست های وبلاگم هستش . می خواستم اندازه و نوع اون ها رو تغییر بدم و اون ها را کوچک کنم

از لطف شما بسیار ممنونم . خدا نگهدار

صادق

درودی مجدد بر شما !!!!

من 2 دونه سوال دیگه داشتم

1 . چگونه میشود در سرویس میهن بلاگ بالای پست ها یه پست ثابت ایجاد کرد ؟
2 . توی بعضی از وبلاگ ها وقتی روی لینکی می روی توی یه کادر زیبا پیشنمایشی از اون لینک به نمایش در می آید . یا وقتی روی عکسی می روی باز به همان نحو توضاحاتی از عکس می آید یا وقتی رو هدر وبلاگ می روی توی همون کادر زیبا اسم یا توضیحات وبلاگ می آید . میشه آموزش اینکار را بذاری ؟

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

خدا نگهدار

احمدرضا-

سلام
ببخشید که سوالم رو واضح نگفتم.
من میخواهم کدی باشد مثل مثال زیر:
اگه متن زیر به هم ریخته است اون رو تو notepad کپی کنید شاید درست شد و اگر هم بازم به هم ریخته بود بهم بگید!

#code{Code Dar Style}

در اینجا هر کد اچ تی ام الی بنویسیم غیر فعال است و مرورگر آن را نمی خواند مثل متنی که در تگ textarea قرار دارد

امیدوارم که اینبار منظورم رو فهمبده باشید.
قربان شما
احمدرضا-

احمدرضا-

درود
من مثالم رو در بالا کامل نوشتم ولی انگار که تو قسمت نظرات کد html قبول نمیکنه!
من چه گونه میتونم این کدها رو براتون بگذارم؟

احمدرضا-

سلام
ببخشید که سوالم رو واضح نگفتم.
من میخواهم کدی باشد مثل مثال زیر:
اگه متن زیر به هم ریخته است اون رو تو notepad کپی کنید شاید درست شد و اگر هم بازم به هم ریخته بود بهم بگید!
<!–

#code{code dar style}

در اینجا هر کد اچ تی ام الی بنویسیم غیر فعال است و مرورگر آن را نمی خواند مثل متنی که در تگ textarea قرار دارد

–>

صادق

درود بر شما دوست عزیز

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

ممنونم

Sina

سلام به دوست خیلی خوبم.خیلی خیلی ممنون از راهنمایی که کردین.خیلی جالب بود.واقعا ممنون.

نوید

با سلام خدمت شما

می خواستم بدونم کدوم سایت هست که فضای رایگان برای ساختن سایتی برای مطالب دانلودی میده؟؟؟؟
بعد میخواستم اگر زحمتی نیست برام کامل توضیح بدین که چه چوری میشه یه فایل رو توی وبلاگ یا وبسایت قرار داد که قابل دانلود باشه حتی چه چوری اسمش کلیکی میشه؟؟؟
اگر براتون زحمتی نیست جوابمو برام ایمیل کنید
navidetrojan@yahoo.com

با تشکر فراوان از شما

صادق

درود بر شما دوست عزیز

اومدم یه عرض ادبی کرده باشم !

خدا نگهدار !!!

محمد

سلام من یک پیشنهاد یا شایدم درخواست دارم شما میدونی که یک سرویس وبلاگ نویسی جدید اومده به اسم تیک بلاگ که امکانات بسیار جدید و بی نظیری داره ولی تنها مشکلی که هست اینه که قالب برای اون تو اینترنت نیست
اگه میشه شما براش بذار چون میدونم در آینده ی نزدیک بهترین سرویس برای وبلاگ نویس ها میشه
ممنون

yas

سلام
من می خوام عکسها ی آلبوم رد از آخر به اول نشون بدم
مثلا اگر من تا photos4 توی آلبوم دارم و بخوام photos5 رو جدیدا اضافه کنم ، می خوام اولین عکسی که نشون میده ،آخرین عکسی باشه که من گذاشتم یعنی ار آخر به اول
ممنون

صادق

درود بر شما

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

صادق

چرا جواب نمی دی عزیز ؟ من منتظرم

صادق

خیلی نامردی

ebrahim

kheli aliiiiiiiiiiiiii bod

سعید

سلام اگه میشه این کد را به صورت متحرک کنید(تصاویر پشت سرهم)

4060502014

na:D

زهره

http://www.pixlr.com/editor/
لطفا آدرس فایل فلشش رو بدین داخل سورس کد شده

محمد

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

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

محمد

سلام استاد :خوبی؟اخه فدات بشم این کد با هر بار بارگذاری سایت یک تصویر رو نشون نمیده .همیشه یک تصویر ثابت هست باید روی دکمه next کلیک کنی تا بره تصویر بعدی.البته شرمنده شاید من یا مرورگرهام اینطوری میبینیم ولی اینی که من میبینم اصلا ربطی به سوالم نداشت شما داخل مطلب بالا کجا نوشتید البوم تصادفی البوم تصادفی اسمش روش هست هر بار یک تصویر ولی تصادف این البوم دست خودته باید روی next کلیک کنی تا عکس بعد رو ببینی درسته .یا بازم دارم اشتباه میکنم

محمد

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

ابوالفضل

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

هادی

آقا خیلی ممنون. واقعا خیلی جالب و بدرد بخور بود. انشاا… که موفق باشین.

محدثه

سلام دوست عزیز من تازه وب سایت شما رو پیدا کردم مطالب خیلی مفیدی داره از کمکهای بی دریغتون متشکرم

مهتا

سلام ممنون از اینکه به سوالای ما جواب می دید . من کد آلبوم رو استفاده کردم اما اشکالی که وجود داره و خیلی هم مهمه من از این آلبوم می خوام در یک سایت رسمی و دولتی استفاده کنم که اجازه تبلیغ هیچ سایت یا وبلاگی و نداره . در این آلبوم وقتی که برای رفتن به عکس بعدی دکمه نکست رو می زنیم تبلیغه”بهترین کدهای جاوا اسکریپت در سایت…” میاد . به خاطر همین من نمی تونم از این کد در سایتم استفاده کنم لازم به ذکره سایت ما یه سایت خبر رسانی در مورد دانشگاهه منظورم اینه که تجاری نیست. البته من متوجه هستم که از سایت خوب و مفید شما همه باید خبر دار بشن اما قبول کنید که بعضی موارد مثل من یه کمی خاصه بنابراین خواهش می کنم کد آلبوم رو بدون معرفی سایت خودتون برام تا برام قابل استفاده باشه ممنون از اینکه شرایط کاری من و درک می کنید

سارا

لقمان عزیزم دلم فدای اون نگاه تو عاشقت شدم!!!

مهتا

سلام خوبید ؟چرا جواب سوالم و ندادید من منتظرم

مهتا

سلام من نا امید شدم چرا جواب سوالاتم و نمی دید

saber

ممنون خوب بود.

جواد

خیلی عالی بود واقعا ممنونم

www.saeedtour.blogfa.com

عالی بود مرسییییییییی

raha20

سلام من میخوام قالب درست کنم برای وبلاگ ولی بلد نیستم البته با کدهای htmlآشنا هستم ولی نمیدونم چه جوری این کدها رو قرار بدم تا قالب درست بشه ممنون میشم یاد بدید 🙁 🙄

لقمان آوند

سلام . اول از همه باید با html و CSS خوب آشنا بشی . بعد برای هر سرویس وبلاگ دهی که می خوای قالب درست کنی باید کدهاشو بگیری و ازشون استفاده کنی .(مثلا این صفحه راهنما و کدهای طراحی قالب برای بلاگفا هست) هر سرویس یه سری کدها داره که میگه مثلا با قرار دادن این کد در قالب پستها نشون داده میشه و …

mrg1367

سلام آقای آوند …..یه سوال اینکه اگه بخوایم این عکسا خودشون به طور خودکار پس از مثلا هر 3 ثانیه تغییر کنه .باید چه کار کنیم ….؟ ینی بدون زدن دکمه next!!!!

لقمان آوند

سلام
خوب باید توی اسکریپت یکم دستکاری کرد …

mrg1367

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

لقمان آوند

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

mrg1367

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

لقمان آوند

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

mrg1367

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

لقمان آوند

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

mrg1367

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

mrg1367

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

saye00

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

اسماعیلی

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

لقمان آوند

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

shiva

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

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

لقمان آوند

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

behzadkhan2012

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

erfan1

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

میلاد حیدری

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

erfan1

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

میلاد حیدری

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

erfan1

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

مهران

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

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

ممنون

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :