 |
هل هذا أجاكس . . . أرجوا الشرح والتعليم
بسم الله الرحمن الرحيم
إخواني في سوالف
لدي سؤال
أرجوا المساعدة
أولاً
ادخلو إلى هذا الرابط
http://news.syriarose.com/news/1830.html
ستجدون صورة في الخبر
انقروا عليها
سوف تكبر
وتستطيعون سحبها إلى أي مكان بالشاشة
شيء عجيب وغريب
أحببت هذه الحركة . .
أرجوا منكم شرح تفصيلي لكيفية عمل واحدة مثلها
أرجوا أن لا أكون ثقيل عليكم
محبتي من مجد الإسلام . . . مجودة ©
السلام عليكم ورحمة الله وبركاته
أولا: نزل السكربت من هنا Highslide JS - JavaScript thumbnail viewer
ثانيا: انظر المثال example-no-outline.html فهو الموجود بالموقع.
ثالثا: دعواتك لي بالتوفيق.
باختصار أهم شيء بعد تضمين ملف الجافاسكربت و الستايل css هي هذه الخطوة:كود HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Highslide JS</title> <!-- 1 ) Reference to the file containing the javascript. This file must be located on your server. --> <script type="text/javascript" src="highslide/highslide.js"></script> <!-- 2) Optionally override the settings defined at the top of the highslide.js file. The parameter hs.graphicsDir is important! --> <script type="text/javascript"> hs.graphicsDir = 'highslide/graphics/'; hs.outlineType = null; </script> <!-- 3) These CSS-styles are necessary for the script to work. You may also put them in an external CSS-file. See the webpage for documentation. --> <style type="text/css"> * { font-family: Verdana, Helvetica; font-size: 10pt; } body { background-color: silver; } .highslide { cursor: url(highslide/graphics/zoomin.cur), pointer; outline: none; } .highslide-active-anchor img { visibility: hidden; } .highslide img { border: 2px solid gray; } .highslide:hover img { border: 2px solid white; } .highslide-wrapper { background: white; } .highslide-image { border: 2px solid white; } .highslide-image-blur { } .highslide-caption { display: none; border: 2px solid white; border-top: none; font-family: Verdana, Helvetica; font-size: 10pt; padding: 5px; background-color: white; } .highslide-loading { display: block; color: black; font-size: 8pt; font-family: sans-serif; font-weight: bold; text-decoration: none; padding: 2px; border: 1px solid black; background-color: white; padding-left: 22px; background-image: url(highslide/graphics/loader.white.gif); background-repeat: no-repeat; background-position: 3px 1px; } a.highslide-credits, a.highslide-credits i { padding: 2px; color: silver; text-decoration: none; font-size: 10px; } a.highslide-credits:hover, a.highslide-credits:hover i { color: white; background-color: gray; } a.highslide-full-expand { background: url(highslide/graphics/fullexpand.gif) no-repeat; display: block; margin: 0 10px 10px 0; width: 34px; height: 34px; } /* These must always be last */ .highslide-display-block { display: block; } .highslide-display-none { display: none; } </style> </head> <body> <div> <!-- 4) This is how you mark up the thumbnail image with an anchor tag around it. The anchor's href attribute defines the URL of the full-size image. --> <a id="thumb1" href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="images/thumbnail.jpg" alt="Highslide JS" title="Click to enlarge" height="120" width="107" /></a> <!-- 5 (optional). This is how you mark up the caption. The caption must be directly after the anchor above. --> <div class="highslide-caption"> This caption can be styled using CSS. </div> </div> </body> </html>
ولأكون أكثر تحديدا هنا:كود HTML:<a id="thumb1" href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="images/thumbnail.jpg" alt="Highslide JS" title="Click to enlarge" height="120" width="107" /></a>
كود HTML:onclick="return hs.expand(this)"
__________________
سـبـحـان الله، والـحــمــد لله، ولا إلـه إلا الله، والله أكـــبـــــر.
شكراً لك ياعزيزي
مع اني ما فهمت أي شيء
لقد نزلت السكربت
ولكن ماذا أفعل الآن
هل أرفعه ؟
هل هو بحاجة إلى install
ماذا أفعل بالضبط ؟
أنا آسف على كثرة الأسئلة لكن أرجوووك استحملني شوية
محبتي
اذا كنت تريد استخدام السكربت ينبغي أن تكون لديك معرفة بالـHTML
وإلا كيف ستصمم صفحة؟
السكربت لا يحتاج إلى install ولكن يجب أن تعرف طريقة استخدامه.
عموما ارفع المجلد وادخل على الأمثلة الموجودة في المجلد وآمل أن تفيدك.
__________________
سـبـحـان الله، والـحــمــد لله، ولا إلـه إلا الله، والله أكـــبـــــر.
طبعاً عزيزي
لدي دراية تامة بال html
على العموم
جزاك الله كل خير
سأرى مايمكن فعله
محبتي من مجد الإسلام . . . مجودة ©
حياك الله أخي العزيز
تم التطبيق بنجاح
تفضل وشاهد
المجد لاستضافة وتصميم المواقع
جرب أن تضغط على صورتي
.....
ميرسي
وجزاك الله كل خير
محبتي
ألف مبروك أخوي مجد ومنور الشاشة
__________________
سـبـحـان الله، والـحــمــد لله، ولا إلـه إلا الله، والله أكـــبـــــر.
ضوابط المشاركة
رد مع اقتباس