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');
});
Related
I have a set of images to display using a responsive slide. I found a link to create responsive slide: http://responsiveslides.com. I don't know to add pause/play button inside the slide. My code is as follows:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="../responsiveslides.min.js"></script>
<script>
$("#slider4").responsiveSlides({
auto: true,
pager: false,
pauseControls:true,
nav: true,
pause: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<a class="pause_slider" href="#">Pause Slider</a>
<a class="play_slider" href="#">Play Slider</a>
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="images/1.jpg" alt="">
<p class="caption">This is a caption</p>
</li>
<li>
<img src="images/2.jpg" alt="">
<p class="caption">This is another caption</p>
</li>
<li>
<img src="images/3.jpg" alt="">
<p class="caption">The third caption</p>
</li>
</ul>
</div>
The above is the source code. How can I add pause and play button into my slide?
Do you necessarily have to use that library or can you listen to another option?
I recommend you swiper. It is a better library in my opinion. Here is the get-started link.
In this example you can change the value of the boolean autoplay with methods start() (to autoplay the slider) and stop() (to pause it).
Here you have an example. Hope it helps:
$(document).ready(function() {
new Swiper('.swiper-container', {
speed: 600,
spaceBetween: 90,
autoplay: true,
disableOnInteraction: true,
loop: true
});
const mySwiper = document.querySelector('.swiper-container').swiper;
let isSliderActive = true;
$("#slider-control").click(function() {
if (isSliderActive) {
mySwiper.autoplay.stop();
isSliderActive = false;
this.innerHTML = 'PLAY';
console.log('slider stopped');
} else {
mySwiper.autoplay.start();
isSliderActive = true;
this.innerHTML = 'PAUSE';
console.log('slider activated');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" rel="stylesheet" />
<style>
.swiper-slide { text-align: center; }
</style>
<div class="swiper-container">
<!-- required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 1</div>
</div>
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 2</div>
</div>
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 3</div>
</div>
</div>
</div>
<button id="slider-control">PAUSE</button>
If you can use another plug-in. wow slider You will get by default pause and play buttons.
I want a popup that only appear when onload. I'm using the magnific popup
the script is working but it display an error on the popup saying that "The image could not be loaded." not sure what is the best 'type' I need to use with the one im' using.
HTML:
<div id="pop">
<img src="something.jpg">
</div>
SCRIPT:
jQuery(window).load(function(){
jQuery.magnificPopup.open({
items: {src: '#pop'},type: 'image'}, 0);
});
CSS:
#pop {display:none;}
You are calling magnifyPopup.open() on the <div>, not the <img />. Try calling it directly on the image.
<div id="pop">
<img src="something.jpg" id="img" />
</div>
<script type="text/javascript">
jQuery(window).load(function(){
jQuery.magnificPopup.open({
items: {
src: '#img'
},
type: 'image'
});
});
</script>
This is how you should use the magnificPopup library:
jQuery(window).load(function(){
jQuery.magnificPopup.open({
items: {
src: '#pop',
type: 'inline',
},
type: 'image'
}, 0);
});
#pop {display:none;}
.mfp-content #pop {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<div id="pop">
<img src="http://www.w3schools.com/images/colorpicker.png">
</div>
Several changes:
If you use an element which is not an image as an item you should specify the type: inline
The display: hidden is still applied to the element event inside the magnificPopup, so I added a display: block for that element when it's inside the magnificPopup wrapper.
Another options is to use the image that is inside the #pop element:
jQuery(window).load(function(){
jQuery.magnificPopup.open({
items: {
src: $('#pop img').attr('src')
},
type: 'image'
}, 0);
});
#pop {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<div id="pop">
<img src="http://www.w3schools.com/images/colorpicker.png">
</div>
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
My page's content is toggled using different links, showing one div at a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put a picture slider (bxSlider) within one of the divs, newboxes1.
Outside the box, the bxSlider works fine. Within it, the pictures don't show. See live example here.
Here's what my code looks like :
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}</script>
</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
var slider = $('#slidersample').bxSlider({
mode:'fade',
controls: false
});
$('#bx-prev-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#hover-next-g-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#bx-next-sample').click(function(){
slider.goToNextSlide();
return false;
});
$('#hover-next-d-sample').click(function(){
slider.goToNextSlide();
return false;
});
});
});
</script>
</head>
<body>
<div id="left-menu">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br />
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br />
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a>
</div>
<div class="newboxes" id="newboxes1">DIV 1
<!-- SLIDER -->
<div id="slider" style="margin-top: 0px; width="580 px"; height="375 px">
<div class="bx-prev"><div id="bx-prev-sample">←</div></div>
<div class="bx-next"><div id="bx-next-sample">→</div></div>
<div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div>
<div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div>
<ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px">
<li><img src="images/1.jpg" width="580" height="375" /></li>
<li><img src="images/2.jpg" width="580" height="375" /></li>
<li><img src="images/3.jpg" width="580" height="375" /></li>
</ul>
</div>
<!-- SLIDER END-->
</div>
<div class="newboxes" id="newboxes2">DIV 2<br /></div>
<div class="newboxes" id="newboxes3">DIV 3</div>
</body>
</html>
I use
.newboxes {display:none;}
in the CSS so none of the divs are showing when the page is loading. Removing this from the CSS solves the bxSlider issue, as you can see here. However, the content is shown when the page is loaded, while I want all of it to be hidden. Any attempt to use display:block or display:none elsewhere in the code has been unsuccessful.
Can anyone think of a way to fix this? Thank you.
I had the similar problem with bxSlider plugin: when the DIV that contained it was initially hidden display:none, the slideshow would not appear when I make the DIV visible $('#div-id').show();. Only slideshow control buttons appeared. Then I solved the problem like this:
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true
});
$("#processSignUp").click(function() { // button that sets the DIV visible
$("#trainings-slide").show(); // DIV that contain SLIDER
mySlider.reloadSlider(); // Reloads the slideshow (bxSlider API function)
});
});
</script>
As you can see I reloaded the slideshow just after the DIV (that contain the slider) was showed and it worked perfectly. Maybe that can help to solve your problems and to avoid using visibility:hidden and other tricks.
I know this question was asked awhile ago but I have the same issue. I have no idea whats up with bxSlider and display:none. It doesn't seem to read the content if its contained in a div with the display set to none.
I've gotten around it thus far by toggling visibility:hidden and visibility:visible instead of display.
You can use visibility:hidden and visibility:visible, but will some troubles. And you can use height:0px;overflow:hidden;
I`m use last solve
Another solution would be to allow bxslider to load, then hide it once it has.
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true,
onSliderLoad: function() {
$('#trainings-slide').hide();
}
});
});
</script>
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 :)