Develop Reference

jQuery on click cycle through images in identical .wrappers independently

I'm not a programmer, just trying to assemble a small website for myself.:)
What I'm trying to do:
A ".container" with a grid of images - each inside of an identical ".wrapper", some of them are non-clickable single-image wrappers, some of them are clickable "stacks" of 1-4 images - click again and again to see all images in that .wrapper one by one.
<div class="container">
<div class="wrapper">
<div class="content"><img src="1.png"></div>
<div class="content"><img src="2.png"></div>
<div class="content"><img src="3.png"></div>
<div class="content"><img src="4.png"></div>
</div>
<div class="wrapper">
<div class="content"><img src="5.png"></div>
</div>
<div class="wrapper">
<div class="content"><img src="6.png"></div>
<div class="content"><img src="7.png"></div>
</div>
</div>
What I have done so far: found here (JQuery cycle through text on click) this piece of code:
$(document).ready(function () {
var divs = $('div[id^="content-"]').hide(),
i = 0;
function cycle() {
divs.fadeOut(400).delay(400).eq(i).fadeIn(400);
i = ++i % divs.length;
};
cycle()
$('button').click(cycle);
// click button to show next paragraph
});
and "almost" "adapted" it for my needs :D:
<script type="text/javascript">
$(document).ready(function () {
var divs = $('.content').hide(),
i = 0;
function cycle() {
divs.fadeOut(0).delay(0).eq(i).fadeIn(0);
i = ++i % divs.length;
};
cycle()
$('.wrapper').click(function(){cycle()})
});
</script>
and also this FIDDLE - the problem looks similar to mine, maybe?
The problem and what I need: the "adapated" version of the jQuery code above works with 1 ".wrapper". But different names for all wrappers and a copy of the same script for each of them in my index.html sounds like a disastrous idea and the only way I can do it myself.:D I believe there should be an elegant tweak/fix of the jQuery code that would make it work for EACH ".wrapper" independently and only for images inside it, not interfering with other .wrappers and their images.
This is why I'm asking for your help and would appreciate any help, guys!

I believe the following will do what you want (if I understand requirements correctly). You basically need to loop over each wrapper and treat them as individual instances
$('button').on('click', function() {
// isolate each wrapper
$('.wrapper').each(function() {
// get the content within this wrapper instance
var $content = $(this).find('.content');
// don't do anything if it is a single
if ($content.length > 1) {
// current is the only visible one
var $curr = $content.filter(':visible');
// if current is last one next will be first one in this group
// otherwise will be the one right after it
var $next = $curr.is($content.last()) ? $content.first() : $curr.next();
// fade out current
$curr.fadeOut(function() {
// this function runs when fadeOut has completed
// and can now fade in the next one
$next.fadeIn()
});
}
});
});
.wrapper {
border: 2px solid #ccc;
margin: 10px;
padding: 10px
}
.content {
display: none
}
.content:first-child {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="content">Wrap #1 Img #1</div>
<div class="content">Wrap #1 Img #2</div>
<div class="content">Wrap #1 Img #3</div>
<div class="content">Wrap #1 Img #4</div>
</div>
<div class="wrapper">
<div class="content">Wrap #2 Img #1</div>
</div>
<div class="wrapper">
<div class="content">Wrap #3 Img #1</div>
<div class="content">Wrap #3 Img #2</div>
</div>
</div>
<button>Toggle content</button>

jQuery Card Switching Active Class

The website I'm currently working on is here (map section):
http://vtx.canny-creative.com/
I'm currently facing two problems:
The 'active' class adds to the .location-card on the left. But I also need the corresponding .dot on the right hand side to have 'active' added to it. Which I can do. However...
What I can't do, is get the "first loaded/visible" DIVs, "selected dot", to have 'active' applied. So the active will only apply on click, rather than "on load" and then "on click" as I cycle through them.
$('a.dot').on('click tap', function(e) {
e.preventDefault();
$('.card').css('z-index', '0');
$('.card.active').css('z-index', '2');
$('.card').removeClass('active');
$($(this).attr('href')).addClass('active');
});
.where-we-operate .card-container {
position: relative;
.card {
position: absolute;
top: 0px;
}
.active {
z-index: 4 !important;
animation: foo 0.5s ease 1;
}
}
.where-we-operate .map-container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="where-we-operate">
<div class="grid-container">
<div class="grid-x grid-padding-x grid-margin-x">
<div class="large-6 cell card-container">
<div id="card1" class="location-tile card">
Card Info Here
</div>
<div id="card2" class="location-tile card">
Card Info Here
</div>
<div id="card3" class="location-tile card">
Card Info Here
</div>
</div>
<div class="large-6 cell map-container">
<img src="http://localhost:8888/vortex/wp-content/uploads/2018/03/uk-map.jpg" />
</div>
</div>
</div>
</section>
I've created something using the jQuery fiddle here:
https://jsfiddle.net/harishkommuri/xc8ebuf4/

I'm officially answering this mainly because I can't stand unanswered questions, then again, it might be helpful to those on an off-day or those just starting out.
You can simply add the active class in your HTML to the elements that should have the class on pageload:
<div id="card1" class="location-tile card active">
Another option is to add the active class with jQuery either before or after your event-handler:
$('#card1').addClass('active');

Same javascript event for different images?

I have an image that when hover, a div with an overlay will fade in and out.
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image<p></div>
</div>
<img src="assets/img/card_one.jpg" alt="" />
</div>
However, I have multiple images and I need to repeat this code for each of these images (assigned with different div's id). How can I get, when hover on specific image.
The code only run on individual image only?
$(function() {
$('#img-one').hover(function() {
$('#overlay-one').stop(true,true).fadeIn();
}, function() {
$('#overlay-one').stop(true,true).fadeOut();
});
});

Use general class in all the image containers div's and overlay div's, like :
<div id="img-one" class='img-container'>
<div id="overlay-one" class='overlay'>
...
</div>
</div>
Then adjust you JS code to invoke just related overlay :
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
Hope this helps.
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
.img-container{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 3<p></div>
</div>
</div>

You'll better use classes. Then do something like this:
$('.main-container').find('.div-class-name').forEach(function(el) {
<bind a handler for each consequent element here>
});
You'll end up with a bunch of handlers that are bound to each individual ".div-class-name" element.

It is recommended to use classes because that is what classes are for and id's are not.
If your case demands some situation where you have no control over the HTML part, you can use wildcards in attribute selectors in some cases. Like div[id^=overlay] to selects all div with id starting with overlay
$(function() {
$('div[id^=img]').hover(function() {
$('div[id^=overlay]',this).stop(true,true).fadeIn();
}, function() {
$('div[id^=overlay]',this).stop(true,true).fadeOut();
});
});
div[id^=img]{
position: relative;
height:100px;
width:100px;
border:1px solid black;
margin:2px;
}
div[id^=img] > div[id^=overlay]{
position:absolute;
background:rgba(0,0,0,.2);
top:0;
left:0;
right:0;
bottom:0;
display:none;
width:100px;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>
<div id="img-two">
<div id="overlay-two">
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>

You can try with the jQuery Easy Overlay Plugin
http://eivissapp.github.io/jquery-easy-overlay/
In the code, you should assign a class to the images, and call this statement (that will work for each image):
jQuery("img.yourclass").hover(function(){
jQuery(this).easyOverlay("start");
}, function(){
jQuery(this).easyOverlay("stop");
});
If you have fontawesome in the page, then execute this before the code above (otherwhise the plugin will use the fontawesome spinner inside the overlay div):
jQuery.fn.easyOverlay.options = { spin: false }

jQuery panzoom scale all elements

I'm using jQuery panzoom to zoom an image and some div elements. This works generally but the elements positioned on top of the image don't stay in their original locations. Is there anyway to keep the div elements where they were whilst being scaled?
JSFiddle: https://jsfiddle.net/828wu2dy/
HTML:
<section id="inverted-contain">
<div class="panzoom-elements">
<div class="item item1">ITEM 1</div>
<div class="item item2">ITEM 2</div>
<div class="panzoom">
<img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
</section>
JS:
(function() {
var $section = $('#inverted-contain');
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
$set: $section.find('.panzoom-elements > div'),
startTransform: 'scale(0)',
increment: 0.1,
minScale: 1,
maxScale: 2,
contain: 'invert'
}).panzoom('zoom');
})();
CSS:
.panzoom-elements {
width: 50%;
height: 400px;
}
.item {
position: absolute;
z-index: 10;
}
.item.item1 {
color: white;
background: black;
width:50px;
height:50px;
top: 300px;
left: 100px;
}
.item.item2 {
color: white;
background: black;
width:50px;
height:50px;
top: 200px;
left: 150px;
}
The other problem is that it also doesn't drag horizontally.
I've tried everything I can think of.

Part 1:
To fix your 'item' problem - try putting 'item' elements on one level with 'img' - I mean put them inside div class='panzoom'.
Works for me. ^ ^
<section id="inverted-contain">
<div class="panzoom-elements">
<div class="panzoom">
<div class="item item1">ITEM 1</div>
<div class="item item2">ITEM 2</div>
<img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
</section>
The method of thought that led me to this answer: while learning panzoom documentation for API, and examining your fiddle, I found that 'img' or anything that could be seen as direct selector to it (I mean like $('.panzoom').child().first() is nowhere mentioned in your script. That means that most probably img is zooming in/out not by itself. What I thought next - it seem that it's parent is changing. That would mean that you need to put your items inside of that changing space - it is the most logical way to handle it... I tried to test that idea - and it worked.
Part 2:
The other problem is that it also doesn't drag horizontally.
Add this to your CSS
.panzoom{ width: 1920px;}
This is the size of the image. Works for me.
Perhaps you also could add to .panzoom height of image. It is not required in your case where image is horisontal but it could matter when image is vertical.

jquery toggle is not working

I have code like this,
<div class="wrapper">
<div class="box">
<h4 style="padding-left: 11px; padding-top: 15px;">Main title</h4>
<div class="hideunhide">
<h5 style="padding-left: 14px;">sub title1</h5>
<div class="horizontal controls">
</div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
<h5 style="padding-left: 14px;">sub title2</h5>
<div class="horizontal controls"></div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
<h5 style="padding-left: 14px;">sub title3</h5>
<div class="horizontal controls"></div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
</div>
</div>
</div>
When i click one the should be toggle(hide/unhide)
i have tried something like this,
$('.box').click(function() {
$(this).css('display', 'none')
$('.hideunhide').css('display', 'block')
});
But it is not working please help.
Fiddle: http://jsfiddle.net/ctrY4/

pelase have a look on below url
Fiddler!
$(function () {
$('.box').click(function () {
$('.hideunhide').slideToggle();
});
});

if you want to make .box class has to toggle then do like this..
$('.box').on('click',function(){
$('.hideunhide').toggle();
});

It seems that you hide a .box element, which is a parent of .hideunhide element. So if the parent element is hidden, all it's children are invisibile, regardless of their CSS display value.
You should reorganize your html.

Are you looking something like a toggle for the hideunhide?
Solution if it is a yes:
$('.box').click(function(){
$('.hideunhide').toggle();
});
Created a fiddle for the proposed solution: http://jsfiddle.net/ctrY4/1/

use code something like this :
$('.box').click(function(){
$('hideunhide').toggle();
});
*Before used to this correct your html code.

$('h4').click(function(){
$('.hideunhide').fadeOut(1000);
$('.hideunhide').fadeIn(1000);
});
This will hide and unhide .hideunhide elements in defined milliseconds interval when you click to h4.
Fiddle

By seeing you code, it seems you need to hide the <h4> tag. Try below.
$('.box h4').click(function(){
$(".hideunhide").slideToggle();
});
and fiddle