Изотопные шаблоны галереи NextGen обрезаны и перекрываются

Question

Изотопные шаблоны галереи NextGen обрезаны и перекрываются

Я реализовал пользовательский шаблон NextGen (находится здесь: https://github.com/cevenson/isotope-nextgen-gallery-template) для сайта WP клиента, но мои миниатюры выглядят обрезанными и перекрывающимися на [большинстве ] начальная загрузка страницы (см. скриншот ниже).

Кроме того, фильтрация тегов на самом деле не работает для всех "категорий". Все они закодированы одинаково в меню фильтрации, поэтому я не уверен, что может быть не так с теми, которые не работают.

Сайт, на котором я использую это: http://rajbhavsar.com/photos

Кто-нибудь использует это? Любые идеи будут высоко ценится. Спасибо!

скриншот изотопной проблемы с миниатюрами

РЕДАКТИРОВАТЬ:

Код шаблона, который я использую, выглядит следующим образом. Ничто не выглядело необычным или проблемным. Поэтому я и пишу здесь.

<?php 
/**
Template Page for the gallery overview

Follow variables are useable :

$gallery     : Contain all about the gallery
$images      : Contain all images, path, title
$pagination  : Contain the pagination content

You can check the content when you insert the tag <?php var_dump($variable) ?>
If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.isotope.min.js" type="text/javascript"></script>

<style type="text/css">

/**** centre nav and put at bottom ****/
.ngg-navigation{
position: relative;
width: 80%;
margin: 0 auto;
}

#isotopegallery{
clear: both;
margin: 0 0 30px 0;
}

/**** Isotope Filtering ****/

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}

.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property:    -moz-transform, opacity;
-ms-transition-property:     -ms-transform, opacity;
-o-transition-property:         top, left, opacity;
transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}

.photo{
float:left;
margin:0 10px 10px 0;
}

#filters{
margin-left:0;
border: none;
}

#filters li{
display: block;
float:left;
list-style-type: none;
margin: 0 0 20px 0;
}

#filters li a{
background: #242424;
padding:8px;
margin:5px 6px 5px 0;
color:#878787;
text-decoration: none;
text-transform:uppercase;
font-weight:normal; 
}

#filters li a:hover{
background: #595959;
}

</style>

<script>
jQuery(function($){

var $container = $('#isotopegallery');

$container.isotope({
  itemSelector: '.photo'
});

$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
</script>



<ul id="filters" class="clearfix">
<li><a href="#" data-filter="*">Show All</a></li>
<li><a href="#" data-filter=".acting">Acting</a></li>
<li><a href="#" data-filter=".cirque">Cirque</a></li>
<li><a href="#" data-filter=".film">Film</a></li>
<li><a href="#" data-filter=".gymnastics">Gymnastics</a></li>
<li><a href="#" data-filter=".live-events">Live Events</a></li>
<li><a href="#" data-filter=".people">people</a></li>
<li><a href="#" data-filter=".portrait">Portrait</a></li>
<li><a href="#" data-filter=".quotes">Quotes</a></li>
<li><a href="#" data-filter=".speaking">Speaking</a></li>
<li><a href="#" data-filter=".television">Television</a></li>
<li><a href="#" data-filter=".travel">Travel</a></li>
<li><a href="#" data-filter=".uncategorized">Uncategorized</a></li>
<li><a href="#" data-filter=".usa-yoga">USA Yoga</a></li>
</ul>


<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>

<div id="isotopegallery" class="photos clearfix" id="<?php echo $gallery->anchor ?>">

    <?php
            //Used to break down and extract the width and height of each image
            function get_string_between($string, $start, $end){
                    $string = " ".$string;
                    $ini = strpos($string,$start);
                    if ($ini == 0) return "";
                    $ini += strlen($start);
                    $len = strpos($string,$end,$ini) - $ini;
                    return substr($string,$ini,$len);
            }
    ?>

    <!-- Thumbnails -->
    <?php foreach ( $images as $image ) : ?>


            <?php if ( !$image->hidden ) {
                    //GET the Size parameters for each image. this i used to size the div box that the images go inside of.
                    $the_size_string = $image->size;
                    $thewidth = get_string_between($the_size_string, "width=\"", "\"");
                    $theheight = get_string_between($the_size_string, "height=\"", "\"");
                    $divstyle = 'width:'.$thewidth.'px; height:'.$theheight.'px;'; 
            }?>


                    <?php
                            //Get the TAGS for this image  
                            $tags = wp_get_object_terms($image->pid,'ngg_tag');
                            $tag_string = ''; //store the list of strings to be put into the class menu for isotpe filtering       
                            ?>
                            <?php foreach ( $tags as $tag ) : ?>     
                              <?php $tag_string = $tag_string.$tag->slug.' ';  //alternativley can use $tag->name;, slug with put hyphen between words ?>      
                            <?php endforeach; ?>   

            <div class="photo <?php echo $tag_string ?>" style="<?php echo $divstyle; ?>">
                    <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
                            <?php if ( !$image->hidden ) { ?>
                            <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" />
                            <?php } ?>
                    </a>
            </div> 

            <?php if ( $image->hidden ) continue; ?>
            <?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
                    <br style="clear: both" />
            <?php } ?>

    <?php endforeach; ?>

</div>

<!-- Pagination -->
    <?php echo $pagination ?>

<?php endif; ?>

1

css wordpress templates jquery-isotope nextgen-gallery

Источник

user1204415 06 дек '13 в 21:03

1 ответ

Другие вопросы по тегам css wordpress templates jquery-isotope nextgen-gallery

user1004312 07 дек '13 в 02:19 2013-12-07 02:19 · Answer 1 · 2013-12-07 02:19

$.noConflict();
jQuery( window ).load(function( $ ) {

Он не работает с нагрузкой, он работает с изменением размера или обновлением, верно? Это может помочь загрузить CSS ПЕРЕД вызовом isotope.min.js, и почему бы вам не вставить туда инициализацию.

<ul id="filters" class="clearfix">
    <li><a href="#" data-filter="*">Show All</a></li>
    <li><a href="#" data-filter=".acting">Acting</a></li>
    <li><a href="#" data-filter=".cirque">Cirque</a></li>
    <li><a href="#" data-filter=".film">Film</a></li>
    <li><a href="#" data-filter=".gymnastics">Gymnastics</a></li>
     ...

Эти фильтры точно не отражают классы. У вас есть класс "cirque-3", но ваш фильтр только.cirque и так далее. Все, если не большинство, не совпадают.