Hello I'm working on this imagemapster show selection code. People will click on map areas to select.
<div id="veg_demo" style="width:800px; margin: auto;">
<div style="clear:both;">
<img id="fvip" width="100%" src="linkto/images/fvip_map.jpg" usemap="#fvip" >
</div>
<div style="clear:both; height:8px;"></div>
<div id="selections" style="clear:both;"></div>
<a id="show_selected" style="clear:both;">Show Selected Beds:</a>
<div id="selected" style="clear:both;"></div>
</div>
<map id="fvip_map" name="fvip">
<area shape="poly" name="915" coords="756,100,756,135,772,135,772,100" href="#" />
<area shape="poly" name="914" coords="739,100,739,135,755,135,755,100" href="#" />
<area shape="poly" name="913" coords="717,101,717,136,733,136,733,101" href="#" />
</map>
$(document).ready(function () {
var image = $('#fvip');
var xref = {
<?php if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo "'$post->ID':\"<h3>Bed number $post->ID</h3>\",";
}
wp_reset_postdata();
} else {
} ?>
};
var defaultDipTooltip = 'some text';
image.mapster(
{
render_highlight: {
fillColor: '2aff00',
stroke: true,
},
render_select: {
fillColor: '1433d3',
stroke: true,
},
fillOpacity: 0.8,
fillColor: "14b842",
strokeColor: "FFFFFF",
strokeOpacity: 0.8,
strokeWidth: 4,
stroke: true,
scaleMap: false,
isSelectable: true,
singleSelect: false,
showToolTip: true,
mapKey: 'name',
listKey: 'name',
onClick: function (e) {
var newToolTip = defaultDipTooltip;
$('#selections').html(xref[e.key]);
if (e.key==='806') {
newToolTip = "FVIP";
}
},
showToolTip: true,
toolTipClose: ["tooltip-click", "area-click", "area-mouseout"],
areas: [ <?php foreach($posts as $post) { echo "{ toolTip: \"This bed is not available for this date.\", key : \"$post->ID\", isSelectable: false },"; } ?> ]
});
function showSelect(){
$("#show_selected").bind("click", function (e) {
e.preventDefault();
$('#selected').text($("#fvip").mapster("get"));
});
}
showSelect();
});
</script>
but I have no idea on how to make the selections as a loop, eg:
<div>913</div>
<div>914</div>
<div>915</div> ... and so on
I would like to style and format each value. Right now the output of the #selected are just 913914915
any help very much appreciated...
thank you
Related
I have a website I'm working on to get a grasp on how to build websites using HTML, CSS, and JS. I'm running into an error where when I put a div above a background animation on the body, the background animation doesn't pass over the div. I don't know how to fix this, and none of my Internet searches seem to solve this issue.
Here is the CodePen for the program: https://codepen.io/ckneeland/pen/Exyjygx
The HTML file is like so:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Data</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper fade-in" id="particles-js">
<table class="center-table">
<tr>
<td><img class="resize" src="Images/Facebook.png" alt="Facebook"></td>
<td><img class="resize" src="Images/Instagram.png" alt="Instagram"></td>
<td><img class="resize" src="Images/Snapchat.png" alt="Snapchat"></td>
<td><img class="resize" src="Images/Twitter.png" alt="Twitter"></td>
<td><img class="resize" src="Images/YouTube.png" alt="YouTube"></td>
</tr>
<tr>
<br>
<br>
<td><img class="resize" src="Images/TikTok.png" alt="TikTok"></td>
<td><img class="resize2" src="Images/Google2.png" alt="Google"></td>
<td><img class="resize" src="Images/Venmo2.png" alt="Venmo"></td>
<td><img class="resize" src="Images/Reddit2.png" alt="Reddit"></td>
<td><img class="resize" src="Images/LinkedIn.png" alt="LinkedIn"></td>
</tr>
</table>
</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
And the JS / CSS files are on the CodePen, but I don't think they're the issue here
The pictures won't show up since I didn't add them to the project here
Also, a small side note: How can I center this div object vertically? It is already centered horizontally.
Use the developer tools to see where elements end. Then use absolute positioning along with an appropriate z-index to create an overlay.
In your example, as little as .center-table { position: absolute } could be what youre after.
As for your second question concenring vertical alignment, I suggest looking into layouting using flexbox.
particlesJS("particles-js", {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
color: { value: "#ffffff" },
shape: {
type: "circle",
stroke: { width: 0, color: "#000000" },
polygon: { nb_sides: 5 },
image: { src: "img/github.svg", width: 100, height: 100 }
},
opacity: {
value: 0.2,
random: false,
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 6,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 }
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: ["repulse", "bubble"] },
onclick: { enable: true, mode: "push" },
resize: true
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1 } },
bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 }
}
},
retina_detect: true
});
var count_particles, stats, update;
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
count_particles = document.querySelector(".js-count-particles");
update = function () {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
<body>
<div id="particles-js">
<div class="fade-in" >
<table class="center-table">
<tr>
<td><img class="resize" src="Images/Facebook.png" alt="Facebook"></td>
<td><img class="resize" src="Images/Instagram.png" alt="Instagram"></td>
<td><img class="resize" src="Images/Snapchat.png" alt="Snapchat"></td>
<td><img class="resize" src="Images/Twitter.png" alt="Twitter"></td>
<td><img class="resize" src="Images/YouTube.png" alt="YouTube"></td>
</tr>
<tr>
<br>
<br>
<td><img class="resize" src="Images/TikTok.png" alt="TikTok"></td>
<td><img class="resize2" src="Images/Google2.png" alt="Google"></td>
<td><img class="resize" src="Images/Venmo2.png" alt="Venmo"></td>
<td><img class="resize" src="Images/Reddit2.png" alt="Reddit"></td>
<td><img class="resize" src="Images/LinkedIn.png" alt="LinkedIn"></td>
</tr>
</table>
</div>
</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
hope this is the result you looked for , basically I have added a div for the animated background separate from the wrapper fadein div , and fadein class determined as
postion: fixed; than you can position it with left: xx;
top:xx; right:xx; bottom:xx; properties
I have an html page contain a div called wowslider-container1. I want to recreate the elements inside the wowslider-container1 when the values of properties such as duration and delay change. If I create another slider, it will create multiple sliders. If I hide, both will hide. What can I do? I don't need multiple sliders.
Duration:<input type="number" id="txtDuration" />
Delay<input type="number" id="txtDelay" />
<button onclick="set()">Set </button>
<br/>
<br/>
<div>
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor: pointer">
<img id="wows1_0" class="imgMain" src="SBG_HomePg_ANA2019_1146x405V3.jpg" len="0" alt="Consign." />
</a>
</li>
</ul>
</div>
</div>
</div>
script
var delay_value=100;
var duration_value=20;
function set() {
var dur=document.getElementById("txtDuration").value;
var del=document.getElementById("txtDelay").value;
setDuration(del, dur);
}
function setDuration(delay,duration) {
delay_value=delay;
duration_value=duration;
jQuery("#wowslider-container1").wowSlider({
effect: "fade",
prev: "",
next: "",
duration: duration_value * 100,
delay: delay_value * 100,
width: 900, height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: "parallax",
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
});
}
setDuration(20,100);
The API shows that options can only be set during slider initialization (and there's no destroy() event), so you'll have to remove the events / elements and restart the slider:
http://wowslider.com/help/wowslider-api-184.html
HTML:
Duration: <input type="number" id="txtDuration">
Delay: <input type="number" id="txtDelay">
<button onclick="set()">Set </button>
<br><br>
<div class="wow-slider-container">
<div class="wow-slider">
<div class="images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor:pointer">
<img id="wows1_0" class="imgMain" src='SBG_HomePg_ANA2019_1146x405V3.jpg' len='0' alt="Consign.">
</a>
</li>
</ul>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
var wowSliderOptions = {
effect: 'fade',
prev: '',
next: '',
duration: 20,
delay: 100,
width: 900,
height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: 'parallax',
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
}
var wowSliderContent = jQuery('.wow-slider').html();
var wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
function set() {
// Set user-defined options
wowSliderOptions.duration = document.getElementById('txtDuration').value;
wowSliderOptions.delay = document.getElementById('txtDelay').value;
// Remove original WOW Slider instance
wowSlider.remove();
// Recreate original HTML slides
jQuery('.wow-slider-container').html(wowSliderContent);
// Start WOW Slider
wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
}
</script>
What is the syntax for adding a helper function to FancyBox’s FancyApps2 close button that would turn it into a submit button?
I need to add the following:
input type="submit"
name="whereto"
value=""
Current FancyBox Function
$(function () {
$(".fancybox_iframe").fancybox({
type: 'iframe',
padding: 0,
scrolling: 'no',
width: 840,
minHeight: 150,
height: 615,
closeBtn: true,
helpers: { overlay: { closeClick: false, opacity: .5} },
afterShow: function () { $("a.fancybox-close").attr("title", null); },
afterClose: function () {
parent.close_field('notice');
parent.closeiframe_redirect('index.php');
}
});
});
You can make use of afterShow method of it:
afterShow: function () {
var input = $('<input />', {
type : "submit",
name : "whereto",
value : ""
});
$("a.fancybox-close").replaceWith(input);
},
Can you use an hidden submit button and jquery's trigger method?
http://jsfiddle.net/B6KE6/
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>
<form style='display: none;' action='#?hey-it-works' method='get'>
<input type='submit' class='fancysubmit' name='whereto' value='' />
</form>
<script type='text/javascript'>
$(document).ready(function() {
$(".fancybox").fancybox({
padding: 0,
scrolling: 'no',
width: 840,
minHeight: 150,
height: 615,
closeBtn: true,
helpers: { overlay: { closeClick: false, opacity: 0.5} },
afterShow: function () { $("a.fancybox-close").attr("title", null); },
afterClose : function() {
$(".fancysubmit").trigger('click');
return;
}
});
});
</script>
Make a submit button somewhere else, and then on afterClose use jQuery trigger to trigger the button.
I've made an imagemap with 9 areas, using mapster. Clicking an area now results in displaying some text above the imagemap. I would like to display images from several folders instead, depending on the area that is selected. When area 'kamer1' is selected on the imagemap, I would like all images from the folder '/kamer1' to be displayed above the imagemap.
It is my first time working with JavaScript, so expect it is a simple problem for someone out there.
I've made a JSFIDDLE: http://jsfiddle.net/BTnV2/7/
HTML:
<div style="clear: both; width: 900px; height: 450px;" id="details"></div>
<img id="layout" src="http://i61.tinypic.com/2yl4spc.png" usemap="#usa" style="width:900px;height:800px;">
<map id="usa_image_map" name="usa">
<area href="#" room="kamer1" full="B&B" shape="rect" coords="50,764,143,635">
<area href="#" room="kamer2" full="B&B" shape="rect" coords="146,764,238,669">
<area href="#" room="kamer3" full="B&B" shape="rect" coords="241,764,326,669">
<area href="#" room="hal" full="B&B" shape="rect" coords="146,666,326,635">
<area href="#" room="badkamer" full="B&B" shape="rect" coords="234,632,326,574">
<area href="#" room="keuken" full="B&B" shape="poly" coords="50,632,229,632,229,570,303,570,303,508,150,508,150,540,50,540">
<area href="#" room="boven" full="B&B" shape="rect" coords="50,540,150,508">
<area href="#" room="kamer4" full="B&B" shape="rect" coords="50,505,217,392">
<area href="#" room="kamer5" full="B&B" shape="rect" coords="220,505,392,392">
</map>
JS:
var xref = {
kamer1: "<b>FOTO's van kamer 1</b>",
kamer2: "<b>FOTO's van kamer 2</b>",
kamer3: "<b>FOTO's van kamer 3</b>",
hal: "<b>FOTO's van hal</b>",
badkamer: "<b>FOTO's van badkamer</b>",
keuken: "<b>FOTO's van keuken</b>",
boven: "<b>FOTO's van boven kamer</b>",
kamer4: "<b>FOTO's van kamer 4</b>",
kamer5: "<b>FOTO's van kamer 5</b>"
};
var image = $('#layout');
image.mapster({
fillOpacity: 0.5,
fillColor: "c20000",
stroke: true,
strokeColor: "c20000",
strokeOpacity: 0.8,
strokeWidth: 3,
singleSelect: true,
mapKey: 'room',
listKey: 'room',
clickNavigate: true,
fade: false,
fadeDuration: 50,
showToolTip: true,
toolTipContainer: '<div style="clear: both; align: center;"></div>',
areas: [{
key: "kamer1",
toolTip: "Groepsaccommodatie <br> kamer 1"
}, {
key: "kamer2",
toolTip: "Groepsaccommodatie <br> kamer 2"
}, {
key: "kamer3",
toolTip: "Groepsaccommodatie <br> kamer 3"
}, {
key: "hal",
toolTip: "Groepsaccommodatie <br> hal"
}, {
key: "badkamer",
toolTip: "Groepsaccommodatie <br> badkamer"
}, {
key: "keuken",
toolTip: "Keuken en eetkamer"
}, {
key: "boven",
toolTip: "Recreatieruimte"
}, {
key: "kamer4",
toolTip: "Bed & Breakfast <br> kamer 1"
}, {
key: "kamer5",
toolTip: "Bed & Breakfast <br> kamer 2"
}],
onClick: function (e) {
$('#details').html(xref[e.key]);
}
});
var xref = {
kamer1: {
"desc":"FOTO's van kamer 1",
"images":["stoel.jpg","tafel.jpg"]
},
kamer2: {
"desc":"FOTO's van kamer 2",
"images":["image1.jpg","image2.jpg"]
}
};
// note the lack of comma on the last room
onClick: function (e) {
e.preventDefault();
var room = xref[e.key];
var html = '<b>'+room.desc+'</b><br/>';
for (var i=0;i<room.images.length;i++)
html += '<img src="'+images[i]+'" alt="image #'+(i+1)+'" />';
$('#details').html(html);
}
If you do NOT know the number or name of the images you can try this:
var xref = {
kamer1: "FOTO's van kamer 1",
kamer2: "FOTO's van kamer 2",
kamer3: "FOTO's van kamer 3"
}
onClick: function (e) {
e.preventDefault();
var html = '<b>'+xref[e.key]+'</b><br/>';
var imagePath = e.key+"/"+e.key+"_";
for (var i=1;i<=5;i++) {
html += '<img src="'+imagePath+i+'" alt="image #'+(i+1)+'"'+
' onerror="this.parentNode.removeChild(this)" />';
}
$('#details').html(html);
}
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>Previous</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>
By default, Flexslider looks for the class "slides" on the UL. This is the case on your first example, on the second it is "my_slides".
You can change the class on the second slider UL, or you can specify the selector when you initialize flexslider, like this:
$("#flex-64").imagesLoaded(function () {
$("#flex-64").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
selector: '.my_slides > li',
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
});
}
});
});
Edit: I think I missed a piece of your question. If I understand correctly, you're trying to provide Flexslider with two different selectors for it to potentially act on? This should work, but it's not represented in your code. Am I missing something?