Estoy intentando modificar un filtro en Joomla para que se muestren solo cierto contenido en relación con las tags de unos artículos.
La cuestión es que el filtro está separado en dos líneas para facilitarle la navegación al usuario y se puede ver en la imagen que está en: https://www.dropbox.com/s/egiyvfnd08yu2k8/filtro.tiff
Por otro lado, el código que hace que se vea el texto es el siguiente:
Código:
El código donde aparecen las funciones que hace seleccionar uno u otro elemento es el siguiente: <div id="isotopeOptions">
<?php if(!empty($tags)){ ?>
<span><strong>Filtrar por etapa:</strong></span>
<ul id="filters" class="option-set1">
<?php
foreach ($tags as $tag) {
if (($tag != 'deportivas') && ($tag != 'pastoral') && ($tag != 'idiomas') && ($tag != 'artes')) {
echo "<li><a href='#' data-filter='.".strtolower(str_replace(" ","_",$tag))."'>".$tag."</a></li>";
}
}
?>
</ul></br>
<!-- Nueva línea añadida para mostrar otra división -->
<span><strong>Filtrar por actividad:</strong></span>
<ul id="filters" class="option-set2">
<?php
foreach ($tags as $tag) {
if (($tag != 'infantil') && ($tag != 'primaria') && ($tag != 'secundaria') && ($tag != 'bachillerato')) {
echo "<li><a href='#' data-filter='.".strtolower(str_replace(" ","_",$tag))."'>".$tag."</a></li>";
}
}
?>
</ul>
<?php } ?>
<div class="clr"></div>
<?php if(!empty($catItems) || !empty($catItemTitles) || !empty($catItemDate)): ?>
<!-- Hacemos desaparecer el orden por título o por vistas
<span><strong><?php //echo JText::_('GALLERY_SORT'); ?></strong></span>
<ul id="sort" data-option-key="sortBy" class="option-set">
<li><a href="#sortBy=#title" data-option-value="title" class="selected">title</a></li>
<li><a href="#sortBy=#date" data-option-value="date">date</a></li>
<li><a href="#sortBy=#views" data-option-value="views">views</a></li>
</ul>-->
<span><strong>Orden alfabético</strong></span>
<ul id="sort_direction" data-option-key="sortAscending" class="option-set1">
<li><a href="#sortAscending=true" data-option-value="true" class="selected">ascendiente</a></li>
<li><a href="#sortAscending=false" data-option-value="false">descendiente</a></li>
</ul>
<?php endif; ?>
<!-- Quitar filtros -->
<center><ul id="filters" class="option-set"><img src="../images/necesarias/filtrar.png" /><a href="#" data-filter="*" class="selected">Quitar todos los filtros</a></ul></center>
</div>
Código:
Sé que puede ser un tanto complejo entender el problema... Pero la idea es que ambas líneas correspondan al mismo filtro, es decir, que una línea no complemente a la otra, sino que cada vez que selecciono algo de la segunda línea (cuya selección quita su subrayado) los ítems de la primera se subrayen. (function($){
$(window).load(function(){
$(window).resize(function(){
$windowWidth = $(window).width();
});
var $container = $('#isotopeContainer');
$container.isotope({
animationEngine: 'best-available',
animationOptions: {
queue: false,
duration: 800
},
containerClass : 'isotope',
containerStyle: {
position: 'relative',
overflow: 'hidden'
},
hiddenClass : 'isotope-hidden',
itemClass : 'isotope-item',
itemPositionDataEnabled: false,
layoutMode : 'fitRows',
resizable: true,
resizesContainer : true,
sortBy : 'title',
sortAscending : true,
getSortData : {
title : function ( $elem ) {
return $elem.attr('data-title');
},
date : function ( $elem ) {
return $elem.attr('data-create');
},
views : function ( $elem ) {
return parseInt( $elem.find('.catItemHits').text(), 10 );
}
},
transformsEnabled: !$.browser.opera // disable transforms in Opera
});
// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
var $optionSets = $('#isotopeOptions .optionSet'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSetN = $this.parents('.optionSet');
$optionSetN.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
}
return false;
});
});
})(jQuery);
Saludos!!
Fran
