يكي از دوستان در قسمت تماس با من پيغام گذاشته بود كه چگونه تصاوير يك صفحه را مي‌شود به صورت موقت كوچك كرد؟ براي نمونه، اين مشكلي است كه در فوروم‌ها زياد وجود دارد. گاهي از اوقات يكي از كاربران تصويري را ارسال مي‌كند كه اندازه‌ي آن در حد يك تابلوي ديواري است!
با استفاده از محصول سورس بازي به نام popBox مي‌توان تصاوير دلخواهي را ابتدا با اندازه‌ي كوچك در صفحه نشان داد و پس از كليك بر روي آن، تصوير به اندازه اصلي آن نمايش داده خواهد شد. به اين صورت صفحه از شكل نخواهد افتاد. اين اسكريپت از آدرس زير قابل دريافت است:
http://www.c6software.com/products/popbox/default.aspx
نحوه استفاده و مثال‌هاي مربوطه هم در همان آدرس قابل مشاهده است و نكته خاصي ندارد.
اما اين روش يا روش‌هاي مشابه آن يك مشكل دارند. اعمال آن‌ها بايد به صورت دستي صورت گيرد. يعني بايد دقيقا مشخص كنيم كه اين تصوير معلوم در ابتدا به اندازه‌ي مشخصي نمايش داده شود و ساير تنظيمات مربوطه اعمال گردد. اين روش در سايت‌هاي پويا عملا پاسخگو نخواهد بود. زمانيكه كاربري مطلبي را ارسال مي‌كند يا بايد در سورس‌هاي موجود دست برد و به تصاوير ارسالي به صورت خودكار تنظيمات مربوط به popbox را اضافه كرد، يا اينكه هر بار مطالب را پس از ارسال به صورت دستي ويرايش كرد يا روش‌هايي مانند اين.
با استفاده از jQuery ، اسكريپت selectAll.js را به اين مجموعه اضافه كردم. ابتدا تمامي تصاوير صفحه پيدا مي‌شوند و سپس به آنهايي كه طول و عرض بزرگتري از حد مجاز دارند به صورت خودكار ويژگي‌هاي popBox افزوده خواهد شد. چون اين روش اسكريپتي است : الف) نيازي به تغيير در سورس‌هاي موجود نيست. ب) توسط هر تكنولوژي سمت سروري نيز قابل استفاده است. ج) به صورت خودكار به تمامي تصاوير بزرگ صفحه اعمال مي‌شود و نيازي به ويرايش دستي هيچ موردي جهت اعمال ويژگي‌هاي مورد نظر وجود نخواهد داشت.
نكته جالبي كه با jQuery وجود دارد، روال رخداد گردان document.ready آن است. اين رخداد پيش از window.onload استاندارد و زمانيكه DOM آماده استفاده است فراخواني مي‌شود.
براي استفاده از آن ابتدا بايد دو فولدر scripts و images به سرور كپي شوند. سپس سه سطر زير را به هدر صفحه اضافه كنيد (به سورس صفحه sample.html فايل پيوست مي‌توان مراجعه كرد):
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/PopBox.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/selectAll.js"></script>
popBoxWaitImage.src = "images/spinner40.gif";
popBoxRevertImage = "images/magminus.gif";
popBoxPopImage = "images/magplus.gif";
popBoxRevertText = "كوچك نمايي";
popBoxPopText = "بزرگ نمايي";
popBoxCaptionMoreText = "بيشتر";
popBoxCaptionLessText = "كمتر";
MaximumAllowedWidth = 500;
MaximumAllowedHeight = 480;
موارد ذكر شده را از اين آدرس مي‌توانيد دريافت نمائيد.
