I have this script.
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function(){
$("#image_results").load('/gallary1.php');
});
});
</script>
When I click the send button it should load gallary1.php into the image_results <Div> however it doesn't load it properly?
If I just use the include_once("gallary1.php"); command inside the <Div> then is displays properly. I'm guessing the Script is changing the code somehow but have no idea how.
Below is the php page I'm trying to load in.
$gallary="";
$gallary.='
<div class="content">
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>';
echo $gallary;
Any help would be greatly appreciated. Also if there is any more info I need to provide please let me know.
I have found that if I load gallary1.php via include then the resulting html is:
<div class="content">
<div id="rg-gallery" class="rg-gallery"><div class="rg-view"></div>
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul style="width: 154px; display: block; margin-left: 0px;">
<li class="selected" style="margin-right: 3px; width: 69px;"><img src="http://www.fyom.16mb.com/images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded"></li>
<li style="margin-right: 3px; width: 69px;"><img src="http://www.fyom.16mb.com/images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale"></li>
</ul>
</div>
<div class="es-nav"><span class="es-nav-prev" style="display: none;">Previous</span><span class="es-nav-next" style="display: none;">Next</span></div></div>
</div>
<div class="rg-image-wrapper"> <div class="rg-image-nav"> Previous Image Next Image </div> <div class="rg-image"><img src="images/1.jpg"></div> <div class="rg-loading" style="display: none;"></div> <div class="rg-caption-wrapper"> <div class="rg-caption" style=""> <p>From off a hill whose concave womb reworded</p> </div> </div> </div></div>
</div>
However when is loaded via the script:
<div class="content">
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded"></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
So something is not being picked up. As is it displaying what I echo out however when the page loaded properly is is inheriting additional formatting.
You can substitute using .html for php, as no dynamic data appears to be included at html echoed from php
gallary1.html
<div class="content">
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
javascript
$(document).ready(function(){
$("#send").click(function(){
$("#image_results").load("gallary1.html");
});
});
plnkr http://plnkr.co/edit/VN5KUgrXpZtrkCAKr2I6?p=preview
Assuming you do get html loaded ( still not clear after numerous requests for clarification) ... I believe you have some sort of carousel plugin involved that you need to initialize on the new html in load callback
$("#send").click(function(){
$("#image_results").load("gallary1.html", function(){
// new html now exists, iniitlaize plugin now
$(this).myCarouselPlugin();
});
});
You can try this way:
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function(){
$.get('/gallary1.php', function(result) {
$("#image_results").html(result);
})
});
});
</script>`
And in your gallary1.php:
//echo your html here
Or the second way:
Your gallary1.php:
require_once('content.php');
then create another php file of content content.php:
//your html here, don't have to use echo
you must see if you call your gallary1.php directly in the browser, it's give you something..
You can look at the chmod ( 755 for example) of this file ..
if your file is in the same folde, you can put:
$("#image_results").load('gallary1.php');//without the /
Related
<div id="page1" data-role="page">
<div data-role="header" data-position="fixed" align="center"><img src="img/VAWE-long-300x30-transparent.png" width="300" height="30" alt="" /></div>
<div data-role="content" style="margin:0; padding:0;">
<div id="wowslider-container1" style="padding-bottom:10px;">
<div class="ws_images">
<ul>
<li><img src="data1/images/catering_1.png" alt="" title="" id="wows1_0" /></li>
<li><img src="data1/images/rev._pamela_a._mann.png" alt="wowslider.com" title="" id="wows1_1" /></li>
<li><img src="data1/images/catering.png" alt="" title="" id="wows1_2" /></li>
</ul>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<div style="padding-bottom:5px;">
<img src="img/Wedding in a Box.png" style="width:100%!important;">
</div>
<div style="padding-bottom:5px;">
<img src="img/Flutter My Shutter.png" style="width:100%!important;">
</div>
<div style="padding-bottom:5px;">
<img src="img/Brock's riverside.png" style="width:100%!important;">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" class="ui-nodisc-icon">
<ul>
<li>Home</li>
<li>Events</li>
<li>Vendors</li>
<li>Map</li>
<li>Profile</li>
</ul>
</div>
</div>
</div>
I'm wondering if there is a way I can change the "Vendors" menu item as shown above, and change the text and icon to something different using jQuery in a pageinit function?
This would find an a element with the string Vendors in it, replace that string. It then can remove the class for the icon and replace it with something else.
$("a:contains('Vendors')").text('Different String');
$("a:contains('Vendors')").removeClass('ui-icon-search').addClass('ui-icon-location');
I just added a slider and carousel to my Volusion website homepage.
However, when I went to the page, the first carousel image would blow up to a huge size (original size is only 180 x 270) and flash twice. So I looked through the code and removed a line:
<script src="/v/vspfiles/templates/192/homepage/js/jquery.js" type="text/javascript"></script>
Because I thought maybe it's trying to load the javascript twice or something.
After I did this, the carousel image still blows up to a huge size on load, but only once.
Here is the page where it is happening on: http://www.wallsrepublic.com
All of the relevant code I have on my home page is below:
<script src="/v/vspfiles/templates/192/homepage/js/mobilyslider.js" type="text/javascript"></script>
<script src="/v/vspfiles/templates/192/homepage/js/init.js" type="text/javascript"></script>
For the main slider:
<link rel="stylesheet" href="http://www.wallsrepublic.com/v/slider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.wallsrepublic.com/v/Slider/jquery.flexslider.js"></script>`
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$(".flexslider").flexslider();
});
$(window).load(function() {
$(".flexslider").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
<div class="flexslider" style="width:auto;overflow:hidden;">
<ul class="slides">
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm' ><img alt='Home Wallpaper' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Murals' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide2-1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Sale' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide3.jpg" height='452' width='975' border='0' /></a>
</li>
</ul>
</div>
For the problematic carousel:
<script src="http://wallsrepublic.com/v/carousel/amazingcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="http://wallsrepublic.com/v/carousel/initcarousel-1.css">
<script src="http://wallsrepublic.com/v/carousel/initcarousel-1.js"></script>
<!-- PRODUCT CAROUSEL -->
<div id="amazingcarousel-container-1">
<div id="amazingcarousel-1" style="display:block;position:relative;width:100%;max-width:900px;margin:0px auto 0px;">
<div class="amazingcarousel-list-container">
<ul class="amazingcarousel-list">
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-damask-wallpaper-p/r2067-parent.htm" title="GOLD DAMASK " ><img src="http://wallsrepublic.com/v/carousel/1.png" alt="GOLD DAMASK " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD DAMASK </div>
<div class="amazingcarousel-description">$159 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/grey-overlay-wallpaper-p/s43712-parent.htm" title="GREY OVERLAY " ><img src="http://wallsrepublic.com/v/carousel/2.png" alt="GREY OVERLAY " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GREY OVERLAY </div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-white-dogstooth-wallpaper-p/r2542-parent.htm" title="BLACK & WHITE DOGSTOOTH " ><img src="http://wallsrepublic.com/v/carousel/3.png" alt="BLACK & WHITE DOGSTOOTH " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE DOGSTOOTH </div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/brown-fawn-wallpaper-p/r2339-parent.htm" title="BROWN FAWN " ><img src="http://wallsrepublic.com/v/carousel/4.png" alt="BROWN FAWN " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BROWN FAWN </div>
<div class="amazingcarousel-description">$139 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/R1373-p/r1373-parent.htm" title="SERENITY SAND" ><img src="http://wallsrepublic.com/v/carousel/5.png" alt="SERENITY SAND" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">SERENITY SAND</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/taupe-stone-modern-residential-wallpaper-R1875-p/r1875-parent.htm" title="BLOCK-STONE GREY" ><img src="http://wallsrepublic.com/v/carousel/6.png" alt="BLOCK-STONE GREY" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLOCK-STONE GREY</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/marsala-running-brick-wallpaper-p/r2587-parent.htm" title="MARSALA RUNNING BRICK" ><img src="http://wallsrepublic.com/v/carousel/7.png" alt="MARSALA RUNNING BRICK" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">MARSALA RUNNING BRICK</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/geometric-gold-residential-wallpaper-R1861-p/r1861-parent.htm" title="TIA GOLD" ><img src="http://wallsrepublic.com/v/carousel/8.png" alt="TIA GOLD" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">TIA GOLD</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/antique-world-map-mural-p/m9167-parent.htm" title="ANTIQUE WORLD MAP MURAL" ><img src="http://wallsrepublic.com/v/carousel/9.png" alt="ANTIQUE WORLD MAP MURAL" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">ANTIQUE WORLD MAP MURAL</div>
<div class="amazingcarousel-description">$399 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/blue-wood-pattern-residential-wallpaper-R1878-p/r1878-parent.htm" title="BRUSHED WOOD BLUE" ><img src="http://wallsrepublic.com/v/carousel/10.png" alt="BRUSHED WOOD BLUE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BRUSHED WOOD BLUE</div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-and-white-lattice-wallpaper-p/r2548-parent.htm" title="BLACK & WHITE LATTICE" ><img src="http://wallsrepublic.com/v/carousel/11.png" alt="BLACK & WHITE LATTICE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE LATTICE</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-victorian-wallpaper-p/s43751-parent.htm" title="GOLD VICTORIAN" ><img src="http://wallsrepublic.com/v/carousel/12.png" alt="GOLD VICTORIAN" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD VICTORIAN</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
</ul>
<div class="amazingcarousel-prev"></div>
<div class="amazingcarousel-next"></div>
</div>
<div class="amazingcarousel-nav"></div>
</div>
</div>
I had the javascript and css files in my template header before, but then the slideshows did not work so I had to move them to be directly on the home page.
Any help would be appreciated.
$(window).load(function() {
$(".flexslider").flexslider();
});
Try to remove those lines, you are calling the slider 2 times for the same class.
I don't think it's an issue with Flexslider that's causing this.
As far as I can tell, it is caused by the wallpaper swatch displaying at 100% width before the amazing carousel plugin kicks in and wraps the image to a smaller width.
Try adding this to your stylesheet
.amazingcarousel-item {
float: left;
width: 150px;
}
This will give the carousel item a width by default, which in turn causes the image inside it to be a smaller width.
I want to make gallery view using jqtouch js library so I try to insert image using function the it show nothing but when am not using function then it work properly , also used document.getElementById("#").innerHTML it nor working when I simply insert image it show so plz help
<script>
function fun(){
$("#thumbs_container").append('<ul id="thumbs" class="thumbView" style="display:none;"><li class="pic"><img src="thumbs/1.jpg" alt="images/1.jpg" title="this is a description"/></li></ul>');
}
</script>
<body onLoad="fun();">
<div id="about" class="selectable">
<p><img src="codropsIcon.png"/></p>
<p>
<strong>Wonderwall Image Gallery</strong>
By Codrops
</p>
<p>A web app created with <br /> <strong>jQTouch</strong></p>
<p><br /><br />Close</p>
</div>
<!-- The list of images (thumbs) -->
<div id="thumbs_container" class="current">
<div class="toolbar">
<h1>Thumbs</h1>
<a class="button slideup" id="infoButton" href="#about">About</a>
</div>
<!--<ul id="thumbs" class="thumbView" style="display:none;">
<li class="pic"><img src="thumbs/1.jpg" alt="images/1.jpg" title="this is a description"/></li>
<li class="pic"><img src="thumbs/2.jpg" alt="images/2.jpg" title="great!"/></li>
</ul>-->
</div>
<!-- The single image container -->
<div id="photo_container">
<div class="toolbar">
<h1>Photo</h1>
<a class="back" href="#thumbs_container">Photos</a>
<a class="button slideup" id="infoButton" href="#about">About</a>
</div>
<div class="loader" style="display:none;"></div>
<div id="theimage" class="singleimage"></div>
<div class="descriptionWrapper">
<p id="description"></p>
<div id="prev" style="display:none;"></div>
<div id="next" style="display:none;"></div>
</div>
</div>
</body>
</html>
You have style="display:none; set within your function. Remove this and it should work ok.
1) You need to include jQuery in your page. Maybe you copypasted just an part of your file, but make sure you do something like this to include jQuery:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
2) The HTML you are appending has the following attribute:
style="display:none;"
So even if this works, you will not see the image.
3) Finally, make sure the image you are trying to show exists.
I am trying to create image map tool tips and the image map works fine as in the fiddle.
However when i try to implement the following code in wordpress, the page does not load.
Please help:
Code:
<script type="text/javascript" src="js/mytooltip.js"></script>
<div id="wrapper">
<img width="920" height="450" src="http://www.red-team-design.com/wp-content/uploads/2011/10/world-map.jpg" alt="World continents">
<div class="pin pin-down" data-xpos="170" data-ypos="100">
<h2>North America</h2>
<ul>
<li><b>Area (km�):</b> 24,490,000</li>
<li><b>Population:</b> 528,720,588</li>
</ul>
</div>
<div class="pin" data-xpos="270" data-ypos="320">
<h2>South America</h2>
<ul>
<li><b>Area (km�):</b> 17,840,000</li>
<li><b>Population:</b> 382,000,000</li>
</ul>
</div>
<div class="pin pin-down" data-xpos="450" data-ypos="110">
<h2>Europe</h2>
<ul>
<li><b>Area (km�):</b> 10,180,000</li>
<li><b>Population:</b> 731,000,000 </li>
</ul>
</div>
<div class="pin" data-xpos="450" data-ypos="250">
<h2>Africa</h2>
<ul>
<li><b>Area (km�):</b> 30,370,000</li>
<li><b>Population:</b> 1,022,011,000</li>
</ul>
</div>
<div class="pin pin-down" data-xpos="650" data-ypos="130">
<h2>Asia</h2>
<ul>
<li><b>Area (km�):</b> 43,820,000</li>
<li><b>Population:</b> 3,879,000,000</li>
</ul>
</div>
<div class="pin pin-down" data-xpos="750" data-ypos="310">
<h2>Australia</h2>
<ul>
<li><b>Area (km�):</b> 9,008,500</li>
<li><b>Population:</b> 31,260,000</li>
</ul>
</div>
</div>
Make sure that you've loaded jQuery properly and before your jQuery code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Besides that, maybe there is a conflict between jQuery and Wordpress, try to resolve it by using:
jQuery(document).ready(function($){
// Your code here
});
Hi I am using a javascript to get tabs functionality for buttons. In each tab I want to show a slider for which I am showing anything slider. The issue I am facing is the slider content is not showing in the 2nd and 3rd tabs.There is no issue with tabs functionality.tabs function working fine.I can able to switch from one tab to other.Could anyone help me.
Here is the script I am using for tabs functionality
<script type="text/javascript">
$(document).ready(function () {
var tabContainers = $('div.spec-nav > div');
tabContainers.hide().filter(':first').show();
$('div.spec-nav ul li a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.spec-nav ul li a').removeClass('spec-actv');
$(this).addClass('spec-actv');
return false;
}).filter(':first').click();
});
</script>
HTML code for tabs and slider
<div class="spec-nav">
<ul class="serv-nav">
<li id="p1">Tab1</li>
<li id="p2">Tab2</li>
<li id="p3">Tab3</li>
</ul>
<div id="first" class="anythingSlider-theme2" style="display:block;float:left;">
<!-- AnythingSlider #1 -->
<ul id="slider1">
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
</ul> <!-- END AnythingSlider #1 -->
</div><!--first-->
<div id="second" class="anythingSlider-theme3" style="display:none;float:left;">
<ul id="slider2">
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
</ul> <!-- END AnythingSlider #2 -->
</div><!--second-->
<div id="third" class="anythingSlider-theme4" style="display:none;float:left;">
<ul id="slider3">
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
<li>
<div class="google">
<img src="images/google.png" alt="google" class="left" />
<div class="sec left">
<p>We understand that navigating the maze</p>
START NOW
</div>
</div><!--google-->
</li>
</ul> <!-- END AnythingSlider #3 -->
</div><!--third-->
</div><!--spec-nav-->
Intializtion code of anthing slider
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
$(document).ready(function(){
$(function(){
$('#slider1').anythingSlider({
theme : 'metallic',
easing : 'easeInOutBack',
navigationFormatter : function(index, panel){
return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
},
onSlideComplete : function(slider){
// alert('Welcome to Slide #' + slider.currentPage);
}
});
});
});
Is there a slider in the second and third tabs?
I used your code to put together this demo and it all seems to work for me.
Also, you don't need to wrap the code in two document ready functions, just one is enough:
$(function () { // same as $(document).ready(function(){
$('#slider1').anythingSlider({
theme: 'metallic',
easing: 'easeInOutBack',
navigationFormatter: function (index, panel) {
return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
},
onSlideComplete: function (slider) {
// alert('Welcome to Slide #' + slider.currentPage);
}
});
});