How to run a function defined on a jQuery plugin?

How to run a function defined on a jQuery plugin? - javascript

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 :)

Related

slippry.js plugin is not working

I am learning Web Design using many plugins. slippry.js is one of them but I could not figure what is wrong with my codes given bellow. I get nothing on page. Thank you
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/slippry.min.js"></script>
<link rel="stylesheet" href="css/slippry.css"/>
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>
HTML Code (index.html)
<div class="sy-box pictures-slider">
<div class="sy-slides-wrap">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="images/MainBackground.png" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="images/MainBackground2.png" alt="demo1_4">
</li>
</ul>
</div>
</div>

You mistake is parameter of
slippryWrapper
hastwo
starting angular bracket
here :
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>

There are some typos like "JQuery" (it must be: "jQuery") or a double < for the property slippryWrapper.
The updated code:
jQuery(document).ready(function () {
jQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/booncon/slippry/master/dist/slippry.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/booncon/slippry/master/dist/slippry.css"/>
<div class="sy-box pictures-slider">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="http://slippry.com/assets/img/image-3.jpg" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="http://slippry.com/assets/img/image-4.jpg" alt="demo1_4">
</li>
</ul>
</div>
</div>

HTML Header Menu Drop-Down Is Impossible To Click On

Ok. I have a header I've designed in HTML - however every time I attempt hover over products, then click on ANY sub menu - I am unable to (they disappear before they are clickable.)
A live example of this can be seen at http://www.bwl-ny.com
Any suggestions?
Custom.js
$(document).ready(function() {
//INITIALIZES PRETTYPHOTO PLUGIN
$("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_square'}); //choose between different styles / dark_rounded / light_rounded / dark_square / light_square / facebook /
//INITIALIZES TWITTER FEED PLUGIN
$('.twitter-feed').tweet({
username: 'ABrighterWorld', //just enter your twitter username
join_text: 'auto',
avatar_size: null,
count: 2, //number of tweets showing
auto_join_text_default: '',
loading_text: 'loading latest tweets...' //text displayed while loading tweets
});
// FLICKR PLUGIN
$('#flickr-images').append('<ul></ul>');
$('#flickr-images ul').jflickrfeed({
limit: 10,
qstrings: {
id: 'myflickrID', // enter Flickr ID i.e. 67956216#N02
tags: 'tags-here' // Displays images with selected tags (optional)
},
itemTemplate: '<li><a href="{{image_b}}" rel="prettyPhoto" ><img src="{{image_s}}" alt="{{title}}" /></a></li>'
}, function(data) {
$('#flickr-images li a').prettyPhoto({theme:'light_square'});
});
// TEXTBOX ACTIVE
$('.textbox, #message, #comment').focus(function (){
$(this).css({borderColor : '#bbb'});
$(this).blur(function (){
$(this).css({borderTopColor : '#d1d1d1', borderLeftColor : '#d1d1d1', borderBottomColor : '#e1e1e1', borderRightColor : '#e1e1e1'});
});
});
//TAB NAVIGATION
$('ul.tab-nav').tabs('.tabs > .tab-panels > div', {effect: 'fade'});
// PORTFOLIO HOVER EFFECT - OVERLAY
$('.gallery-overlay a img').hover(function() {
$(this).stop().animate({
opacity : '.1'
}, 300);
}, function() {
$(this).stop().animate({
opacity : '1'
}, 500);
});
// PORTFOLIO FILTER
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .active-filter').removeClass('active-filter');
$(this).parent().addClass('active-filter');
var filterVal = $(this).attr('href').toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul.gallery-thumbs li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul.gallery-thumbs li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
//TOGGLE PANELS
$('.toggle-content').hide(); //hides the toggled content, if the javascript is disabled the content is visible
$('.toggle-header a').click(function () {
if ($(this).is('.tog-close')) {
$(this).removeClass('tog-close')
.addClass('tog-open')
.closest('.toggle-header')
.next('.toggle-content')
.slideToggle(300);
return false;
}
else {
$(this).removeClass('tog-open')
.addClass('tog-close')
.closest('.toggle-header')
.next('.toggle-content')
.slideToggle(300);
return false;
}
});
// TOOLTIPS
$('.social-links li[title]').tooltip({
effect: 'fade',
fadeInSpeed: 300,
fadeOutSpeed: 200,
opacity: 0.9,
offset: [-5, 0]
});
// SOCIAL LINKS
$(function() {
$('.social-links li').animate({
opacity : '.4' // sets the opacity to 50% to all social link images
});
$('.social-links li').hover(function() {
$(this).stop().animate({
opacity: '1' // on hover sets the opacity to 100% to all social link images
});
}, function() {
$(this).stop().animate({
opacity : '.4'
});
});
});
// SCROLL TOP
$('.scroll-top').hover(function() {
$(this).stop().animate({
opacity : '1'
}, 300);
}, function() {
$(this).stop().animate({
opacity : '.6'
}, 500);
});
$('.scroll-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
//NAVIGATION DROPDOWN ANIMATION
$('#navigation ul').css({display: 'none'}); // Opera Fix
$("ul#navigation").superfish({
hoverClass: 'dropdown', // the class applied to hovered list items
pathClass: 'overideThisToUse', // the class you have applied to list items that lead to the current page
pathLevels: 1, // the number of levels of submenus that remain open or are restored using pathClass
delay: 1000, // the delay in milliseconds that the mouse can remain outside a submenu without it closing
animation: {opacity:'show',height:'show'}, // an object equivalent to first parameter of jQuery’s .animate() method
speed: 'fast', // speed of the animation. Equivalent to second parameter of jQuery’s .animate() method
autoArrows: false, // if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance
dropShadows: false
});
// IE Button hover fix
$(function (){
var button = $('.button');
if ($.browser.msie) {
$(button).css( {backgroundPosition: "-20px 35px"} ).hover(function() {
$(this).stop()
.animate({
backgroundPositionX: "-20px",
backgroundPositionY: "94px"
},300);
},
function() {
$(this).stop().animate({
backgroundPositionX: "-20px",
backgroundPositionY: "35px"
},300).css({backgroundPosition: "-20px 35px"});
});
}
});
}); //END of jQuery
HTML Source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Brighter World Lighting - NY</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--imports the main css file-->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--imports prettyPhoto css file-->
<link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css" />
<!--imports jquery-->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!--imports twitter feed plugin-->
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<!--imports easing plugin-->
<script type="text/javascript" src="js/easing.js"></script>
<!--imports prettyPhoto plugin-->
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<!--imports jQuery Tools plugin-->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<!--imports jQuery superfish plugin-->
<script type="text/javascript" src="js/superfish.js"></script>
<!--imports jQuery jflickrfeed plugin-->
<script type="text/javascript" src="js/jflickrfeed.min.js"></script>
<!--imports jQuery AsyncSlider plugin-->
<script type="text/javascript" src="js/jquery.asyncslider.min.js"></script>
<!--imports custom javascript code-->
<script type="text/javascript" src="js/custom.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// Setup Slider
$("#async-slider").asyncSlider({
keyboardNavigate: true,
easing: 'easeInOutExpo',
minTime: 600,
maxTime: 1500,
autoswitch: 4800,
centerPrevNextNav: false,
slidesNav: false
});
});
</script>
<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<div id="header" class="pattern-1">
<div id="header-inner">
<div id="logo">
<img src="img/logo.png" alt="image description" />
<div id="title">
<h1></h1>
<p></p>
</div><!-- end title -->
</div><!-- end logo -->
<ul id="navigation">
<li>
<a class="active-nav" href="index.asp">Home</a>
</li>
<li>
<a href="partnership.html">
Energy Partnership Program
</a>
</li>
<li>
<a href="http://bwl.ereverseauction.com">
Energy Auction
</a>
</li>
<li>
Affiliates
</li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-23">
Products
<ul class="sub-menu">
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-31">
Indoor Lighting
</li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
Outdoor Lighting
<ul class="sub-menu">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68">Street Lighting</li>
</ul>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">OEM/ODM Support</li>
</ul>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul><!-- end navigation -->

It s becuase of a CSS rule. It is in file style.css line 557, selector of media="screen"
#navigation ul margin-top: 24px. This pushes the child UL below the parent, so when you hover the parent, it displays, but as soon as you go down, you move off the parent element and into the top margin of the child, you are not hovering the parent anymore so the child disappears. This top margin, is causing a 'gap' between them, so you have to be really quick to keep the hover event to keep the child open. I would possibly change it to a padding? but you will need to change you background color from the UL to the LI, or potentially add a delay in the hover event to give them time to move down to the child elements, but if they hover in the gap, it could still disappear on them

It is a simple fix. In your custom.js javascript file you have the following code:
$("ul#navigation").superfish({
// the class applied to hovered list items
hoverClass: 'dropdown',
// the class you have applied to list items that
// lead to the current page
pathClass: 'overideThisToUse',
// the number of levels of submenus that remain
// open or are restored using pathClass
pathLevels: 1,
// the delay in milliseconds that the mouse can
// remain outside a submenu without it closing
delay: 300,
// an object equivalent to first parameter of
// jQuery's .animate() method
animation: { opacity: 'show', height: 'show' },
// speed of the animation. Equivalent to second
// parameter of jQuery's .animate() method
speed: 'fast',
// if true, arrow mark-up generated
// automatically = cleaner source code at expense of initialisation
// performance
autoArrows: false,
dropShadows: false
});
To fix your problem all you should have to do is increase the 300 parameter to something like 1000 (1 second), this gives the user time to hover to the navigation sub menu. Play around with the time until you find something that fits what you want. Other than that, the site looks great; pm me if you have any other questions.

Content Slider - issue with JQuery

I am trying to use the demo from this site : http://slidesjs.com/#overview
and try to implement two slider on a page. I am customising the Linking demo.
As i am using two different slider : slider1 and slider2 with different css so I used global.css for slider-1 and created text.css for slider-2. i noticed that the js: slides.min.jquery.js file uses the 'css' element like slides_container, next, prev so i created another js :slider.text.jquery.js replacing the css content by: slides_containerT, nextT, prevT as per text.css. but the code is not working. please help me as my project is due next monday.
Please help to resolve the isse and let me know if more detail is required.
Sorry I tried to add the html, css and jquery code but i was encountering error.
Can you please suggest how what changes I should make to the js : slides.min.jquery.js
so that it renders my second slider with css content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="css/new.css">
<link rel="stylesheet" href="css/text.css">
<script src="js/slider/jquery.min.js"></script>
<script src="js/slider/slides.min.jquery.js"></script>
<script src="js/slider/slider.text.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides 1
$('#slides1').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
// Initialize Slides 2
$('#slides2').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
</script>
<div id="container">
<div id="example">
<div id="slides1">
<div class="slides_container">
<div class="slide">
<img src="img/slider/slide-1.jpg" height="150" style="max-width: 200px" alt="Slide">
<div class="tmpSlideCopy">
<h1>A History of Innovation</h1>
<p>SLIDE 1 </p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-2.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Second Slide</h1>
<p>Slide 2</p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-3.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Third Slide</h1>
<p>Slide 3</p>
</div>
</div>
</div>
<img src="img/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
<img src="img/slider/arrow-next.png" width="24" height="43" alt="Arrow Next">
cheers
pam

You can try this below code.
$(function(){
$("#slides").slides({
container: 'slides_container'
});
});
Where container is the "css" style.
.slides_container {
width:570px;
height:270px;
}
More information on various property and styling at http://slidesjs.com/#docs

Really Simple Slideshow open link in new window

I am using the Really Simple slideshow and nowhere in the page does it have a way to click on a slideshow to open in a new window or tab (target="_blank") to certain links.
I have the following, but it still opens in the same page:
<html>
<head>
<link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
controls: {
playPause: {auto: false},
previousSlide: {auto: false},
nextSlide: {auto: false},
index: {auto: false}
},
slide_data_selectors: {
caption: {selector: 'div.caption', attr: false}
},
effect: 'slideLeft',
interval: 4,
transition: 500
};
$('.rs-slideshow').rsfSlideshow(opts);
});
</script>
</head>
<body>
<div class="main">
<section class="demo-section clearfix" id="demo-1">
<div id="slideshow-capts-links" class="rs-slideshow">
<div class="slide-container" style="">
<img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; ">
<div class="slide-caption">This is a caption for the first slide.</div>
</div>
<ol class="slides">
<li>
<a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a>
</li>
<li>
<div class="caption">
<p>This slide has the hyperlink</p>
</div>
</li>
<li>
</li>
</ol>
</section>
</div>
</body>
</html>
EDIT
I have tried the following code as suggested by Jigar Savla and yurtdweller but it keeps opening in the same page. I had tried in Chrome and IE.
<html>
<head>
<link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
controls: {
playPause: {auto: false},
previousSlide: {auto: false},
nextSlide: {auto: false},
index: {auto: false}
},
slide_data_selectors: {
caption: {selector: 'div.caption', attr: false}
},
effect: 'slideLeft',
interval: 4,
transition: 500
};
$('.rs-slideshow').rsfSlideshow(opts);
$('a.open_in_new_window').attr('target', '_blank');
});
</script>
</head>
<body>
<div class="main">
<section class="demo-section clearfix" id="demo-1">
<div id="slideshow-capts-links" class="rs-slideshow">
<div class="slide-container" style="">
<img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; ">
<div class="slide-caption">This is a caption for the first slide.</div>
</div>
<ol class="slides">
<li>
<a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a>
</li>
<li>
<a class="open_in_new_window" href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-b.png" data-link-to="http://reallysimpleworks.com"></a>
<div class="caption">
<p>This slide has the hyperlink</p>
</div>
</li>
<li>
</li>
</ol>
</section>
</div>
</body>
</html>
Edit after answer
OK, I got it!
Thanks to Jigar Savla's code sample, I just added a couple new lines in the Javascript:
// Under if (slide.link_to) ...
if (slide.link_to_new_page) {
$img = $('').append($img);
}
// Under link_to: {selector: 'a', attr: 'data-link-to'}, ...
link_to_new_page: {selector: 'a', attr: 'data-link-to-new-page'},
And in the html changeddata-link-to=http://google.com to data-link-to-new-page=http://google.com
Now if I just want to use the link and have it open in the same page I use data-link-to, otherwise data-link-to-new-page.
Worked great!!
THANKS!

Well i would have asked you to add a separate class for each anchor tag that you need to have a link to open in new window.
say for example if you have used open_in_new_window as class name to open links in new window than the code would become:
$('a.open_in_new_window').attr('target', '_blank');
hope this helps ;)

You can add
$('a').click(function() {
$(this).attr('target', '_blank');
});
after
$('.rs-slideshow').rsfSlideshow(opts);
this will make all the links on the page open in a new window. If you had classes on the links, we can change the code to target those specific classes and open only the ones you want to select.

Because Really Simple Slideshow generates the HTML for each slide on the fly, just before the transition happens, you’ll need to target the links after they’re generated. You can do this by attaching to the rsPostTransition event:
$('#my-slideshow').bind('rsPostTransition', function() {
$('#my-slideshow a.open_in_new_window').attr('target', '_blank');
});
Or you could use jQuery’s delegated events, which is probably the neater option:
$('#my-slideshow').on('click', 'a.open_in_new_window', function() {
$(this).attr('target', '_blank');
});

slides.js not working

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
});

Develop Reference

JavaScript is the programming language of the Web.

How to run a function defined on a jQuery plugin? - javascript

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 :)

Related

slippry.js plugin is not working

HTML Header Menu Drop-Down Is Impossible To Click On

Content Slider - issue with JQuery

Really Simple Slideshow open link in new window

slides.js not working

Categories

Resources