Why is one of the selectors in Flexslider working and the second one isn't?
I am trying to use two selectors in Wootheme's Flexslider inside
wordpress, because I need to use different styles for my slides on
different pages.
When I add this line to the slider's code,
selector: ".slides > li, .my_slides > li"
.sldes > li, - is working fine, but .my_slides - isn't working.
Here is the link to the sliders code:
https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js
Here is the the code where I use .slides and .my_slides:
/* *********** (12) Display Post Format ******** */
function swm_display_post_format() {
$format = get_post_format();
if(empty($format)) {
$format = 'standard';
}
if( $format == 'standard' || $format == 'gallery' || $format ==
'image' || $format == 'video' ) {
get_template_part( 'includes/' . $format );
}
}
/* ************* (13) Blog Gallery Slider ************* */
if ( !function_exists( 'swm_blog_gallery' ) ) {
function swm_blog_gallery($postid, $image_size) { ?>
<script type="text/javascript">
jQuery(document).ready(function($){
if ( $.browser.msie ){
if($.browser.version == '8.0') {
$("#flex-<?php echo $postid; ?>").flexslider({
slideshow: false,
controlNav: true,
smoothHeight: true,
start: function(slider) {
slider.container.click(function(event) {
if( !slider.animating )
slider.flexAnimate(
slider.getTarget('next') );
});
}
});
}
}
$("#flex-<?php echo $postid; ?>").imagesLoaded(
function() {
$("#flex-<?php echo $postid; ?>").flexslider({
slideshow: false,
controlNav: true,
smoothHeight: true,
start: function(slider) {
slider.container.click(function(event) {
if( !slider.animating )
slider.flexAnimate(
slider.getTarget('next') );
});
}
});
});
});
</script>
<?php
$gal_images = rwmb_meta( 'swm_pf_gallery_photos',
'type=thickbox_image' );
$meta_gallery_img_height = rwmb_meta(
'swm_meta_gallery_img_height');
echo "<div class='pf_featured_img pf_l_img'><div
class='swm_slider_box'><div id='flex-$postid'
class='flexslider pfi_gallery'>";
if ( $gal_images ) {
echo "<ul class='slides'>";
foreach ( $gal_images as $gal_image ) {
// $swm_gal_image = "{$gal_image['url']}";
$swm_gal_image = swm_resize($gal_image['url'], 635,
425, $meta_gallery_img_height, true,'c',true);
echo "<li><img src='$swm_gal_image' alt='' /></li>";
}
echo '</ul>';
}
echo "</div></div></div>";
}
}
/* **************** (12) Display MY Post Format
**************************** */
function swm_display_my_post_format() {
$format = 'gallery1';
get_template_part( 'includes/' . $format );
}
/* ***********************(13) Blog MY Gallery Slider
*********************** */
if ( !function_exists( 'swm_my_blog_gallery' ) ) {
function swm_my_blog_gallery($postid, $image_size) { ?>
<script type="text/javascript">
jQuery(document).ready(function($){
if ( $.browser.msie ){
if($.browser.version == '8.0') {
$("#flex-<?php echo $postid; ?>").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
start: function(slider) {
slider.container.click(function(event) {
if( !slider.animating )
slider.flexAnimate(
slider.getTarget('next') );
});
}
});
}
}
$("#flex-<?php echo $postid; ?>").imagesLoaded(
function() {
$("#flex-<?php echo $postid; ?>").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
start: function(slider) {
slider.container.click(function(event) {
if( !slider.animating )
slider.flexAnimate(
slider.getTarget('next') );
});
}
});
});
});
</script>
<?php
$gal_images = rwmb_meta( 'swm_pf_gallery_photos',
'type=thickbox_image' );
$meta_gallery_img_height = rwmb_meta(
'swm_meta_gallery_img_height');
echo "<div class='pf_featured_img pf_l_img'><div
class='my_swm_slider_box'><div id='flex-$postid'
class='flexslider pfi_gallery'>";
if ( $gal_images ) {
echo "<ul class='my_slides'>";
foreach ( $gal_images as $gal_image ) {
// $swm_gal_image = "{$gal_image['url']}";
$swm_gal_image = swm_resize($gal_image['url'], 510,
410, $meta_gallery_img_height, true,'c',true);
echo "<li><img src='$swm_gal_image' alt='' /></li>";
}
echo '</ul>';
}
echo "</div></div></div>";
}
}
This is generated HTML where it is working:
<div class="best_img_wrap">
<div class="best_img">
<script type="text/javascript">
jQuery(document).ready(function ($) {
if ($.browser.msie) {
if ($.browser.version == '8.0') {
$("#flex-42").flexslider({
slideshow: false,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function
(event) {
if (!slider.animating)
slider.flexAnimate(slider.getTarget('next'));
});
}
});
}
}
$("#flex-42").imagesLoaded(function () {
$("#flex-42").flexslider({
slideshow: false,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating)
slider.flexAnimate(slider.getTarget('next'));
});
}
});
});
});
</script>
<div class="pf_featured_img pf_l_img">
<div class="swm_slider_box">
<div class="flexslider pfi_gallery" id="flex-42"
style="height: 425px;">
<ul class="slides">
<li style="width: 100%; float: left;
margin-right: -100%; position: relative;
opacity: 1;
display: block; z-index: 2;"
class="flex-active-slide">
<img alt=""
src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-5-0x0_1.jpg"
draggable="false"></li><li
style="width: 100%; float: left;
margin-right: -100%;
position: relative; opacity:
0; display: block; z-index:
1;">
<img alt=""
src="http://localhost/inst_new/wp-content/uploads/2013/08/rp_11-0x0_1.jpg"
draggable="false"></li><li
style="width: 100%; float:
left; margin-right: -100%;
position: relative;
opacity: 0; display:
block; z-index: 1;">
<img alt=""
src="http://localhost/inst_new/wp-content/uploads/2013/08/violin-0x0_1.jpg"
draggable="false"></li></ul>
<ol class="flex-control-nav flex-control-paging">
<li><a
class="flex-active">1</a></li><li><a>2</a></li><li><a>3</a></li></ol>
<ul class="flex-direction-nav">
<li><a href="#"
class="flex-prev">Previous</a></li><li><a
href="#" class="flex-next">
Next</a></li></ul>
</div>
</div>
</div>
</div>
</div>
And here is generated HTML where it is NOT working:
<div class="my_post_wrapper">
<p>
</p>
<div class="caty_name">
<a rel="category" title="View all posts in Crack Repairs"
href="http://localhost/inst_new/?cat=8">
Crack Repairs</a></div>
<p>
</p>
<div class="my_post_title">
<h3>
<a title="Permanent Link to Recent Post 3 + Crack Repair"
href="http://localhost/inst_new/?p=64"
class="service_single_title"></a>
<div class="caty_title">
<a title="Permanent Link to Recent Post 3 + Crack
Repair" href="http://localhost/inst_new/?p=64"
class="service_single_title">Recent Post 3 + Crack
Repair</a></div>
</h3>
</div>
<!-- .post title -->
<div class="my_post_content featured_post">
<script type="text/javascript">
jQuery(document).ready(function ($) {
if ($.browser.msie) {
if ($.browser.version == '8.0') {
$("#flex-64").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating)
slider.flexAnimate(slider.getTarget('next'));
});
}
});
}
}
$("#flex-64").imagesLoaded(function () {
$("#flex-64").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating)
slider.flexAnimate(slider.getTarget('next'));
});
}
});
});
});
</script>
<div class="pf_featured_img pf_l_img">
<div class="my_swm_slider_box">
<div class="flexslider pfi_gallery" id="flex-64">
<ul class="my_slides">
<li>
<img alt=""
src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-1-0x0_1.jpg"></li><li>
<img alt=""
src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-71-0x0_1.jpg"></li></ul>
</div>
</div>
</div>
<p>
<a class="white_button"
href="http://localhost/inst_new/?p=64">Read more
>></a></p>
</div>
</div>
No comments:
Post a Comment