ایجاد گالری تصاویر

ایجاد گالری تصاویر

در این آموزش ما با استفاده از PHP,MYSQL و Jquery یک گالری تصاویر ساده ایجاد می کنیم که شما میتونید از آن برای نمایش تصاویر دلخواه خود در وبسایتتان استفاده کنید.

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

در این آموزش قصد داریم تا به شما یک نوع گالری را آموزش دهیم .یکی از ویژگی های این پلاگین این است که میتوان از آن برای نمایش نمونه کارها و ارائه توضیحی کوتاه در مورد آنها استفاده کرد.خوب کار را با معرفی شمای دیتابیس شروع می کنیم.

تمام مشخصات مورد نیاز تصاویر در داخل جدول Banner قرار می گیرد که شکل کلی آن را در زیر مشاهده می کنید.

011

ID کلید اصلی است،IMAGE تصاویر را نگه میدارد،COMPANY توضیحی کوتاه در مورد صاحب عکس را نگه میدارد،URL آدرس شرکت یا صاحب عکس را نگه میدارد.

XHTML

کدهای HTML پس از انجام پرس و جو از پایگاه داده توسط PHP ایجاد می شوند و در صفحه قرار می گیرند.همانطور که در زی مشاهده می کنید

<div class="banner">
    <a href="http://www.rapidxhtml.com/">
        <img src="img/banners/rapidHTML.png" alt="Rapid HTML"
        width="125" height="125" />
    </a>
    <p class="companyInfo">Visit Rapid HTML</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
</div>

در کنار هر تگ div ما یک لینک به سایت مرتبط ، یک عکس ۱۲۵*۱۲۵ ،یک توضیح در مورد نام شرکت یا صاحب عکس و چهار تگ cornerداریم.تگ توضیحات و corner ها به صورت پیش فرض مخفی هستند و هنگامی که موس کاربر روی یک عکس می رود نمایش داده می شوند.این باعث میشود تا عملکرد کد ما حتی در صورت غیر فعال بودن جاوااسکریپت کاملا صحیح اجرا شود.

011

CSS

خوب حالا به سراغ کدهای CSS می رویم.ما برای اطمینان از سازگاری مرورگر ابتدا تنظیمات پیش فرض مرورگر را انجام می دهیم.این کار ساده است

*{
    /* A universal page reset */
    margin:0;
    padding:0;
}

body{
    /* Setting default text color, background and a font stack */
    font-size:0.825em;
    color:#666;
    background-color:#fff;
    font-family:Arial, Helvetica, sans-serif;
}

.bannerHolder{
    /* The main banner unordered list */

    height:270px;
    width:270px;

    float:left;
    margin:20px 15px;
    padding:10px;
    background:#f7f7f7;
    border:1px solid #eee;

    /* CSS3 rounded corners */

    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

.bannerHolder li{
    /* Hiding the bullets of the li elements: */
    list-style:none;
    display:inline;
}

.banner{
    /* The banner divs */
    position:relative;
    width:125px;
    height:125px;
    overflow:hidden;
    float:left;
    margin:5px;
}

.banner img{
    /* The banner divs */
    display:block;
    border:none;
}

ترتیب اعما استایل ها به تصاویر به این صورت است که ابتدا به خود لیست نامرتب،سپس به المان های li و در آخر به تگ banner.

ما دونوع گروه تصاویر در صفحه داریم باید توجه کنیم که دونوع تصویر با یک ID نمیتواند استفاده شود.

.banner div{
    /* The dark animated divs */

    position:absolute;
    z-index:100;
    background-color:#222;
    width:60px;
    height:60px;
    cursor:pointer;

    /*	Setting a really big value for border-radius
        will make the divs perfect circles */

    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;
}

/*	Positioning the animated divs outside the
    corners of the visible banner area: */

.banner .cornerTL{ left:-63px;top:-63px; }
.banner .cornerTR{ right:-63px;top:-63px; }
.banner .cornerBL{ left:-63px;bottom:-63px; }
.banner .cornerBR{ right:-63px;bottom:-63px; }

.banner p{
    /* The "Visit Company" text */

    display:none;	/* hidden by default */

    left:0;
    top:57px;
    width:100%;
    z-index:200;
    position:absolute;

    font-family:Tahoma, Arial, Helvetica, sans-serif;
    color:white;
    font-size:11px;
    text-align:center;

    cursor:pointer;
}

در بخش دوم کد ما نحوه نمایش انیمیشن تصاویر، هنگامی که موس روی آنها قرار میگیرد را نوشتیم.ما با استفاده از border-radius کادر دور ۴ تا تصویر  را به اندازه ۱۰۰px خم کردیم.

b4600ef0-b39d-4270-abb4-2ef9edb6582b

PHP

به سراغ کد های PHP می رویم.ابتدا کدهای مربوط به کلاس تصاویر را می نویسیم.

class Banner{

    private $data = array();

    public function __construct($row){
        $this->data = $row;
    }

    public function html(){

        /* This method returns the banner's HTML code */

        $d = &$this->data;
        $d['company'] = htmlspecialchars($d['company']);

        return '
            <div class="banner">
                <a href="'.$d['url'].'">
                    <img src="img/banners/'.$d['image'].'" alt="'.$d['company'].'"
                    width="125" height="125" />
                </a>
                <p class="companyInfo">Visit '.$d['company'].'</p>
                <div class="cornerTL"></div>
                <div class="cornerTR"></div>
                <div class="cornerBL"></div>
                <div class="cornerBR"></div>
            </div>';
    }

}

متد html() کد های html مربوط به تصاویر را بر میگرداند.شما در زیر نحوه استفاده از این کلاس و متد های آن را مشاهده می کنید.

$bannerResult = mysql_query("SELECT * FROM banners");

$banners = array();
while($row=mysql_fetch_assoc($bannerResult))
{
    $banners[] = new Banner($row);
}

// Randomizing the $banners array:
shuffle($banners);

// Splitting the banners array into smaller arrays with 4 banners each:
$bannerGroups = array_chunk($banners,4);

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

از آنجایی که ما ۸ تصویر داریم میتوانیم  با دو عنصر در داخل $bannerGroups میتوانیم آنها را در صفحه چاپ کنیم.

<ul class="bannerHolder">
    <?php

        // Looping through the first group:
        foreach($bannerGroups[0] as $ban)
        {
            echo '<li>'.$ban->html().'</li>';
        }

    ?>
</ul>

jQuery

پس از وارد کردن کتابخانه جی کوئری به صفحه ما میتونیم کد های مربوط به جاوااسکریپت را در داخل فایل script.js بنویسیم.

$(document).ready(function(){

    // Lowering the opacity of all slide in divs
    $('.banner div').css('opacity',0.4);

    // Using the hover method
    $('.banner').hover(function(){

        // Executed on mouseenter

        var el = $(this);

        // Find all the divs inside the banner div,
        // and animate them with the new size

        el.find('div').stop().animate({width:200,height:200},'slow',function(){
            // Show the "Visit Company" text:
            el.find('p').fadeIn('fast');
        });

    },function(){

        // Executed on moseleave

        var el = $(this);

        // Hiding the text
        el.find('p').stop(true,true).hide();

        // Animating the divs
        el.find('div').stop().animate({width:60,height:60},'fast');

    }).click(function(){

        // When clicked, open a tab with the address of the hyperlink

        window.open($(this).find('a').attr('href'));

    });
});

کد های بالا به دلیل سادگی نیازی به توضیح ندارند.

پایان

+7
-2


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 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>