I have the following items laid out in static blocks:
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-1 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-2 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-3 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-4 current-slider"></div>
</div>
Along with a thumbnail navigation block below:
<div class="image-compare-nav owl-carousel owl-theme">
<div class="owl-wrapper">
<div class="owl-item">
</div>
<div class="owl-item">
</div>
<div class="owl-item">
</div>
<div class="owl-item">
</div>
</div>
</div>
At the moment, all of the main twentytwenty blocks appear underneath each other, but what I want to happen is that only the first one is displayed, and whena thumbnail is clicked, the relating slider div, is shown in it's place.
It's important that as each thumbnail is clicked, the slider changes from the old one, to the new one.
So far I've got this http://jsfiddle.net/96rq4vet/2/ but, when the thumbnails are clicked, the new div isn't showing up, they're staying hidden.
What am I doing wrong?
UPDATE
I'm getting closer with this fiddle: http://jsfiddle.net/96rq4vet/3/ however, I can't get only the first main div to show at first. I tried adding style:display:none; to the second-fourth one, but that doesn't make them show when the thumbnails are clicked.
Any ideas?
Rather than using classes you could use data attributes. You can then grab the data attribute of the thumb that is clicked in order to associate it with the data attribute of the image you want to display.
Something like this:
<div class="twentytwenty-container" data-image-num="1">
<img />
</div>
<div class="imageSet" data-image-num="1">
<img />
</div>
$('.imageSet').click(function() {
var imageNum = $(this).attr('data-image-num');
$('.twentytwenty-container[data-image-num="' + imageNum + '"]').show();
});
JSFiddle
Related
I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)
Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});
I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.
You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}
I want to add a div with some title over the JQuery Backstretch images. The code looks like:
<div class="col-md-4 col-xs-12">
<div class="imgs">
</div>
</div>
Here the inner div is used for backstretch. If I add any content prior to that within outer div, (like below) the stretch is not working.
<div class="col-md-4 col-xs-12">
<div class='row'>some text</div>
<div class='row'>
<div class="imgs">
</div
</div>
</div>
I was trying to replicate the scenario in jsfiddle (http://jsfiddle.net/krishnasarma/err1fkcd/) but its not showing the images at all.
Most likely you haven't specified dimensions for .imgs div used for backstretch. Set desired width and height properties for that container.
Demo: http://jsfiddle.net/err1fkcd/3/
I have several images in a grid. I want each image to overlay to fullscreen when I click on them.
I have this javascript on there, but when I click on the image the one that overlays is the last image on the grip. How should I fix that?
I'm using this, but I have several images:
http://jsfiddle.net/a8c9P/
The only the difference on mine from this is that it is in another div for another javascript that puts it into the grid.
HTLM:
<div class="brick">
<div class="overlay"></div>
<div class="overlayContent">
<img class="imgBig" src="img/Scan.jpg" />
</div>
<img class="imgSmall" src="img/Scan.jpg" height="345">
</div>
check out this
are you trying for this? http://jsfiddle.net/Lqsmr4bu/
I have a page what will have a few buttons on it and on a click of a button I basically need it to swap divs out - I have them wrapped in a parent div with an id and then each div that will be replaced will get it's own id as well. I got this code to work for swapping, but it will be tedious and not good code at all to do this if we end up with 30 or so pairings.
So how do I clean this up so on a click, the active div is set to display: none, and the one clicked is set to display: block?
Here is my jQuery code that is working for now. For this I want the macaroni to display and the farfalle to hide.
$('#macaroniButton').click(function(){
$('#macaroni').toggle();
$('#farfalle').toggle();
});
<div id="topchanger">
<div id="farfalle">
.....
</div>
<div id="macaroni">
.....
</div>
</div>
<div class="circlerow">
<div class="circlepasta" id="macaroniButton">
......
</div>
<div class="circlepasta" id="AnotherButton">
......
</div>
</div>
</div>
You could start with this. Expand my answer accordingly.
$('#macaroniButton').click(function(){
$("#macaroni").show().siblings('div').hide();
});
You can give a class to all the div that you want to show/hide and before handling a click, hide all div with that class. Let's say you give it a class 'item':
<div id="topchanger">
<div id="farfalle" class="item">
.....
</div>
<div id="macaroni" class="item">
.....
</div>
</div>
and your javascript will be:
$('div.item').click(function(){
$('div.item').hide();
$(this).show();
});
Note that $(this) refers to the item that was just clicked.
Hope it hepls