شرح إنشاء ألبوم صور بتقنية جافا وإضافة تأثير الصندوق الذكي لفتح الصور java + css

[abohmam]

بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

السلام عليكم ورحمة الله وبركاته

حياكم الله جميعا

كما وعدتكم فى شرح لهذا التأثير الرائع لإنشاء ألبوم صور بإستخدام تقنية جافا لفتح الصور والذى سأل عنه الكثير من الأخوة

أقدمه لكم اليوم سائلا المولى الإستفادة من الشرح والتوفيق للجميع فى التطبيق .

هذا مثال تقريبي لما سنقوم بشرحه

وهو يعتمد على وضع صورة مفردة ( لايمكن الإنتقال منها لغيرها )
وكذلك مجموعة الصور كألبوم ( يمكن التنقل بينهم من خلال سهم يظهر أعلى الصورة عند لمسها بالماوس )

http://www.abc4web.net/vb/uploaded/1_11265807326.png (http://www.abc4web.net/vb)

نستعرض المثال على الطبيعة

:abc4web: (http://www.abc4web.net/abc4web_java/abc4web.net_gallery/)

خطوات الشرح :

لايوجد شرح كثير فقط ساقوم بالتوضيح لأماكن الصور والكود الذى يجب خلف كل صورة ليعمل التأثير المطلوب

نبدا بتحميل المثال والملفات من المرفقات
:at:

وبعد فك الضغط سوف نحصل على هذا المجلد

http://www.abc4web.net/vb/uploaded/1_01265808495.png (http://www.abc4web.net/vb)

مايخصنا فقط منه ملف index.htm + مجلد الصور images

نقوم بفتح ملف index.htm فى محرر الأكواد الخاص بنا مثلا برنامج فرونت بيج

سنجد بعض الأكواد لاتنزعج سوف نقوم بفك الطلاسم

http://www.abc4web.net/vb/uploaded/1_11265808495.png (http://www.abc4web.net/vb)

هذا راس الصفحة والمهم فيه ربط الصفحة بأكواد Java + ملفات CSS وهذه مهمة جدا ويجب أن لاتقترب منها
فقط تستطيع تغير عنوان الصفحة غير هذا سوف لايعمل التأثير .

:bar:

الجزء الثاني مكان وضع الصور وطريقة ربطها بالتأثير وسنجده بهذا الشكل

http://www.abc4web.net/vb/uploaded/1_01265809140.png (http://www.abc4web.net/vb)

وهذه الصورة يتم وضعها بالطريقة العادية وربطها بالصورة التى تريد تكبيرها ولكن نضع هذا الكود
rel='lightbox'
فى آخر كود ربط الصورة

ليكون الكود بالشكل التالي :
مسار الصورة ( مع تحديد حجم العرض ) + مسار الصورة التى ستفتح + rel='lightbox'



<a href="images/madinah_03.jpg" title='www.abc4web.net' target='_blank' rel='lightbox'>
<img border="0" src="images/madinah_03.jpg" width="200" height="150"></a>

<!-------------->


تستطيع وضع هذا الكود كاملا فى أى مكان تريده من الصفحة مع تحديد مقاس عرض الصورة كما تريدها أن تظهر

:bar:

الجزء الثالث يطابق الجزء الثاني مع تغير كود ربط التأثير بإستخدام هذا الكود

rel="lightbox[atomium]"

آخر كود ربط الصورة كما هو موضح فى الصورة التالية

http://www.abc4web.net/vb/uploaded/1_11265809140.png (http://www.abc4web.net/vb)

وسيكون الكود بهذا الشكل


<a href="images/mekka_03.jpg" rel="lightbox[atomium]">
<img border="0" src="images/mekka_03.jpg" width="150" height="100"></a>


وكما تشاهدون قمت بتكرار الكود مع تغير أسماء الصور لنحصل على ألبوم من الصور يرتبط ببعضه .

وتمتع بالتأثير والبوم صور وحركات لولبية فى عرض الصور

أتمنى أن يكون الشرح سهلا وواضحا وأكيد بعد تحميل المثال ومشاهدته خلال أى محرر أكواد سيزداد الإيضاح

مع أجمل تحية للجميع

ولاتنسونا من صالح دعائكم

أبوهمام
.

[كينج نت]

السلام عليكم ورحمة الله وبركاته

ماشاء الله عليك أخي العزيز أبوهمام

ابداع واناقه مميزة جداً جداً بالشرح والمضمون للموضوع

اعتقد بعد كل هذه الجهود المباركه من شخصك الكريم

فأن الجميع سيكون قد اصبح لديه فكره جيداً جداً عن هذه التقنيات

ومعرفت استخداماتها والتعامل معها للاستفاده منها بمختلف الاعمال

جزاك الله عنا كل خير وبارك بجهودك الطيبه

وجعل مثواك ومن تحب وسائر المسلمين الجنه

أكيد لنا عو]ه بالتطبيق لمتابعة المشوار والاستفاده بإذن الله تعالى

مجدداً اكرر شكري لمجهوداتك الطيبه .

:abc_152:

.

[ابو فاطمة]

عليكم السلام ورحمة الله وبركاته

صلى الله عليه وسلم


عاشت الايادي ياالغالي تسلم عيني باردة عليك ياالغالي

[abohmam]

حياك الله أخى كينج نت

أشكر لك تواجدك العطر وكلماتك المشجعة

نعم كما تفضلت أتمنى أن يستفيد الجميع من مثل هذه التطبيقات ونرى ثمرات مايتم نشره للجميع

أتوقع أن نرى إبداعا من الجميع إن شاء الله

[abohmam]

حياك الله أخى أبا فاطمة

أتمنى أن نرى تطبيقا مميزا لك

موفق بإذن الله ... لك مني أجمل تحية .

[ابو فاطمة]

الله محي اصلك ياالغالي صراحة ماقدر اوعدك ان شاء الله لان عندي امتحانات في الدراسة اسئل الله التوفيق واحصل على الشهادة ان شاء الله ماخيب ضنك بي فديتك اخوي فقط نفسي اتابع ابداعك وارد عليه حتى يكون موضوع محفوض عندي واراجعه على مهل

[محمود عفيفى]

السلام عليكم ورحمة الله وبركاته
جزاك الله خيرا أخى أبو همام
بإذن الله سأضع تطبيق :abc_152:

[الدمشقي]

درس راااائع ومفيد بكل تأكيد
جمعنا الله وإياك بالحرم المكي المبارك
وجزاك عنا خير الجزاء
:abc_022::abc_022:

[ذوالجناح]

جزاك الله خيراً أستاذنا القدير
جاري التطبيق إن شاء الله

[ذوالجناح]

وهذا تطبيقي:

http://www.zshare.net/download/7246816763c4fdec/

[أبو يوسف]

جزاك الله خيرا أخي أبو همام وبارك الله فيك

[abohmam]

حياك الله أخى ذا الجناح

وماشاء الله تطبيق رائع ومطابق للمثال :abc_051:

وحياك الله أخى الفاضل أبو يوسف على المرور العطر والتواصل

بالتوفيق إن شاء الله

[رائد ابو فيصل]

وعليكم السلام ورحمة الله وبركاته

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

موفق بإذن الله ... لك مني أجمل تحية .

[abohmam]

بارك الله فيكم جميعا إخواني

أشكر لكم مروركم العطر وتواصلكم

كنت ناوى أضع تصميم آخر واسلوب احترافي لتأثيرات الجافا فى فتح الصور !!!

ولكن بدون تطبيقات يبقى مافى داعي :abc_006:

نبحث عن شئ آخر نشرحه ان شاء الله

بالتوفيق

[أبوالبراء]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[محمد السالم]

السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[مسدار]

الصراحة بحثت كثيرا عن هذا التأثر

مشكوووووووور

الله يعطيك العافية

[المغربي الجديد]

جزاك الله خيرا
سنحاول التطبيق
فان نجح سنرفعه وإلا فلا عين رأت ولا أذن سمعت
تسلم الأيادي

[نوكيا]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[كويمكس]

جزاك الله خيرا

[الوردة الجورية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
جزاك الله كل خير
فى أمان الله
:abc_152::abc_028::abc_152:

[هشام الجزائري]

السلام عليكم ورحمة الله وبركاته
جميل و متقن يا اخي:abc_152:
موفق بإذن الله ... لك مني أجمل تحية .

[جروح بارده]

تسلم ايدك على المشاركه الراائعه

بانتظار جديدك بشغف

وفقك الله

[ظلام الليل]

thank u dude:abc_138:

[abohmam]

بارك الله فيكم جميعا

اشكر لكم مروركم العطر وتواصلكم الجاد

:abc_152:

[جريح المحبة]

السلام عليكم ورحمة الله وبركاته

يعطيك العافية على الشرح

جاري التحميل والتجربة


خالص تحياتي

[البغرامي]

السلام عليكم ورحمة الله وبركاته اخي ابوهمام جعل الله لك هذا الدرس في ميزان حسناتك ،، والله استفدت منه كثيرا ،، شكرا لك ،،

[abohmam]

بارك الله فيكم جميعا

اشكر لكم مروركم جميعا

موفقين ان شاء الله

[فلسطيني]

تسلم يداك اخي ابو همام .. بارك الله فيك

[مجاهد عصام]

جزاك الله كل خير

[حمد محمد]

http://img258.imageshack.us/img258/2403/61547306.gif

[اسلام الشاعر]

mrssssssssssssssssssssssssssssssssssssssssy

[ابو يزن]

شكرا على جهودك الرائعة موضوع مهم وممتاز

[حاتم البحيصي]

مشكوووووووووووووووووووووو وووووووور:abc_139:

[الإيطــالي]

بارك الله فيك :abc_152:

[هشام حاجي]

جازاك الله كل خير

[محب الجنان]

asddsdsd dfgfgfdgf

[ايمن سالم]

بارك الله فيك يا اخي ابوهمام فهذا درس ممتاز من اخ اكثر من ممتاز
ولن اوفيك حقك لان كلمات الشكر قليلة
واريد منك ان تشرح لنا طريقة تجميع هذه الملفات في ملف تنفيذى بامتداد exe بخلاف برنامج الوين رار
بحيث لايمكن فكة ولك جزيل الشكر
تقبل تحياتى

[أردني]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[محمود عفيفى]

جزاك الله خيرا أخى أبوهمام وبإنتظار المزيد
تطبيقى
http://projects/slimbox/Index.html (http://docma7moud.0fees.net/vb/projects/slimbox/Index.html)

من يريد التحميل
http://www.mediafire.com/?26djed864t5ytoj

[abohmam]

بارك الله فيكم جميعا على مروركم العطر وتواصلكم

والتطبيق رائع أخى محمود تسلم الأيادى

بارك الله فيك يا اخي ابوهمام فهذا درس ممتاز من اخ اكثر من ممتاز
ولن اوفيك حقك لان كلمات الشكر قليلة
واريد منك ان تشرح لنا طريقة تجميع هذه الملفات في ملف تنفيذى بامتداد exe بخلاف برنامج الوين رار
بحيث لايمكن فكة ولك جزيل الشكر
تقبل تحياتى

حياك الله أخى أيمن

من خلال هذا البرنامج المشروح تستطيع ذلك بكل سهولة

http://www.abc4web.net/vb/showthread.php?t=2700

[البهادلي]

:abc_022:شكرااااااااااااااااا� �ااا على هذا الشرح

[بـــرنس]

شكرا جزيلا لك اخي

[حمادةسير]

merci beacoup

[المصمم البارع]

عليكم السلام ورحمة الله وبركاته

صلى الله عليه وسلم


عاشت الايادي ياالغالي تسلم عيني باردة عليك ياالغالي

[داريوس]

[ شـكــ وبارك الله فيك ـــرا لك ...

[شهاب الحمادي]

جزاكم الله كل خير

[محمد بغدادى]

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

السلام عليكم ورحمة الله وبركاته مشكور يا اخى الكريم على هذا المجهود الرائع
:abc_138::abc_138::abc_138::abc_138::abc_138::abc_ 138::abc_138::abc_138::abc_138::abc_138:

[مُحب الأحتراف]

سلمت يداك اخي المبدع المتميز
ربي يسعدك شرح مميز
ومجهود مقدر
اروع تقييم 5/5
خالص ودي وتقديري :abc_152:

[ابولميا]

شكراااااااااااااااااااااا اااا
جزاك الله الف خير

[نسمة الصباح]

درس اكثر من رائع
باارك الله فيك

[ابراهيم ماهر]

مشكوووووووور

[الشبكة]

يسلموووووووووووووووووو

[ابن فلسطين]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[زيرفان]

الف شكرررررررررررررررررر

[عاشق الغريب]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . :abc_139:

[الاسد الجريح]

شكرااااااااااااااا.............. ....بارك الله فيك

[منتوشة]

السلام عليكم ورحمة الله وبركاته السلام عليكم ورحمة الله وبركاته السلام عليكم ورحمة الله وبركاته

ماشاء الله عليك أخي العزيز أبوهمام

ابداع واناقه مميزة جداً جداً بالشرح والمضمون للموضوع

اعتقد بعد كل هذه الجهود المباركه من شخصك الكريم

فأن الجميع سيكون قد اصبح لديه فكره جيداً جداً عن هذه التقنيات

ومعرفت استخداماتها والتعامل معها للاستفاده منها بمختلف الاعمال

جزاك الله عنا كل خير وبارك بجهودك الطيبه

وجعل مثواك ومن تحب وسائر المسلمين الجنه

أكيد لنا عو]ه بالتطبيق لمتابعة المشوار والاستفاده بإذن الله تعالى

مجدداً اكرر شكري لمجهوداتك الطيبه .

:abc_152:

.

[أبو صخر]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[عراقي طيب]

جزاك الله خيرا
موفق

[كيتوو]

:abc_050: شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . :abc_050:

[المرافق الى الجنة]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[محمد عادل]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبو صخر]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أسد الجنوب]

باااااركـــ الله فيك أخي وجعله في ميزان حسناتكـــ

[أبو فارس]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[اشرفasser]

بارك الله فيك

[هيثم الشاعر]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبو الوليد]

تأثير رائع أخي أبا همام ..لو نجحت التجربة معي سأضع تطبيقي إن شاء الله :abc_145:


(file:///C:/Documents%20and%20Settings/kaddour24/Bureau/camera/abc4web.net_gallery/index.htm)

[سعيد الحارثي]

اشكرك على الشرح

[سمارت تريد]

السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[وليد عملوق]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . موفق بإذن الله ... لك مني أجمل تحية .

[الامجاد]

عاشت الايادي ... حقا لمفید‌ة لمن له الرغبة فی البوم فی الموقع:abc_152:

[ايجى كافية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[مغترب]

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[عطر المحبة]

جزاك الله خير

[محمد ميدو م]

بسم الله الرحمن الرحيم

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[بشار غربي]

ان شاء الله يحليك و يغليك و يباعد لبلى عليك

[اليكس نت]

مشكوررررررررررررررررررررر رررررررررر

[مقدسية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[abohmam]

جزاكم الله خيرا جميعا إخواني على مروركم العطر وتواصلكم الجاد

موفقين لكل خير ان شاء الله

[حميد خياط]

السلام عليكم ورحمة الله وبركاته :abc_152:

[إبراهيم مياسي]

بسم الله الرحمن الرحيم
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[الدموكي]

ماشاء الله عليك استاذ ابو همام
شرح رائع كما تعودنا منك
بارك الله فيك
:abc_152:

[فارس الاسلام]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . :abc_052:

[فارس الاسلام]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[حسن جلال]

مشكور
©§¤°مشكور°¤§©
©§¤°مشكورمشكور°¤§©
©§¤°مشكورمشكورمشكور°¤§©
©§¤°مشكورمشكورمشكورمشكور° ¤§©
©§¤°مشكورمشكورمشكورمشكورم شكور°¤§©
©§¤°مشكورمشكورمشكورمشكورم شكورمشكور°¤§©
©§¤°مشكورمشكورمشكورمشكورم شكورمشكورمشكور°¤§©
©§¤°مشكورمشكورمشكورمشكورم شكورمشكورمشكورمشكور°¤ §©
©§¤°مشكورمشكورمشكورمشكورم شكورمشكورمشكورمشكورمش كور° ¤§©
©§¤°مشكورمشكورمشكورمشكورم شكورمشكورمشكورمشكورمش كورم شكور°¤§©

يعطيــــــــــــــــك ألف عــــــــــافيـــــــــــ ــــه

©§¤°مشكورمشكورمشكورمشكورم شكورمشكورمشكورمشكورمش كورم شكور°¤§©
©§¤°مشكورمشكورمشكورمشكورم شكورمشكورمشكورمشكورمش كور° ¤§©
©§¤°مشكورمشكورمشكورمشكورم شكورمشكورمشكورمشكور°¤ §©
©§¤°مشكورمشكورمشكورمشكورم شكورمشكورمشكور°¤§©
©§¤°مشكورمشكورمشكورمشكورم شكورمشكور°¤§©
©§¤°مشكورمشكورمشكورمشكورم شكور°¤§©
©§¤°مشكورمشكورمشكورمشكور° ¤§©
©§¤°مشكورمشكورمشكور°¤§©
©§¤°مشكورمشكور°¤§©
©§¤°مشكور°¤§©
مشكور

[بلال حمة]

شكراااااااااااااااااااااا ااااااااااااااااااااااااا ااااااااااااااااااااااااا ااااااااااا

[القادري]

شكرا جزيلا

[صيانة المشعل]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[مجدى الاعصر]

جزاك الله خيرا

" تم تعديل الرد وربنا يشفي "
الإدارة

[أبو فضل الله]

السلام عليكم ورحمة الله وبركاته

بسم الله الرحمن الرحيم

في أول مشاركة لي أقول لك


جزاك الله خيراً

السلام عليكم ورحمة الله وبركاته

[محمد طاهر]

مشكوووووووووووووووووووووو ووووووور

[رشوان]

السلام عليكم
جزاكم الله خير الجزاء

[خاطر انسان]

جزاك الله خير

وجاري التحقق من الدرس

[مريم المنذري]

جزاك الله كل خير

[عبدوالجوكر]

بارك الله فيك

[abohmam]

حياكم الله اخواني جميعا

أشكر لكم مروركم العطر وتواصلكم الجاد

بالتوفيق

[المريحي]

مشكوووووووووووووووووووووو ووووووووووووور

[راستا]

:abc_087:مشكور اخي علي الموضوع ............ زادك الله بسطة في العلم:abc_139:

[حسام سليمان]

تسلم أخي مشكوووور

[مازن توفيق]

السلام عليكم ورحمة الله وبركاته

ماشاء الله عليك مشكور

[عثماني شعيب]

Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiii

[عشق حياتى]

جزاك الله خيرا أخى

[حسام سليمان]

yslmoooooooooooooooooo

[الطائي]

شكرا كثيرااااااااااااااااا

[كفى بالموت واعظا]

السلام عليكم ورحمة الله وبركاته
ما شاء الله درس رائع
جزاكم الله خير استاذنا الفاضل وبوركت جهودكم

[abohmam]

جزاكم الله خيرا على هذا المرور العطر والتواصل الدائم

موفقين لكل خير دوما ان شاء الله

[مهندس واعد]

جزاك الله خير الجزاء

[انثى الرماد]

مشكور وجزاك الله كل الخير

[abohmam]

جزاكم الله خيرا جميعا إخوانى

أشكر لكم مروركم العطر وتواصلكم ودعائكم

بالتوفيق

[احياني عليك]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[hicham_calme]

بسم الله الرحمن الرحيم:
جزاك الله كل خير أخي الغالي
دمت بخير

[سليمان الفحلي]

رائع جدا بكل ما تحمله الكلمة من معنى

[مستاوى]

السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[abohmam]

جزاكم الله خيرا جميعا إخوانى

أشكر لكم هذا المرور العطر والتواصل الجاد

بالتوفيق

[سامى ابوسريع]

جزاك الله خيرا أخى أبو همام

[طيب يا ناس]

السلام عليكم ورحمة الله وبركاته

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[خالد الصافي]

شكرا حبيبي

[مستربلال]

عاشت يدك يا بطل تسلم ايدك جارى التجربة انا مبتداء css يارب اعرف اتعامل:abc_022:

[بن لقصم المقبلي]

وعليكم السلام ورحمة الله وبركاته
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
موفق بإذن الله ... لك مني أجمل تحية .

[موسلم]

شكرا اخي الكريم مجهود رائع

[محمد الروش]

:abc_022:

مشكور والله يجعله فى ميزان حسناتك ألف مبروك ..
:abc_138: شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . :abc_145:

[لعربيل]

شكرا.......................

[المووووج]

مشكوووووووووووووور

[خادم المسلمين]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[امجدمحمد]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .