.NET Tips | جستجوها: نتایج مشابه «تزئین تصاویر مفقود در صفحات»، صفحه: ۸۳

نظرات مطالب

استفاده از popBox برای کوچک کردن خودکار تصاویر بزرگ

سلام
استفاده از update panel برای اینکار مقرون به صرفه نیست. شما از یک طرف از سرعت پائین خط شکایت می‌کنید و از طرف دیگر می‌خواهید از حجم بالای اسکریپت‌های اجکس هم استفاده کنید که فقط به کاربر نشان دهید این تصویر در حال load شدن است؛ کمی صبر کنید الان نمایش داده می‌شود. مثلا چیزی شبیه به این:
http://www.codeproject.com/KB/ajax/DelayedContentLoading.aspx

- راه حل‌های زیادی برای حل این سربار هست. برای مثال در یک CMS که خودم نوشتم، تصاویری را که یوزر آپلود می‌کند، به صورت خودکار تبدیل به thumbnail می‌کنم (System.Drawing.Image.GetThumbnailImage). یعنی دو نسخه نگهداری می‌شود. یکی کوچک و یکی در اندازه اصلی. نسخه کوچک در صفحه اصلی گالری تصاویر نمایش داده می‌شود. پس از کلیک کاربر، با همین پاپ باکس یا یک نمونه دیگر که استفاده کردم به نام light box ، تصویر در اندازه اصلی نمایش داده می‌شود. به این صورت دیگر من نگران نحوه نمایش اولیه نخواهم بود و نمایش اولیه اسکریپتی نیست.
سایت لایت باکس است:
http://www.huddletogether.com/projects/lightbox2/
استفاده از آن هم در ASP.Net ساده است. اسکریپت‌های آن به هدر اضافه می‌شوند. سپس به تگ‌های یک کنترل ایمیج یا هایپرلینک که مثلا در یک DataList قرارگرفته‌اند خواص آن اضافه می‌شود. به این صورت می‌شود یک گالری پویا را ایجاد کرد که با دیتابیس هم کار کند.

- راه دیگر (اگر نمی‌خواهید thumbnail درست کنید) این است که از ابتدا اندازه تصویری را که قرار است نمایش داده شود مشخص کنید (طول و عرض کوچک). البته اگر تصویر شما همانطور که در این مقاله ذکر شد از نوع قرار گرفته شده داخل متن نیست و کاملا کنترل شده مثلا توسط یک دیتالیست رندر می‌شود، به این صورت اندازه ابتدایی کوچک خواهد بود و پس از لود شدن پاپ باکس، با کلیک کاربر روی عکس، اندازه اصلی را خواهید دید. (اسکریپتی که برای پاپ باکس نوشتم اینکار را به صورت خودکار انجام می‌دهد ولی خوب اسکریپت باید لود شده باشد که به طور قطع قبل از لود شدن تصویر اینکار تمام شده)

- اگر تصویر شما مخلوط داخل متن است و کنترلی روی آن ندارید باید با regular expressions آنها را پیدا کنید و سپس خواص مورد نظر خودتان را به تگ‌های تصویر اضافه کنید. (روش سمت سرور قبل از نمایش تصاویر)

‫۱۵ سال و ۱۲ ماه قبل، پنجشنبه ۲۱ آذر ۱۳۸۷، ساعت ۰۶:۰۰

وحید نصیری

مطالب

کار با شیوه‌نامه‌های تصاویر در بوت استرپ 4

بوت استرپ 4 به همراه کلاس‌های کمکی مفیدی برای کار با تصاویر نیز می‌باشد؛ مانند:
- کلاس img-fluid که سبب ایجاد تصاویر واکنشگرا می‌شود. به این معنا که اگر این کلاس به تصویری انتساب داده شد، عرض آن با عرض container آن، تطابق پیدا می‌کند.
- کلاس rounded-dir برای گرد کردن گوشه‌های تصاویر کاربرد دارد. در اینجا ذکر dir اختیاری است و می‌تواند مقادیر زیر را داشته باشد:
top, right, bottom, left, circle
همچنین اگر تصویری دارای گوشه‌های گرد است (توسط کلاس css دیگری تنظیم شده‌است)، می‌توان با اعمال کلاس rounded-0، آن‌را لغو کرد.
- کلاس img-thumbnail نیز تصویری را با گوشه‌های گرد و همچنین با حاشیه‌ای به ضخامت 1px، ایجاد می‌کند.
- کلاس‌های float-left و float-right حالت پیش‌فرض نمایش inline تصاویر را لغو کرده و آن‌ها را در جهت‌های دلخواهی نمایش می‌دهند.
- اگر حالت نمایش تصویر inline است، می‌توان مانند متون با استفاده از کلاس text-center، آن‌ها را در میانه‌ی container، نمایش داد.
- اگر تصویر به صورت block نمایش داده می‌شود (display:block)، کلاس mx-auto می‌تواند آن‌را در میانه‌ی container نمایش دهد.

مثالی از تصاویر واکنشگرا

<body>
    <div class="container">
        <section class="content" id="testimonials">
            <h2>Testimonials</h2>
            <figure>
                <img class="img-fluid" src="images/testimonial-johnb.jpg" alt="John B Photo">
                <figcaption>The staff at Wisdom worked tirelessly to determine
                    why our three-year old Golden Retriever, Roxie, started
                    going into sudden kidney failure. They stabilized her and
                    provided fluids until her kidneys were again functioning
                    normally.</figcaption>
            </figure>
        </section>
    </div>
</body>

در اینجا با اعمال کلاس img-fluid به یک تصویر، سبب خواهیم شد تا عرض آن با عرض container تطابق پیدا کند:

همانطور که مشاهده می‌کنید، این کلاس، یک تصویر بزرگ را متناسب با عرض دربرگیرنده‌ی آن، نمایش می‌دهد.

مثال تصویر با گوشه‌های گرد

در همین مثال اگر بخواهیم گوشه‌های تصویر را گرد کنیم، فقط کافی است کلاس rounded را نیز به آن اضافه کنیم:

<img class="img-fluid rounded" src="images/testimonial-johnb.jpg" alt="John B Photo">

با این خروجی:

مثال تصویر با گوشه‌های گرد در جهتی خاص

و یا اگر جهتی را نیز به آن اعمال کنیم:

<img class="img-fluid rounded-top" src="images/testimonial-johnb.jpg" alt="John B Photo">

برای مثال فقط گوشه‌های بالای آن گرد می‌شوند:

و یا نتیجه‌ی اعمال جهت دایره‌ای به تصویر:

<img class="img-fluid rounded-circle" src="images/testimonial-johnb.jpg" alt="John B Photo">

بیضی شکلی به صورت زیر است:

مثال نمایش تصویر در گوشه‌ای خاص از صفحه

اگر بخواهیم تصویر را برای مثال در سمت چپ صفحه نمایش دهیم:

<img class="img-fluid rounded-circle float-left" width="200px"
                    src="images/testimonial-lorraines.jpg" alt="Lorraine Photo">

خروجی آن به صورت زیر خواهد بود:

برای نمایش تصویر در وسط صفحه:

<body>
    <div class="container">
        <section class="content" id="testimonials">
            <h2>Testimonials</h2>
            <figure class="text-center">
                <img class="img-fluid rounded-circle" src="images/testimonial-mcphersons.jpg"
                    alt="McPhersons Photo" width="200px">
                <figcaption>When Samantha, our Siamese cat, began sleeping all
                    the time and urinating excessively, we brought her to see
                    the specialists at Wisdom. Now, two years later, Samantha
                    is still free from any complications of diabetes, and her
                    blood sugar regularly tests normal.</figcaption>
            </figure>
        </section>
    </div>
</body>

در اینجا با استفاده از کلاس text-center، تصویر را به میانه‌ی صفحه منتقل کرده‌ایم.

کار با عناصر figure جهت نمایش بهتر تصاویر و متون ذیل آن‌ها

برای کار بهتر با عناصر figure در بوت استرپ، ابتدا کلاس figure را به آن‌ها انتساب می‌دهیم. سپس می‌توان کلاس figure-img را به تصاویر داخل آن‌ها افزود. این مورد سبب می‌شود تا تصاویر با اندکی فاصله نسبت به متن داخل آن نمایش داده شوند. در آخر می‌توان به figcaption، کلاس figure-caption را افزود تا رنگ و فاصله‌ی مناسبی را به آن اعمال کند:

<body>
    <div class="container">
        <section class="content" id="testimonials">
            <h2>Testimonials</h2>
            <figure class="figure">
                <img class="img-fluid figure-img rounded" src="images/testimonial-lorraines.jpg"
                    alt="Lorraine Photo">
                <figcaption class="figure-caption">Wisdom Pet Medicine is the
                    only clinic around that
                    will even book pet fish for appointments. When our 13-year
                    old Comet goldfish, McAllister, turned from silvery white
                    to an angry red, we called around, urgently trying to find
                    a veterinarian who could help. Wisdom not only got us in
                    the same day, but also was able to diagnose McAllister as
                    having a severe case of septicemia.</figcaption>
            </figure>
        </section>
    </div>
</body>

با این خروجی:

کلاس figure-img سبب شده‌است تا تصویر، با متن، اندکی فاصله پیدا کند. همچنین کلاس figure-caption، متن ذیل تصویر را اندکی روشن‌تر نمایش می‌دهد.

کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید: Bootstrap4_03.zip

‫۶ سال قبل، دوشنبه ۱۶ مهر ۱۳۹۷، ساعت ۱۴:۲۵

وحید نصیری

مطالب

راه حل ساده برای عکس‌هایی که از کادر بیرون می‌زنند

ارسال تصویر در سایت‌ها، انجمن‌ها و امثال آن همیشه مشکل زا است؛ خصوصا نمایش تصاویری در قطع یک تابلوی دیواری در یک کادر کوچک.
راه ساده و دم دستی زیر، منهای استفاده از اسکریپت‌هایی که اندازه تصاویر را تشخیص داده و بر این اساس خودشان آن‌ها را بند انگشتی نمایش می‌دهند، هم برای حل این مشکل وجود دارد:
فرض کنید مطلبی که قرار است ارسال شود در یک DIV نمایش داده می‌شود و کلاس آن مثلا post-body است.
اولین کاری که می‌شود انجام داد این است:
در CSS سایت قسمت مرتبط با post-body تعریف زیر را اضافه می‌کنیم تا اضافات عکس که از کادر بیرون زده، خودبخود توسط مرورگر نمایش داده نشود:

overflow: hidden;

سپس در همین DIV که کلاس آن post-body است، با استفاده از jQuery به دنبال تصاویر گشته و موارد یافت شده را داخل یک لینک پویا قرار می‌دهیم (استفاده از متد wrap برای این محصور سازی). این لینک هم همان آدرس اصلی تصویر است. به این ترتیب کاربر با کلیک بر روی آن تصویر می‌تواند نتیجه را در صفحه‌ای دیگر مشاهده کند:

$(document).ready(function(){  
 $('.post-body img').each(function(){
    var $img = $(this);
    var src = $img.attr("src");
    $img.attr({border:"0"}).wrap('<a target="_blank" alt="Click here to enlarge (opens new window)" title="Click here to enlarge (opens new window)" href="'+src+'" />');
 }); 
});

‫۱۲ سال و ۱۲ ماه قبل، یکشنبه ۲۹ آبان ۱۳۹۰، ساعت ۰۰:۴۴

وحید نصیری

مطالب

مشکل امنیتی FreeTextBox‌ و روش رفع آن

FreeTextBox یکی از ادیتورهای متنی بسیار خوب تحت وب ASP.Net‌ است که از نگارش 1 تا 3 و نیم ASP.Net را پشتیبانی می‌کند. به همراه آن یک image gallery هم جهت آپلود تصاویر ارائه می‌شود که بسیار ارزشمند است. اما مشکلی که دارد عدم بررسی پسوند فایل آپلود شده است. به عبارتی خاصیت AcceptedFileTypes آن هنگام آپلود تصاویر بررسی نمی‌شود و می‌تواند مشکلات امنیتی حادی را به وجود آورد (برای مثال شخص بجای تصویر می‌تواند فایل aspx را نیز آپلود کند). راه حلی هم برای آن وجود ندارد. سورس این کامپوننت فقط به خریداران ارائه می‌شود و نگارش مجانی آن بدون سورس است.

اما با استفاده از توانایی‌های موجود در فایل استاندارد global.asax می‌توان روی آپلود تمامی فایل‌ها در برنامه نظارت داشت (نه فقط این یک مورد بلکه سراسر برنامه تحت کنترل قرار می‌گیرد). روش کار به صورت زیر است:

protected void Application_BeginRequest(Object sender, EventArgs e)
{
        List<string> toFilter = new List<string> { ".aspx", ".asax", ".asp", ".ashx", ".asmx", ".axd", ".master", ".svc" };
        if (HttpContext.Current != null && HttpContext.Current.Request != null && HttpContext.Current.Request.Files != null)
            for (int i = 0; i < HttpContext.Current.Request.Files.Count; i++)
            {
                string fileNamePath = HttpContext.Current.Request.Files[i].FileName.ToLower();
                string name = Path.GetFileName(fileNamePath);
                string ext = Path.GetExtension(fileNamePath);
                if (toFilter.Contains(ext) || name == "web.config")
                {
                    HttpContext.Current.Response.StatusCode = 403; //Forbidden
                    HttpContext.Current.Response.End();
                }
            }
}

در این‌جا تمامی فایل‌های آپلودی بررسی شده و اگر پسوند خطرناکی داشتند، یک صفحه forbidden به شخص نمایش داده می‌شود و تمام!

این کد را به صورت Http module هم می‌توان درآورد.

‫۱۵ سال و ۶ ماه قبل، سه‌شنبه ۱۹ خرداد ۱۳۸۸، ساعت ۰۳:۱۰

وحید نصیری

بازخوردهای دوره

پیاده سازی دکمه «بیشتر» یا «اسکرول نامحدود» به کمک jQuery در ASP.NET MVC

نگارش جدید این افزونه و مثال را از اینجا می‌توانید دریافت کنید: jQueryMvcSample02_V2.zip
تغییرات:
- اضافه شدن history مشاهده صفحات جدید به دکمه back مرورگر. برای اینکار از افزونه Path.Js کمک گرفته شد. این مورد همچنین سبب می‌شود بتوان آدرس صفحه جاری را ذخیره و بعدا بازیابی کرد.
- اضافه شدن دو دراپ داون برای مرتب سازی بر اساس یک سری فیلد به صورت صعودی و یا نزولی
- محو دکمه بیشتر در زمان کلیک بر روی آن جهت جلوگیری از کلیک‌های بیش از حد با سرعت دریافت پایین اینترنت.

‫۱۰ سال و ۹ ماه قبل، یکشنبه ۲۹ دی ۱۳۹۲، ساعت ۲۲:۴۳

وحید نصیری

نظرات اشتراک‌ها

پروژه SmartUnderline

- کاری به ASP.NET MVC سمت سرور ندارد.
- مثال آن در اینجا ارائه شده. روی آن کلیک راست کنید و سورس آن‌را مشاهده کنید. اسکریپت آن باید الحاق شود و متد init دارد در ابتدای کار. همچنین فایل‌های CSS خاصی هم نیاز دارد. برای مشاهده‌ی یکجای فایل‌های CSS آن از افزونه‌ی web developer کمک بگیرید. این افزونه قابلیت نمایش یکجای فایل‌های اسکریپت آن صفحه را هم دارد. کلا برای مهندسی معکوس این نوع صفحات گنگ بسیار مفید است.

‫۹ سال و ۱۱ ماه قبل، شنبه ۱۵ آذر ۱۳۹۳، ساعت ۱۵:۳۸

محمد وفایی

اشتراک‌ها

طراحی اتمی (Atomic Design) چیست؟

فرض کنید به عنوان یک پروژه، باز طراحی(Redesign) پرتال شهرداری یا یک فروشگاه اینترنتی در وسعت دیجی کالا یا بامیلو به شما سپرده می‌شود ، در این پروژه شما با صدها صفحه مواجه هستید که گاهی از نگاه طراح پنهان می‌ماند و یا باز طراحی برای تمامی صفحات فرآیندی با ریسک ، هزینه و زمان بالا خواهد بود.

یکی از راه حل‌های پیشنهادی که با آن مواجه شدم طراحی اتمی ( Atomic Design ) معرفی شده توسطBrad Frost است که در ادامه به معرفی این روش می‌پردازم.

‫۸ سال و ۲ ماه قبل، چهارشنبه ۱۳ مرداد ۱۳۹۵، ساعت ۱۷:۵۴

امیرمسعود ایرانی

اشتراک‌ها

نظرات اسپم و روش جلوگیری از آن‌ها

وجود کامنت‌های مفید و متعدد در یک صفحه‌ی اینترنتی، نشانه‌ای از کیفیت و مشارکت کاربران سایت شما به حساب می‌آید و ممکن است اثرات مثبتی در افزایش رتبه‌ی سئو سایت شما ایفا کند.

از طرف دیگر چنانچه مدیریت کافی روی کامنت‌های سایت وجود نداشته باشد، به زودی روبات‌ها و برخی کاربران که به دنبال استفاده از تکنیک‌های کلاه‌سیاه سئو هستند با ارسال اسپم، کیفیت صفحات سایت شما را کاهش خواهند داد

‫۸ سال و ۴ ماه قبل، یکشنبه ۱۶ خرداد ۱۳۹۵، ساعت ۲۳:۵۵

رامین علیرضایی

اشتراک‌ها

کمپین قلم فارسی آزاد

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

‫۹ سال و ۱۰ ماه قبل، جمعه ۱۲ دی ۱۳۹۳، ساعت ۰۲:۵۱

جواد غدیری

اشتراک‌ها

پلاگین نوار منوی کناری (Sidebar) واکنشگرا

پروژه bootstrap-sidebar : پلاگین نوار منوی کناری (Sidebar) بر روی BootStap 3.0

اگر منوهای شما داخل یک نوار منو (menubar ) افقی، زیاد هستند یا شما احتیاج به نوار منوی کناری واکنشگرای سازگار با Bootstrap3 دارید، می‌توانید از این پلاگین برای نمایش لیست منوهای خودتان در صفحات واکنشگرای وب استفاده نمایید.

نسخه‌ی نمایشی (دمو)

پلاگین نوار منوی کناری (Sidebar) واکنشگرا

‫۱۰ سال و ۴ ماه قبل، یکشنبه ۱ تیر ۱۳۹۳، ساعت ۱۹:۴۳