I am creating website with Wp theme and i am creating using image gallery with isotope with http://jasonskinner.me/2013/04/creating-a-filterable-wordpress-photo-gallery/ as my preference. Now i want to make my isotope filter can be opened using external link by using cat link ex #art-concept. I have tried every guide but still my url link didn’t change. Can anyone helped me? I am still new to this.
btw my code :
//put jQuery in noConflict mode
var $j = jQuery.noConflict();
$j(document).ready(function() {
//----------------------------------------------
//--------------------------------------fancybox
//----------------------------------------------
//simple fancybox start
$j('.fancybox').fancybox({
//make sure fancybox knows we are loading images from wordpress
'type': 'image',
'autoSize' : true,
//lock the background when fancybox is active so weird padding doesn't show up
helpers : {
overlay : {
locked : false
}
}
});
//----------------------------------------------
//---------------------------------------isotope
//----------------------------------------------
//set container variable so we don't have to type alot
var $container = $j('.photogal');
//run function when all images touched by isotope are loaded
$container.imagesLoaded( function(){
//set parameters
$container.isotope({
//tell isotope what to target
itemSelector : '.element',
//set the layout mode
layoutMode: 'fitRows',
//tell isotope to use CSS3 if it can and fallback to jQuery
animationEngine : 'best-available',
//set masonry parameter
masonry: {
//we want 5 columns
columnWidth: $container.width() / 5
}
});
});
//tell isotope our filters are in the options id & links
var $optionSets = $j('#options'),
$optionLinks = $optionSets.find('a');
//click function to sort by data
$optionLinks.click(function(){
var $this = $j(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.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;
});
});
$(function(){
var $container = $('#filter'),
$body = $('body'),
colW = 60,
columns = null;
$container.isotope({
// disable window resizing
resizable: false,
masonry: {
columnWidth: colW
}
});
$(window).smartresize(function(){
// check if columns has changed
var currentColumns = Math.floor( ( $body.width() -10 ) / colW );
if ( currentColumns !== columns ) {
// set new column count
columns = currentColumns;
// apply width to container manually, then trigger relayout
$container.width( columns * colW )
.isotope('reLayout');
}
}).smartresize(); // trigger resize to set container width
});
and i have custom tag cloud here, is it affected my url link?
//----------------------------------------------
//-------------------custom tag cloud generation
//----------------------------------------------
function jss_generate_tag_cloud( $tags, $args = '' ) {
global $wp_rewrite;
//don't touch these defaults or the sky will fall
$defaults = array(
'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 0,
'format' => 'flat', 'separator' => "n", 'orderby' => 'name', 'order' => 'ASC',
'topic_count_text_callback' => 'default_topic_count_text',
'topic_count_scale_callback' => 'default_topic_count_scale', 'filter' => 1
);
//determine if the variable is null
if ( !isset( $args['topic_count_text_callback'] ) && isset( $args['single_text'] ) && isset( $args['multiple_text'] ) ) {
//var_export
$body = 'return sprintf (
_n(' . var_export($args['single_text'], true) . ', ' . var_export($args['multiple_text'], true) . ', $count), number_format_i18n( $count ));';
//create_function
$args['topic_count_text_callback'] = create_function('$count', $body);
}
//parse arguments from above
$args = wp_parse_args( $args, $defaults );
//extract
extract( $args );
//check to see if they are empty and stop
if ( empty( $tags ) )
return;
//apply the sort filter
$tags_sorted = apply_filters( 'tag_cloud_sort', $tags, $args );
//check to see if the tags have been pre-sorted
if ( $tags_sorted != $tags ) { // the tags have been sorted by a plugin
$tags = $tags_sorted;
unset($tags_sorted);
} else {
if ( 'RAND' == $order ) {
shuffle($tags);
} else {
// SQL cannot save you
if ( 'name' == $orderby )
uasort( $tags, create_function('$a, $b', 'return strnatcasecmp($a->name, $b->name);') );
else
uasort( $tags, create_function('$a, $b', 'return ($a->count > $b->count);') );
if ( 'DESC' == $order )
$tags = array_reverse( $tags, true );
}
}
//check number and slice array
if ( $number > 0 )
$tags = array_slice($tags, 0, $number);
//set array
$counts = array();
//set array for alt tag
$real_counts = array();
foreach ( (array) $tags as $key => $tag ) {
$real_counts[ $key ] = $tag->count;
$counts[ $key ] = $topic_count_scale_callback($tag->count);
}
//determine min coutn
$min_count = min( $counts );
//default wordpress sizing
$spread = max( $counts ) - $min_count;
if ( $spread <= 0 )
$spread = 1;
$font_spread = $largest - $smallest;
if ( $font_spread < 0 )
$font_spread = 1;
$font_step = $font_spread / $spread;
$a = array();
//iterate thought the array
foreach ( $tags as $key => $tag ) {
$count = $counts[ $key ];
$real_count = $real_counts[ $key ];
$tag_link = '#' != $tag->link ? esc_url( $tag->link ) : '#';
$tag_id = isset($tags[ $key ]->id) ? $tags[ $key ]->id : $key;
$tag_name = $tags[ $key ]->name;
//If you want to do some custom stuff, do it here like we did
//call_user_func
$a[] = "<a href='#filter=$tag_name' class='tag-link-$tag_id'
data-option-value='.$tag_name'
title='" . esc_attr( call_user_func( $topic_count_text_callback, $real_count ) ) . "'>$tag_name</a>"; //background-color is added for validation purposes.
}
//set new format
switch ( $format ) :
case 'array' :
$return =& $a;
break;
case 'list' :
//create our own setup of how it will display and add all
$return = "<ul id='filters' class='option-set' data-option-key='filter'>nt
<li><a href='filter' data-option-value='*' class='selected'>All</a></li>
<li>";
//join
$return .= join( "</li>nt<li>", $a );
$return .= "</li>n</ul>n";
break;
default :
//return
$return = join( $separator, $a );
break;
endswitch;
//create new filter hook so we can do this
return apply_filters( 'jss_generate_tag_cloud', $return, $tags, $args );
}
My website is www.uniqueconceptz.com.
Thanks before.
