I am using the JQuery revolution slider on a website.
Everything works great but I need some help in linking to a specific slide.
After clicking on a navbar link I would like the slider to scroll to a specific slide (using an id or index maybe).
How can I implement this?
A simplified version of the code for the slider looks like this:
<div class="rev-slider-container">
<div class="rev-slider">
<ul>
<li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
<img src="./images/sketch/galery/1.jpg" alt="slide1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
<img src="./images/sketch/galery/1.jpg" alt="slide2" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
<img src="./images/sketch/galery/1.jpg" alt="slide3" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
</ul>
</div>
</div>
Take a look at this https://www.themepunch.com/revsliderjquery-doc/api-methods-events/#methods.
You can navigate to a particular Slide by doing this:
revapi.revshowslide(2);
after loading the slider like this:
<script type="text/javascript">
var revapi = jQuery(document).ready(function() {
jQuery('#rev_slider_1').show().revolution({
waitForInit: true,
/* SLIDER SETTINGS CONTINUED */
});
});
// only start the slider once the entire window has loaded
jQuery(window).one('load', function() {
revapi.revstart();
});
</script>
Related
I'm trying to create a basic slideshow so when you click the thumbnail in the nav the main image changes to that one. I have a JS function running in my head and when i click a thumbnail that image replaces the main image for a fraction of a second, before being reset. I'm really new to coding so i'd appreciate any help given!
``` <head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```
```<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='gem 4-3.jpg'>
</div>
</div>
</div>```
```<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-3.jpg');">
<img class="img-thumb" src="gem 4-3.jpg">
</a>
</li>
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-4.jpg');">
<img class="img-thumb" src="gem 4-4.jpg">
</a>
</li>
</ul>
</div>
<body>```
From your code, it looks like your thumbnails and the image your are supposed to be replacing are the same. What you see is just a flicker when you set the new src, but the image source is the same.
The issue is happening because of the a tag must be reloading the page on click.
Here is a solution without the a tag or if you want to keep the a tag in check out preventDefault() on an <a> tag
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
</div>
</div>
</div>
<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
<img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
</li>
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
<img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
</li>
</ul>
</div>
I have a bxSlider on my webpage.
I'm trying to stop slider when mouse hover my custom paginator.
Here is my html:
<ul id="slider">
<!-- Slide -->
<li class="slider-element">
<a href="'.$sliderLink.'">
<img src="'.$sliderImage.'">
<div class="slider-caption-wrapp">
<div class="slider-caption">'.$sliderTitle.'</div>
</div>
</a>
</li>
<!-- Slide -->
<!-- Slide -->
<li class="slider-element">
<a href="'.$sliderLink.'">
<img src="'.$sliderImage.'">
<div class="slider-caption-wrapp">
<div class="slider-caption">'.$sliderTitle.'</div>
</div>
</a>
</li>
<!-- Slide -->
</ul>
<!-- Paginator -->
<ul id="slider-paginate" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<li><a data-slide-index="'.$slideIndex++.'" href="'.$sliderLink.'"><span>'.$slideIndexShow++.'</span></a></li>
<li><a data-slide-index="'.$slideIndex++.'" href="'.$sliderLink.'"><span>'.$slideIndexShow++.'</span></a></li>
</ul>
And here is my js;
// Main Slider
var slider = jQuery('#slider').bxSlider({
auto: true,
speed: 500,
delay: 5000,
autoHover: true,
stopAuto: false,
pagerCustom: '#slider-paginate'
});
Here is what i've tried so far:
$(document).on('hover','#slider-paginate',function() {
slider.stopAuto();
slider.startAuto();
});
Unfortunately it didn't work. What am i missing? What is wrong with my javascript code?
How can i stop bxslider when mouse is hover on paginator elements?
I found answer myself;
i used 2 events;
First one for hover and other for mouseleave
Solution:
$('#slider-paginate').hover(function(){
slider.stopAuto();
});
$('#slider-paginate').mouseleave(function(){
slider.startAuto();
});
I'm using jCaousel 0.3.3, jQuery 1.9.1. I'm seeing no errors, but slides do not change (move).
HTML code:
<div class="views-field jcarousel-wrapper">
<div class="field-content jcarousel">
<ul>
<li class="first"><img width="1140" height="380" src="http://jonevans.photography/galleries/landscape/photos/jme_20141101_wilton_0001.jpg" typeof="foaf:Image"></li>
<li><img width="1140" height="380" src="http://www.moargut.com/%28cms%29/media/resize/size=1140x380,scale=crop/1032683" typeof="foaf:Image"></li>
<li class="last"><img width="1140" height="380" src="http://www.girosole.com/assets/images/tourpics/tourpic-guht1.jpg" typeof="foaf:Image"></li>
</ul>
</div>
</div>
JavaScript:
$('.jcarousel').jcarouselAutoscroll();
Fiddle: http://jsfiddle.net/12Lst30m/3/
Could someone give me any advice? What I am doing wrong?
I am really stuck on this. I have a dropdown menu called "Example" that contains 2 submenus "submenu1" and "submenu2". When either of the 2 is clicked, it will contain an image thumb which will be displayed in lightbox style. But as of now both thumbs are displayed and this is not what I want because the final web page will contain hundreds of images. Is there a way to make the images appear only when one sub-menu is clicked, according to the code below. Thanks
<!DOCTYPE html>
<head>
</head>
<body>
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">CATEGORIES</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle"
>BAPTISM
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
BOY CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".boy" tabindex="-1">Clothing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
GIRL CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".girl" tabindex="-1">Clothing</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</nav>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- gallery starts here -->
<li class="item-thumbs span3 boy"><!-- Fancybox - Gallery Enabled
- Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="boy"
title="" href="_include/img/work/full/boy_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/boy_clothing.jpg" alt="">
</li>
<li class="item-thumbs span3 girl">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="girl"
title="" href="_include/img/work/full/girl_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/girl_clothing.jpg"
alt="">
</li>
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</body>
</html>
WOW I can't believe I found the solution after so many days by adding just a simple word. Didn't have to mess with javascript at all. Actually in the external .js file of the website I was told by a code developer to add the following: filter: '.foobar' See the final result below $container.isotope({
// options
animationEngine: 'best-available',
itemSelector : '.item-thumbs',
filter: '.foobar',
layoutMode : 'fitRows'
});
Here is what I would do:
I try and keep the logic simple, then you can just use something similar on your site :)
(Please S.O. Correct me if I am wrong here!)
CSS:
Give your submenus an ID
JavaScript:
// 2 event listeners that will run a function when the submenu is clicked:
var sub_menu_1 = document.getElementById( "submenu1" );
sub_menu_1.addEventListener("click", DISPLAY_menu_1 , false);
var sub_menu_2 = document.getElementById( "submenu2" );
sub_menu_2.addEventListener("click", DISPLAY_menu_1 , false);
function DISPLAY_menu_1 () {
// Do whatever CSS you need here, I simply make the entire DIV 'visible':
sub_menu_1.style.visibility = 'visible';
// For good measures, lets make submenu2 'invisible':
sub_menu_2.style.visibility = 'hidden';
}
function DISPLAY_menu_2 () {
// Same in Reverse
sub_menu_2.style.visibility = 'visible';
sub_menu_1.style.visibility = 'hidden';
}
EDIT:
Whew! This took a while.. Sorry about that!
Check out this example:
I basically made 3 versions for you to try out.
Simply click the Edit this Pen button to check the code!
Example
In Capybara, you can implicitly wait for an element to appear with
find('.slide', visible: true)
How can I detect that I new/different slide is visible? So I can do something like this which currently doesn't work (Capybara finds the current .slide before it is hidden instead of waiting for the current slide to hide and new slide to show):
3.times do
find('.slide').fill_in('image[description]', with: 'foo')
click_link 'Next slide'
end
For example
I have markup like this:
<ul>
<li class="slide active" style="background: green;">
</li>
<li class="slide" style="background: blue;">
</li>
<li class="slide" style="background: pink;">
</li>
</ul>
Next slide
I have some javascript to hide the active slide and fade in the next slide:
$(document).ready(function() {
$('.next-slide').click(function(evt) {
evt.preventDefault();
var $activeSlide = $('.slide.active');
$activeSlide.next().addClass('active');
$activeSlide.hide().removeClass('active');
});
});
Complete JSFiddle: http://jsfiddle.net/epylinkn/fQHmf/1/
The simplest option is probably to give each slide an additional class or id - ie
<ul>
<li class="slide slide-0 active" style="background: green;">
</li>
<li class="slide slide-1" style="background: blue;">
</li>
<li class="slide slide-2" style="background: pink;">
</li>
</ul>
3.times do |i|
find(".slide-#{i}", visible: true).fill_in('image[description]', with: 'foo')
click_link 'Next slide'
end
Actually you can do it without modification of app's source code:
(1..3).each do |i|
find("ul > .slide.active:nth-child(#{i})").fill_in('image[description]', with: 'foo')
click_link 'Next slide'
end
find("ul > .slide.active:nth-child(#{i})") will wait till ith slide will become active which is what you want.
This code assumes that first 3 children of ul are slides.