I'm really new to coding especially JavaScript..
I can't seem to get Owl Carousel to work :(
when I'm saving my main.js file in Brackets I get a few errors:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
The Errors:
$' was used before it was defined. $(document).ready(function(){
1
Expected exactly one space between 'function' and '('. $(document).ready(function(){
1
Expected exactly one space between ')' and '{'. $(document).ready(function(){
1
Missing space between ')' and '{'. $(document).ready(function(){
2
Missing 'use strict' statement. $(".owl-carousel").owlCarousel();
I'm about to go crazy because I've included everything right and I don't have a fing clue what the errors mean...
here's my index.html
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
Please help, thanks :)
First of all please remove 2.2.4 and 1.12.4 jquery libraries. Secondly for main.js. Follow this code.
$(".owl-carousel").owlCarousel({
responsiveClass: true,
dots: true,
dotsContainer: false,
loop: true,
autoWidth: true,
autoplay:true,
nav:true,
smartSpeed:1000,
items:4,
responsive: {
0: {
items:1,
margin: 250,
center: true
},
768: {
items:3,
margin:200,
center: false
},
992: {
items:3,
margin: 350,
center: true
},
1200: {
items:3,
margin:350,
center: true
},
},
});
Add following CSS
.owl-nav {
text-align: center;
}
Then add owl.carousel.min.css in the style sheet
https://cdn.boomcdn.com/libs/owl-carousel/2.3.4/assets/owl.carousel.min.css"
Demo link for working Responsive Owl Carousel at JSFiddle
You can add customise CSS and add changes accordingly. Please refer Owl Carousel Documentation here
Related
I try to learn gulp. I have a task which concat all js lib into one lib.min.js
gulp.task("lib-js:build", function () {
return gulp.src(templates[template].src.libsJs)
.pipe(concat("libs.min.js"))
.pipe(uglify())
.pipe(gulp.dest(templates[template].dist.js));
});
variable templates[template].src.libsJs is a array with following values:
var templates = {
balmy: {
dist: {
default: "templates/balmy/dist",
html: "templates/balmy/dist/",
js: "templates/balmy/dist/resources/js/",
css: "templates/balmy/dist/resources/css/",
fonts: "templates/balmy/dist/resources/fonts/",
img: "templates/balmy/dist/resources/img/"
},
src: {
html: "templates/balmy/*.html",
js: "templates/balmy/resources/js/*.js",
css: "templates/balmy/resources/css/balmy.css",
fonts: "templates/balmy/resources/fonts/**/*.*",
fontsCss: "templates/balmy/resources/css/fonts.css",
img: "templates/balmy/resources/img/**/*.*",
libsJs: [
"lib/jquery/v3.1.1/jquery-3.1.1.min.js",
"lib/jquery-easing/v1.3/jquery.easing.min.js",
"lib/bootstrap/v4.0.0-alpha.6/bootstrap.min.js",
"lib/magnific-popup/v1.1.0/magnific-popup.js",
"lib/owl-carousel/v2.2.1/owl.carousel.min.js",
"lib/bootstrap-multiselect/bootstrap-multiselect.min.js",
"lib/bootstrap-multiselect/bootstrap-multiselect-collapsible-groups.min.js",
"lib/viewportchecker/v1.8.7/viewportchecker.min.js"
],
libsCss: [
"lib/owl-carousel/v2.2.1/owl.carousel.min.css",
"lib/owl-carousel/v2.2.1/owl.theme.default.min.css",
"lib/animation/v3.5.1/animate.min.css",
"lib/magnific-popup/v1.1.0/magnific-popup.css",
"lib/bootstrap-multiselect/bootstrap-multiselect.min.css"
]
},
needBootstrap: true
}
}
Where templates is variable which describe all possible site template. When I excecute:
gulp build --template balmy
I also set parametr with name of template which I would like build.
After that I include this js file into my html and try to use a owl carousel function:
<script src="resources/js/libs.min.js"></script>
<script>
$(document).ready(function () {
$(".all-events-carousel").owlCarousel({
loop: true,
margin: 10,
items: 1,
animateOut: 'slideOutDown',
animateIn: 'flipInX',
autoplay: true
})
});
</script>
This code close to bottom of body. In browser console I see next exception:
But if delete from html a concat js and add all concated js files it will work fine.
This is the result libs.min.js which only concatenated and didn't minified (without call uglify)
Maybe anybody know why does it happen?
It's not a good practice usually to run the uglify plugin on already minified files. I can see that most of your referred JavaScript files are already minified.
Minification in general can potentially remove exposed functionality.
Please try to remove the uglify call from the chain and see if that works.
I checked your attached libs.min.js file and you are missing Tether for bootstrap 4. See this question to resolve it: How to fix the error; 'Error: Bootstrap tooltips require Tether .
I quickly tried to put together your libs.min.js together with Tether from CDN and the owlCarousel CSS in an index.html file and it works:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script src="libs.min.js" type="text/javascript"></script>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
<script>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
</script>
</body>
</html>
I would add JS syntax checking before and after concat() and leave out uglify() for the time being. That might help to narrow down the problem.
const jsValidate = require('gulp-jsvalidate');
gulp.task("lib-js:build", function () {
return gulp.src(templates[template].src.libsJs)
.pipe(jsValidate())
.pipe(concat("libs.min.js"))
.pipe(jsValidate())
.pipe(gulp.dest(templates[template].dist.js));
});
Maybe there is a naming conflict in those js files, there are two file both has a variable named $ and the latter is not a jQuery obj, and when you add files separately the jQuery load latter exactly. You can do a search in those files.
I have IE 11 and I am trying to open a dialog box with the click of a button but the dialog box which is opening is not what I want. It doesn't have a close icon and the layout is also very poor.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="//malsup.github.com/jquery.form.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-style:ridge;white-space: pre-wrap">
<div class="dialog">
<p style="white-space: pre-wrap"><%=solution%></p>
</div>
<button class="opener">Open Dialog</button>
</td>
I have added pre-wrap everywhere but the text seems to come in a single line. The text is properly formatted in the database.
JQuery code :
$('.opener').each(function() {
var dialog = $(this).prev('.dialog').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$(this).click(function () {
dialog.dialog("open");
});
});
});
Ah Ha... I re-read your question and I think I understand the problem you are seeing.
jQuery UI dialogs require (1) the jQuery UI css reference, AS WELL AS (2) the jQuery UI code, AS WELL AS (3) plain ol' jQuery.
Equally important, you need to match the versions. When the versions do not match (especially when jQUI and the css for jQUI are for different versions), buttons will be out of alignment, borders will be missing, the whole appearance is whacked. You have version-itis (note: -itis is Latin suffix for pain).
Suggestion:
Remove all references to jQuery/jQuery UI in your code and add the following lines inside the <head> tags of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
This will give you a version of jQuery / jQueryUI / css that are known to work together. If it works, you can even stick with it.
Reference:
Matching jQuery and jQuery-UI versions
It dosen't have a close icon and the layout is also very poor
I've just test your example, it's worked perfectly in IE 11.
HTML:
<div class="dialog">
<p style="white-space: pre-wrap">123123123</p>
</div>
<button class="opener">Open Dialog</button>
JS:
$('.opener').each(function(){
var dialog = $(this).prev('.dialog').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$(this).click(function () {
dialog.dialog("open");
});
});
Here is a code that should work:
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
<body>
<table>
<tr>
<td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-: ;style:ridge;white-space: pre-wrap">
<div id="dialog" title="Basic dialog">
<%=solution%>
</div>
<button id="opener">Open Dialog</button>
</td>
</tr>
</table>
http://fiddle.jshell.net/0n4exLq8/
as for the formatting problem, it looks like you have linebreaks in your DB which html will not be able to render. You will have to format the string on the server side (replace \n with <br />) or better yet convert it to a <ol>
There is a simpler way to work with jQueryUI dialogs.
You only need one dialog, and just re-use it.
First, it is important to understand how a jQUI dialog works. You "assign" an element (a div) to the dialog when you initialize it:
$('#msg').dialog();
Thereafter, whenever you call the dialog's open method
$('#msg').dialog('open');
the dialog is displayed with the contents of that div.
To change the contents of the dialog, just change the contents of that div:
$('#msg').html('<p>Here is some totally new information</p>');
$('#msg').dialog('open');
In your program, all you need to do when a button is pressed is to grab the data (either via ajax, or from the cell next door, or whereever) and stick it into the dialog's div, then open the dialog.
When you close the dialog, it is a good idea to clear the div as well:
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
close: {
effect: "explode",
duration: 1000,
function(){
$('#msg').html('');
}
}
});
jsFiddle Demo
I have a Admin screen in Area = "PrivateCEQRApplication". I am using Jquery table sorter (http://tablesorter.com/docs/) and jquery dialog (https://jqueryui.com/dialog/#default) in that page. I am using MVC4 and razor.
My view is
#model CEQRApplication.Areas.PrivateCEQRApplication.Models.CEQRUser
#{
ViewBag.Title = "AdminPage";
Layout = "~/Views/Shared/_LogoutLayout.cshtml";
}
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/jquery-ui.css")" />
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (event) {
$(".tablesorter")
.tablesorter({
widthFixed: true,
cssChildRow: "expand-child",
widgets: ["zebra"],
headers: { 0: { sorter: false } }
, onRenderHeader: function () {
this.wrapInner("<span></span>");
}
, debug: false
})
.tablesorterPager({
positionFixed: false,
container: $("#pager")
})
.bind('pagerChange', function () {
$('.expand-child td').hide();
});
$('.buttonsAddUser').click(function (event) {
$("#editResult").dialog({
title: 'Add User',
autoOpen: false,
resizable: false,
height: 500,
width: 650,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load('#Url.Action("AddUser", "Admin")');
},
close: function (event, ui) {
$(this).dialog('close');
}
});
$("#editResult").dialog('open');
return false;
});
});
</script>
my button and div for rendering dialog
<td style="padding-left:30px;">
<div class="buttonsAddUser">
<img src="#Href("~/Content/themes/base/Images/add-users.png")" style="height: 2.0em; width: 3.0em; vertical-align:middle; display:inline-block; cursor:pointer;" id="AddRow" alt="Add User" title="Add User" />
Add New User
</div>
</td>
<div id="editResult" title="Edit User">
</div>
Now the issue is when i use these script only on the page and remove table sorter
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/jquery-ui.css")" />
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
dialog works
and when i use these script only on the page and remove dialog
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
sorter works
but if i put the j-query script for both sorter and dialog dialog throws the error
**
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'**
I am using tablesorter.js which is dependent on jquery.js file. Modal dialog is also dependent on jquery-1.9.1.js. Since 2 jqueries can't be on the same template how can I get both tablesorter.js and jquery dialog to work together? is there any way i can resolve this issue I will really appreciate the help.
Also, I am not very clear on the concept of bundling. So if i want to bundle the scripts shown above how will i do it.
Thanks
You have 2 versions of jQuery loaded (1.9.1 and latest).
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
jQuery UI is loaded after the first one, and is attached to that instance of jQuery. When you load the second jQuery, you're essentially throwing out the first one along with any plugins attached to it.
Pick one version of jQuery that works with both jQuery UI and the sorter, and make sure the jQuery script the first of the scripts you load, and both the dialog and sorter should work. For example...
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
--- Update ---
Since it appears that you need different versions of jQuery... one for jQuery UI (1.9.1) and one for the sorter (1.4.x, in jquery-latest.js), you're going to have to do something like this...
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script type="text/javascript">
$oldJQuery = $.noConflict();
// $ is now 1.9.1, $oldJQuery is the first jQuery that was loaded ("latest")
</script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
Anywhere where you need to access the table sorter plugin, you need to use $oldJQuery, otherwise just use $...
<script type="text/javascript">
$(document).ready(function (event) {
$oldJQuery(".tablesorter")
.tablesorter({
widthFixed: true,
cssChildRow: "expand-child",
widgets: ["zebra"],
headers: { 0: { sorter: false } }
, onRenderHeader: function () {
this.wrapInner("<span></span>");
}
, debug: false
})
.tablesorterPager({
positionFixed: false,
container: $("#pager")
})
.bind('pagerChange', function () {
$('.expand-child td').hide();
});
$('.buttonsAddUser').click(function (event) {
$("#editResult").dialog({
title: 'Add User',
autoOpen: false,
resizable: false,
height: 500,
width: 650,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load('#Url.Action("AddUser", "Admin")');
},
close: function (event, ui) {
$(this).dialog('close');
}
});
$("#editResult").dialog('open');
return false;
});
});
</script>
I have HTML which includes scripts in following order
<script src="../static/js/jquery.js" type="text/javascript">
<script src="../static/js/bootstrap.js" type="text/javascript">
<script src="../static/js/slides.js" type="text/javascript">
<script src="../static/js/app.js" type="text/javascript">
and images are tied to div as
<div id="slideshow">
<div id="slides">
<img src="../static/img/slideshow/01.JPG">
<img src="../static/img/slideshow/02.JPG">
<img src="../static/img/slideshow/03.JPG">
<img src="../static/img/slideshow/04.JPG">
<img src="../static/img/slideshow/05.JPG">
<img src="../static/img/slideshow/06.JPG">
</div>
</div>
where jquery.js is JQuery v1.7.2 and slide.js is latest slide.js downloaded.
To me it seems correct order as well. What my app.js does is
$(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
I tried on both Firefox and Chrome, it doesn't seem to work, all my images are displayed one after the another
What is that I am not doing right here??
You forget some div classes.
You can find a jsfiddle example I put in place here : http://jsfiddle.net/rNF8G/
EDIT 1:
You can add the play: 2000 property to the first block instead of calling it like this : $('#slides').slides("play");
See my edit here : http://jsfiddle.net/rNF8G/1/
EDIT 2:
To remove pagination, all you have to do is to add the following property :
generatePagination: false
You can see it in the following update : http://jsfiddle.net/rNF8G/117/
Instead of this...
$(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
try this...
$(document).ready(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
You don't seem to be attaching the handler correctly to the document ready event
If that doesn't work, can you provide a jsfiddle?
Try with JQuery Cycle: http://jquery.malsup.com/cycle/
HTML
<div id="slides">
<img src="../static/img/slideshow/01.JPG">
<img src="../static/img/slideshow/02.JPG">
<img src="../static/img/slideshow/03.JPG">
<img src="../static/img/slideshow/04.JPG">
<img src="../static/img/slideshow/05.JPG">
<img src="../static/img/slideshow/06.JPG">
</div>
JQuery
$('#slides').cycle({
fx: 'scrollRight',
speed: 'slow',
timeout: 5000
});
I have searched for 3 days the web to find a solution to my simple problem.
I try to run the pause function in a external <a> tag from this script: http://www.twospy.com/galleriffic/js/jquery.galleriffic.js
pause: function() {
this.isSlideshowRunning = false;
if (this.slideshowTimeout) {
clearTimeout(this.slideshowTimeout);
this.slideshowTimeout = undefined;
}
I tried something like this: pause
edit: whole script:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
</head>
<body>
<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<a id="sstop" href="#">pause</a> <!--here the link-->
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
...
</ul>
</div>
<div style="clear: both;"></div>
<script type="text/javascript">
var galleryswtch=0;
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
//$('div.content').css('display', 'none');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 3,
preloadAhead: 10,
enableBottomPager: true,
maxPagesToShow: 11,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.animate({opacity: '0'}, 500, 'linear', callback);
},
onPageTransitionIn: function() {
this.animate({opacity: '1'}, 500, 'linear');
}
});
$('#sstop').click(function() {$('#gallery').galleriffic('pause');}); //here the js
});
</script>
</body>
As Galleriffic is a jQuery extension that acts on DOM elements it should be:
$(myselector).galleriffic("pause");
where myselector is a reference to whichever element has had the gallery attached to it [e.g. '#thumbs' if you're using the same element IDs as in the Galleriffic examples.]
Ideally, make this association in your JS files rather than doing it inline in the HTML by first giving your link and ID:
Pause
and then:
$(document).ready(function() {
// do all of the rest of your galleriffic setup
$('#thumbs').galleriffic(
// initial options
);
// and then link the pause link with the gallery
$('#pause_link').click(function() {
$('#thumbs').galleriffic('pause');
});
});
[rationale - in modern HTML putting your Javascript inline is considered "olde worlde"]
To invoke a function with no parameters (such as this one), you should call it like pause().
try this
yourobjectname.pause();
Any reason why
$('#myElement').delay(2000)
wont work?
or is it pausing for undefined time?
if so just make a new function and call it on your a.click event :)