دیدگاه جدیدی بگذارید

ایجاد یک گالری عکس زیبا در دروپال 7

ساخت گالری تصاویر در دروپال 7

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

پیش نیازها: شما نیاز به دروپال 7 دارید و هم چنین به views. تعجب نکنید برای داشتن یک گالری زیبا به چیز دیگه ای نیاز ندارید. به ما اعتماد کنید.

مرحله 1: ایجاد یک content type جدید به مسیر (/admin/structure/types) برید و یک content type جدید بسازید. من اسم اون رو gallery گذاشتم ( machin name رو به یاد داشته باشید در مرحله 5 بهش نیاز پیدا میکنید) 1.png

مرحله 2: ایجاد یک image style جدید از منوی مدیریت وارد آدرس زیر بشید (your_site/admin/config/media/image-styles) و یک style جدید ایجاد کنید. من اسم اون رو gallery-thumb گذاشتم. رویCreate new style کلیک کنید و Scale and Crop رو انتخاب کنید. طول و عرضش رو روی 150px تنظیم کنید

. 4.jpg

مرحله 3: مدیریت فیلدها بعد از ایجاد یک content type جدید به آدرسStructure --> Content Types بیایید و رویmanager fields کلیک کنید.فیلد body رو حذف کنید و مثل عکس زیر فیلد گالری عکس رو ایجاد کنید. 2.png

در تنظیمات این فیلد و در بخش Number of value گزینه Unlimited رو انتخاب کنید.بعد از ایجاد فیلد رویmanage display کلیک کنید و مثل عکس زیر تنظیمات رو انجام بدید.

5.png

بعد از این مرحله باید عکس های خودتون رو وارد سایت کنید ( از مسیرyour_site/node/add/gallery )

33.jpg

مرحله 4 : ایحاد یک view برای گالری برید بهStructure --> Views و یک view جدید ایجاد کنید. مثل شکل زیر

6.png

مرحله 5: ایحاد یک tempalate به شاخه قالب برید (/themes/bartik/templates/) و node.tpl.php رو پیدا کنید و یک کپی از اون با نام node--gallery.tpl.php ذخیره کنید ( gallery نام ماشین content type که ایجاد کردید است. از اینجا میتونین اطلاعات بیشتری بدست بیارید). فایلی که ایجاد کردید رو باز کنید و مقادیر زیر رو در اون کپی و جایگزین اطلاعات قبلی فایل کنید.

<div id="node-<?php print $node->nid; ?>" class="node-gallery">
	<?php
		$imgcount = count($node->field_img['und']);
		for ($i = 0; $i < $imgcount; $i++) {
    	$image_uri = $node->field_img['und'][$i]['uri'];
			// url
			$masthead_raw = image_style_url('gallery-thumb', $image_uri);
	?>
      <a href="<?php print file_create_url($node->field_img['und'][$i]['uri']); ?>" rel="group-<?php print $node->nid; ?>" class="fancybox">
        <img class="image<?php print ($i + 1);?>" src="<?php print $masthead_raw; ?>" />
      </a>
    <?php } ?>
</div>

&nbsp;field_img['und']); for ($i = 0; $i &lt; $imgcount; $i++) { $image_uri = $node-&gt;field_img['und'][$i]['uri']; // url $masthead_raw = image_style_url('gallery-thumb', $image_uri); ?&gt;&nbsp;&nbsp;<a class="fancybox" href="&lt;?php print file_create_url($node-&gt;field_img['und'][$i]['uri']); ?&gt;" rel="group-&lt;?php print $node-&gt;nid; ?&gt;"><img class="image&lt;?php print ($i + 1);?&gt;" src="&lt;?php print $masthead_raw; ?&gt;"> </a> <!--?php } ?-->

کش سیستم رو پاک کنید و صفحه گالری رو refresh کنید.

مرحله 6: افزودن افکت خوب الان شما یک صفحه گالری دارید که در اون عکس های کوچک به عکس های بزرگ لینک شده اند. در این مرحله میخوایم کمی این صفحه رو زیباتر کنیم و افکت هایی رو بهش اضافه کنیم. به مسیر css در قالب برید (themes/bartik/css/) و فایل style.css رو باز کنید و مقادیر زیر رو به فایل اضافه کنید.

.node-gallery {
  float: left;
  width: 150px;
  height: 150px;
  position: relative;
	margin: 0 60px 50px 0;
}

.node-gallery img {
	position: absolute;
	bottom:0px;
}

.node-gallery .image1 {left: 0px;
  z-index: 3;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease
}

.node-gallery .image2 {left: 7px;
  height: 148px;
  z-index: 2;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease
}

.node-gallery .image3 {left: 14px;
  height: 145px;
  z-index: 1;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease
}

.image1, .image2, .image3{
  border: 5px solid #F3F3F3;
  box-shadow: 1px 1px 2px #666;
  -webkit-shadow:1px 1px 2px #666;
  -webkit-transform:rotate(0deg) translate(0px);
}

.node-gallery:hover .image1{
   z-index: 6;
  -ms-transform: rotate(-5deg) translate(-40px, -2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(-5deg) translate(-40px, 2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(-5deg) translate(-40px, -2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(-5deg) translate(-40px, -2px);
  -o-transform-origin:center bottom;
}

.node-gallery:hover .image2{
   z-index: 5;
  -ms-transform: rotate(-2deg) translate(0px, 2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(-2deg) translate(0px, -2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(-2deg) translate(0px, 2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(-2deg) translate(0px, 2px);
  -o-transform-origin:center bottom;
}

.node-gallery:hover .image3{
   z-index: 4;
  -ms-transform: rotate(5deg) translate(40px,-2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(5deg) translate(40px,2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(5deg) translate(40px,-2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(5deg) translate(40px,-2px);
  -o-transform-origin:center bottom;
}

مرحله 7: افزودن fancybox
بعد از مرحله 6 شما افکت ها رو در صفحه گالری مشاهده میکنید وقتی که نشانگر موس رو روی عکس ها ببرید. اما هنوز وقتی روی عکس ها کلیک میکنید شما رو به سمت اندازه واقعی عکس ها هدایت میکنه. زیاد نگران نباشید. تا آخر این آموزش زمان زیادی نمونده. در این مرحله با کمک fancybox میخوایم گالری رو زیباتر ببینیم.
اول شما نیاز دارید که fancybox رو دانلود کنید. به مسیر قالب برید (themes/bartik) و یک پوشه جدید به نام "js" بسازید. فایل دانلود شده رو باز کنید و فایل jquery.mousewheel-3.0.6.pack.js و پوشه source رو در این مسیر (پوشه js) کپی کنید. نام پوشه source رو به fancybox تغییر بدید. حالا باید کدهای fancybox رو به فایل template قالب اضافه کنید.
پس در قالب bartik فایل template.php رو پیدا کنید و اون رو باز کنید. و function زیر رو در اون پیدا کنید

function bartik_process_page(&$variables) {

bartik_process_page(&amp;$variables) { این مقادیر رو دقیقا بعد از function اضافه کنید

drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/jquery.mousewheel-3.0.6.pack.js');
drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.pack.js');
drupal_add_css(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.css');
$fancybox = "jQuery(document).ready(function() {
    jQuery('.fancybox').fancybox();
});";
drupal_add_js($fancybox, 'inline');

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

 

خوشحال میشیم نظرات خودتون رو در مورد این مقاله و روش های دیگر ایجاد گالری با ما درمیان بزارید.

 

CCBot/2.0 (http://commoncrawl.org/faq/)

آخرین ارسال ها

محتواهای محبوب

درباره ما

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

تماس با ما

با ما تماس بگیرید.

logo-samandehi