گالری تصاویر

گالری تصاویر

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

برای مشاهده لینک وارد شود

کار اصلی کدهای PHP این است که کدهای مورد نیاز برای مقدار دهی اولیه هر عکس را در پس زمینه تولید کند.کدهای تولید شده بعدا در فایل demo.php وارد خواهند شد  تا کدهای HTML  را کامل تولید کنند.

demo.php




به تگ modal توجه کنید.این تگ همانطور که در زیر مشاهده می کنید برای مقدار دهی اولیه یک پنجره معین (Drop To Share) که از آن برای به اشتراک گذاری تصاویر استفاده خواهیم کرد مورد استفاده قرار می گیرد.

i12

خوب حالا به سراغ نوشتن کدهای CSS میرویم.البته برای این کار ابتدا کتابخانه های CSS مورد نیاز را به ابتدای  فایل demo.php واردمی کنیم.

demo.php




خوب حالا شروع به نوشتن کدهای CSS می کنیم.

demo.css

body{
    /* Styling the body */
    color:white;
    font-size:13px;
    background: #222222;
    font-family:Arial, Helvetica, sans-serif;
}

#gallery{
    /* The pics container */
    width:100%;
    height:580px;
    position:relative;
}

.pic, .pic a{
    /* Each picture and the hyperlink inside it */
    width:100px;
    height:100px;
    overflow:hidden;
}

.pic{
    /* Styles specific to the pic class */
    position:absolute;
    border:5px solid #EEEEEE;
    border-bottom:18px solid #eeeeee;

    /* CSS3 Box Shadow */
    -moz-box-shadow:2px 2px 3px #333333;
    -webkit-box-shadow:2px 2px 3px #333333;
    box-shadow:2px 2px 3px #333333;
}

.pic a{
    /* Specific styles for the hyperlinks */
    text-indent:-999px;
    display:block;
    /* Setting display to block enables advanced styling for links */
}

.drop-box{
    /* The share box */
    width:240px;
    height:130px;
    position:absolute;
    bottom:0;
    right:0;
    z-index:-1;

    background:url(img/drop_box.png) no-repeat;
}

.drop-box.active{
    /* The active style is in effect when there is a pic hovering above the box */
    background-position:bottom left;
}

label, input{
    /* The modal dialog URL field */
    display:block;
    padding:3px;
}

label{
    font-size:10px;
}

fieldset{
    border:0;
    margin-top:10px;
}

#url{
    /* The URL field */
    width:240px;
}

احتمالا یکی از کلاس هایی که نیاز به توضیحات اضافی داشته باشد کلاس pic باشد.کار این کلاس تبدیل استایل تصاویر بصورت قاب (polaroids) است.برای این منظور ما دور هر تصویر یک حاشیه (border)سفید قرار می دهیم.

همچنین ما با استفاده از خاصیت box-shadow برای قاب هر تصویر یک سایه در زیر آن قرار می دهیم.اگر  پیش نمایش این آموزش را دیده باشید متوجه خواهید شد که تصاویر بصورت نا مرتب و روی هم ریخته قرار دارند که برای انجام این کار به کدهای PHP نیاز خواهیم داشت که کمی بعد در مورد آنها نیز توضیح خواهیم داد.

بقیه استایل ها ساده هستند و نیاز به توضیح ندارند.
بخش PHP

خوب حالا به سراغ نوشتن کدهای php می رویم.کمی در مورد کدها قبلا توضیح دادیم حالا به تکمیل توضیحات میپردازیم.

demo.php

/* Configuration Start */
$thumb_directory = 'img/thumbs';
$orig_directory = 'img/original';
$stage_width=600;
$stage_height=400;
/* Configuration end */

$allowed_types=array('jpg','jpeg','gif','png');
$file_parts=array();
$ext='';
$title='';
$i=0;

/* Opening the thumbnail directory and looping through all the thumbs: */
$dir_handle = @opendir($thumb_directory) or die("There is an error with your image directory!");
$i=1;

while ($file = readdir($dir_handle))
{
    /* Skipping the system files: */
    if($file=='.' || $file == '..') continue;

    $file_parts = explode('.',$file);
    $ext = strtolower(array_pop($file_parts));

    /* Using the file name (withouth the extension) as a image title: */
    $title = implode('.',$file_parts);
    $title = htmlspecialchars($title);

    /* If the file extension is allowed: */
    if(in_array($ext,$allowed_types))
    {
        /* Generating random values for the position and rotation: */
        $left=rand(0,$stage_width);
        $top=rand(0,400);
        $rot = rand(-40,40);

        if($top>$stage_height-130 && $left > $stage_width-230)
        {
            /* Prevent the images from hiding the drop box */
            $top-=120+130;
            $left-=230;
        }

        /* Outputting each image: */
        echo '
        ';
    }
}

/* Closing the directory */
closedir($dir_handle);

ابتدا ما دایرکتوری تصاویر را بازکردیم و با استفاده از حلقه تمام تصاویر را پیمایش کردیم.در حلقه ما فایل هایی را که فاقد تصویر بودند مدنظر قرار ندادیم و برای هر عکس برای نمایش در صفحه مقداری کد html  تولید کردیم.

اگر به کدهای Css توجه کرده باشید ما برای چرخش تصاویر و به هم ریختگی آنها از کد php باید  استفاده کنیم.هر عکس بصورت تصادفی در یک مکانی بر حسب xوy قرار می گیرد و میزان چرخش نیز بین ۴۰- تا ۴۰ درجه است.ما برای تولید اعداد تصادفی از تابع ()rand استفاده می کنیم.

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

script.js

$(document).ready(function(){
    // Executed once all the page elements are loaded
    var preventClick=false;
    $(".pic a").bind("click",function(e){

        /* This function stops the drag from firing a click event and showing the lightbox */
        if(preventClick)
        {
            e.stopImmediatePropagation();
            e.preventDefault();
        }
    });

    $(".pic").draggable({

        /* Converting the images into draggable objects */
        containment: 'parent',
        start: function(e,ui){
            /* This will stop clicks from occuring while dragging */
            preventClick=true;
        },
        stop: function(e, ui) {
            /* Wait for 250 milliseconds before re-enabling the clicks */
            setTimeout(function(){ preventClick=false; }, 250);
        }
    });

    $('.pic').mousedown(function(e){
        /* Executed on image click */
        var maxZ = 0;

        /* Find the max z-index property: */
        $('.pic').each(function(){
            var thisZ = parseInt($(this).css('zIndex'))
            if(thisZ>maxZ) maxZ=thisZ;
        });

        /* Clicks can occur in the picture container (with class pic) and in the link inside it */
        if($(e.target).hasClass("pic"))
        {
            /* Show the clicked image on top of all the others: */
            $(e.target).css({zIndex:maxZ+1});
        }
        else $(e.target).closest('.pic').css({zIndex:maxZ+1});
    });

    /* Converting all the links to a fancybox gallery */
    $("a.fancybox").fancybox({
        zoomSpeedIn: 300,
        zoomSpeedOut: 300,
        overlayShow:false
    });

    /* Converting the share box into a droppable: */
    $('.drop-box').droppable({
        hoverClass: 'active',
        drop:function(event,ui){

            /* Fill the URL text field with the URL of the image. */
            /* The id of the image is appended as a hash #pic-123 */
            $('#url').val(location.href.replace(location.hash,'')+'#' + ui.draggable.attr('id'));
            $('#modal').dialog('open');
        }
    });

    /* Converts the div with id="modal" into a modal window  */
    $("#modal").dialog({
        bgiframe: true,
        modal: true,
        autoOpen:false,

        buttons: {
            Ok: function() {
                $(this).dialog('close');
            }
        }
    });

    if(location.hash.indexOf('#pic-')!=-1)
    {
        /* Checks whether a hash is present in the URL */
        /* and shows the respective image */
        $(location.hash+' a.fancybox').click();
    }
});

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

پس از این کار ما تمام تصاویر را قابل حرکت کردیم.

سپس ما قابلیت “Drop To Share” را در داخل droppable فعال کردیم.کار این بخش این است که با کشیدن و رها کردن تصویر در داخل این جعبه آدرس آن را برای ما نمایش میدهد  که ما میتوانیم از آن آدرس آن را دانلود کنیم.

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

پایان

+3
-1


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


9 − هشت =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>