14 апреля 2013 в 2:13
Всем здрасьте!
Я пытаюсь заставить галерею созданную с помощью GalleryFormatter отображаться с фиксированной шириной, при помощи CSS я установил для контейнера галереи ширину (width:1050px и padding:20px), но ввиду того, что изображения в галерее различаются по ширине, мне приходится экспериментировать с отступом слева (matgin-left). margin:0 auto не подходит, т.к. в galleryformatter.tpl.php указываются параметры inline.
Вот с этим galleryformatter.tpl.php у меня и возникло следующее затруднение: в следующей части исходного кода
<?php
/* Available variables:
*
* $dimensions - Array containing both slides and thumbs dimensions
* $slides - Array containing all slide images, its sanatized title & alt ready to print, its hash id and the full image URL if you need it
* $thumbs - Array containing all thumbnail images ready to print and their hash
* $settings - The settings for galleryformatter as configured for this field instance.
*/
?>
<div class="galleryformatter galleryview galleryformatter-<?php print $settings['style'] ?>">
<div class="gallery-slides" style="width: <?php print $dimensions['slides']['width']; ?>px; height: <?php print $dimensions['slides']['height']; ?>px;">
<div class="gallery-frame">
<ul>
<?php foreach ($slides as $id => $data): ?>
<li class="gallery-slide" id="<?php print $data['hash_id']; ?>">
<?php print $data['image']; ?>
<?php if (!empty($data['title']) || !empty($data['alt'])): ?>
<div class="panel-overlay">
<div class="overlay-inner">
<?php if ($data['alt']): ?><h4><?php print $data['alt']; ?></h4><?php endif; ?>
<?php if ($data['title']): ?><h3><?php print $data['title']; ?></h3><?php endif; ?>
</div>
</div>
<?php endif; ?>
</li>
<?php endforeach; ?>
я пытаюсь убрать адаптацию размера контейнера и задать автоматический расчёт отступа для каждого изображения галереи
<?php
/* Available variables:
*
* $dimensions - Array containing both slides and thumbs dimensions
* $slides - Array containing all slide images, its sanatized title & alt ready to print, its hash id and the full image URL if you need it
* $thumbs - Array containing all thumbnail images ready to print and their hash
* $settings - The settings for galleryformatter as configured for this field instance.
*/
?>
<div class="galleryformatter galleryview galleryformatter-<?php print $settings['style'] ?>">
<div class="gallery-slides">
<div class="gallery-frame">
<ul>
<?php foreach ($slides as $id => $data): ?>
<li class="gallery-slide" style="margin-left: <?php print (1050-$dimensions['slides']['width'])/2; ?>px;" id="<?php print $data['hash_id']; ?>">
<?php print $data['image']; ?>
<?php if (!empty($data['title']) || !empty($data['alt'])): ?>
<div class="panel-overlay">
<div class="overlay-inner">
<?php if ($data['alt']): ?><h4><?php print $data['alt']; ?></h4><?php endif; ?>
<?php if ($data['title']): ?><h3><?php print $data['title']; ?></h3><?php endif; ?>
</div>
</div>
<?php endif; ?>
</li>
<?php endforeach; ?>
В итоге отступ рассчитывается только для первого изображения и применяется одинаковый ко всем. Я подозреваю, что причина в неточном указании значения переменной $dimension, но недостаток знаний не позволяет разобраться самостоятельно.
На всякий случай прикрепляю скрины:
1. Первая картинка - отступ правильный
2. Другая картинка - отступ тот же, что и у первой, но он не подходит, т.к. размер этой картинки отличается от первой
P.S. Я только вчера начал читать маны по PHP, ещё ничего не знаю, хочу разобраться.
Заранее спасибо за помощь!
Комментарии
вам нужен
margin:0 auto
дайте ссылку на галерею, в голове верстать не лучшее занятие
Отключил пока объединение и сжатие CSS для удобства.
commerciante.ru/content/effetto-solaria
если это ваш js выставляет margin-left для li то лучше уберите, вот css который поможет, главное проверьте чтобы его не перекрыло
.gallery-processed .gallery-frame .gallery-slides .gallery-slide {
margin-left: 0;!important;
position: static;
}
.gallery-slide img {
margin: 0 auto;
display: block;
}
Да, расчёт margin-left из galleryformatter.tpl.php убрал
и Ваш CSS вот в таком виде (с небольшой правкой) заработал
.galleryformatter-blackarrows .gallery-slides .gallery-frame .gallery-slide {
margin-left: 0 !important;
position: static;
}
.galleryformatter-blackarrows .gallery-slide img {
margin: 0 auto;
display: block;
}
Большое спасибо!
пожалуйста