Develop Reference

Toggle image src on click next & prev using JQuery

I am trying to toggle the image src on click instead of mouseout & in.
I have multiple images,I want to toggle the image of single product, if buttons which exist in same parent div of image, will click.
Any thoughts ?
function toggleImage(thisimage) {
thisimage.toggle();
}
.prev_btn {
position: absolute;
left: 7px;
top: 30px;
bottom: 0;
width: 30px;
height: 128%;
z-index: 2;
border-style: dotted;
}
.next_btn {
position: absolute;
right: 65%;
top: 30px;
bottom: 0;
width: 30px;
height: 128%;
z-index: 2;
border-style: dotted;
}
<div id="pro"><img width="206" height="260" src="https://www.w3schools.com/html/pic_trulli.jpg" onmouseover="this.src='https://www.w3schools.com/html/img_chania.jpg'" onmouseout="this.src='https://www.w3schools.com/html/pic_trulli.jpg'">
<div class="prev_btn" onclick="toggle(this)"></div>
<div class="next_btn" onclick="toggle(this)"></div>
</div>

Using jQuery you would do it like this.
Please give a class to your image element. Otherwise you can also toggle all image tags.
$('.prev_btn, .next_btn').on('click', function(e) {
$('.img').toggle();
});
If you want to toggle all images, then just:
$('img').toggle();

First, move your images into an array on a data- attribute on the image itself - this gives you different set of images and any number of images - rather than just toggle between two, which you don't need next and previous buttons, so the implication is that you want more than two images.
<img data-images='["https://www.w3schools.com/html/img_chania.jpg","https://www.w3schools.com/html/pic_trulli.jpg"]' ...
Next, use js/jquery event handlers rather than HTML onclick= just gives you more control and separation of html/code etc (see other SO questions for more info)
$(".prev_btn").click(function() {
Within this handler, we find the relevant image using your parent wrapper. Here I've given the wrapper a class rather than an id so that you can have multiple wrappers without needing different IDs and easier to style in css (rather than .closest("div"))
$(this).closest(".wrapper").find("img").first()
and the click event handler calls a common method with the direction (rather than repeat all the same code)
This stores on each image the current index so no need for additional variables to "remember"
img.data("index", new_index);
Then it's a case of reading the array from the image, changing the index based on direction and updating the image.
I've had to make some tweaks to your CSS for the buttons (just for demo) and the 2nd image includes a 3rd image url to show it working with more than just toggle
$(".prev_btn").click(function() {
changeImage($(this).closest(".wrapper").find("img").first(), -1)
});
$(".next_btn").click(function() {
changeImage($(this).closest(".wrapper").find("img").first(), 1)
});
function changeImage(img, direction)
{
var images = img.data("images");
var idx = img.data("index");
idx += direction;
if (idx >= images.length) idx = 0;
if (idx < 0) idx = images.length - 1;
img
.data("index", idx)
.attr("src", images[idx]);
}
.wrapper {
position:relative;
}
.prev_btn, .next_btn {
position:absolute;
left: 0;
top: 0px;
bottom: 0;
width: 30px;
height: 255px;
z-index: 2;
border-style: dotted;
}
.next_btn {
left: 170px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<img width="206" height="260"
src="https://www.w3schools.com/html/pic_trulli.jpg"
data-images='["https://www.w3schools.com/html/img_chania.jpg","https://www.w3schools.com/html/pic_trulli.jpg"]'
data-index="1">
<div class="prev_btn"></div>
<div class="next_btn"></div>
</div>
<div class="wrapper">
<img width="206" height="260"
src="https://www.w3schools.com/html/img_chania.jpg"
data-images='["https://www.w3schools.com/html/img_chania.jpg","https://www.w3schools.com/html/pic_trulli.jpg", "https://www.w3schools.com/html/img_girl.jpg"]'
data-index="0">
<div class="prev_btn"></div>
<div class="next_btn"></div>
</div>

$('.prev_btn, .next_btn').on('click', function(e) {
var this$ = $(e.currentTarget), // grab the currently clicked button element
parent$ = this$.parents('#pro').first(), // grab the parent of the button that has the id #pro
contextBasedImgs$ = parent$.find('img'); // grab all the images in the parent div with id #pro
contextBasedImgs$.each(function(ignore, el) {
var currEl$ = $(el),
newURI = currEl$.attr('onmouseout');
currEl$.attr('src', newURI);
});
});

Jquery slideshow won't fade with my pictures first time around, but will with random pics off the internet

I have this jquery slideshow that fades images ever 3 seconds, when using the images in the second slideshow, just off a random google search, all the images fade. If I use relative links or even links off of my website, they won't fade until the second time around. In the code below, the second image in the first slideshow from newtimere.com is my image.
When the slideshow comes to this image neither slideshow will fade until the second time around, but all other images fade the first time around. I have no idea what's going on. I've tried jquery 2.2.4 and 3.2.1
$('.jquerySlideshow').each(function() {
var $this = $(this);
var bgimg = $this.data("bgimg");
var bgimgcss = "url(" + bgimg + ")"
$this.css( "background-image", bgimgcss );
});
$('.jquerySlideshow-out').each(function() {
// scope everything for each slideshow
var $this = this;
$('> :gt(0)', $this).hide();
setInterval(function() {
$('> :first-child', $this).fadeOut()
.next().fadeIn()
.end().appendTo($this);
}, 3000);
});
.jquerySlideshow-out {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.jquerySlideshow {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
background: no-repeat center center fixed;
background-size: cover;
background-attachment: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div style="position: relative; height: 500px; width: 100%;">
<div class="jquerySlideshow-out">
<div class="jquerySlideshow" data-bgimg="https://lh3.googleusercontent.com/K3UdS0t311DpKIiq614Ix6cRanFYxueEFaLF3T0bPQLGcJtqzw5ps3ClI85nK7jB4ElbKBs8xg=s640-h400-e365"></div>
<div class="jquerySlideshow" data-bgimg="http://www.newtimere.com/img/portfolio/portfolio4.jpg"></div>
<div class="jquerySlideshow" data-bgimg="http://space-facts.com/wp-content/uploads/magellanic-clouds.png"></div>
</div>
</div>
<div style="position: relative; height: 500px; width: 100%;">
<div class="jquerySlideshow-out">
<div class="jquerySlideshow" data-bgimg="https://lh3.googleusercontent.com/K3UdS0t311DpKIiq614Ix6cRanFYxueEFaLF3T0bPQLGcJtqzw5ps3ClI85nK7jB4ElbKBs8xg=s640-h400-e365"></div>
<div class="jquerySlideshow" data-bgimg="https://i.ytimg.com/vi/lt0WQ8JzLz4/maxresdefault.jpg"></div>
<div class="jquerySlideshow" data-bgimg="http://space-facts.com/wp-content/uploads/magellanic-clouds.png"></div>
</div>
</div>

multiple lightbox gallery on one page

how can i fix this? when i click "smile" it appears smile but when i click sad it also appear a smiley face.
SMILE<br>
<div id="light"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
SAD
<div id="light"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div>
CSS: fade for the close and light is for the the lightbox.
#fade{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
javascript: for the open and close function
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';

You cannot use the same ID twice. You must use unique ID's.
Try this:
In the HTML, give your two light divs each a unique ID, for example lightSmile and lightSad.
In order to be able to use the same CSS for both lightboxes, give both boxes a class lightbox, and in the CSS, change the #light to .lightbox.
Finally, change the lightbox_open() function to the one below here.
HTML
SMILE<br>
<div class="lightbox" id="lightSmile"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
SAD
<div class="lightbox" id="lightSad"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div>
CSS
.lightbox{
display: none;
...
}
JS
function lightbox_open(id){
window.scrollTo(0,0);
document.getElementById(id).style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('lightSmile').style.display='none';
document.getElementById('lightSad').style.display='none';
document.getElementById('fade').style.display='none';
}
If you look at the HTML, you see that now a string of the lightbox's ID is send along when lightbox_open() is called.
In the function, this ID-string is supplied as a variable (between the brackets: id). And in the line where lightbox's display-style is changed, this id is used.
In the close-function, the display-style of both the lightbox's is set back to default.
UPDATE
If you have a lot of lightboxes, it's easier to access the lightboxes by classname in the close-function:
function lightbox_close(){
var list = document.getElementsByClassName('lightbox');
for (var i=0; i<list.length; i++) {
list[i].style.display = 'none';
}
document.getElementById('fade').style.display='none';
}
And if you're willing to use jQuery, you can do that with one line (and probably more reliably cross-browser):
function lightbox_close(){
$('.lightbox').css('display','none'); //<--------------jQuery
document.getElementById('fade').style.display='none';
}

How do I create an invisible scrollable area on an HTML page?

I want to trigger an event whenever the user scrolls up or down inside an invisible div (a 'scroller'). Imagine the below setup :
CSS
#scroller {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 50px;
}
#scroller div {
position: absolute;
top: 0px;
left: 0px;
height: 50000px;
width: 100%;
}
span {
position: absolute;
top: 20px;
left: 100px;
}
HTML
<div id="scroller"><div></div></div>
<span></span>
Javascript
var timeout;
$("#scroller").scroll(function ()
{
clearTimeout(timeout);
$('span').text('scrolling');
timeout = setTimeout(function ()
{
$('span').text('');
}, 1000);
});
Whenever the user scrolls inside the above div, the word "scrolling" should appear on the screen. You can play around with this fiddle : http://jsfiddle.net/f1hxndt4/4/
There are two problems with the above :
Scrolling inside the 'scroller' obviously needs to be infinite (up and down) - Currently it only allows a 50000px scroll.
The "scroller" needs to be invisible. Currently the scrollbars are visible.
Any suggestions would be much appreciated, thank you!

Here is the solution in case anyone is interested : http://jsfiddle.net/f1hxndt4/14/
CSS
#scroller{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 50px;
overflow: hidden;
}
#scroller .parent{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100px;
overflow-x:hidden;
}
#scroller .child {
position: absolute;
top: 0px;
left: 0px;
height: 50000px;
width: 100%;
}
span {
position: absolute;
top: 20px;
left: 100px;
}
HTML
<div id="scroller">
<div class="parent">
<div class="child"></div>
</div>
</div>
<span></span>
Javascript
var timeout;
$("#scroller .parent").scroll(function ()
{
clearTimeout(timeout);
$('span').text('scrolling');
timeout = setTimeout(function ()
{
$('span').text('');
}, 1000);
});
Explanation :
You need to create a scrollable <div> : $('#scroller .parent') and then place that inside a narrower <div> : $('#scroller'). Set the overflow of the latter to 'hidden'.
That way the scrollbar on the right side of $('#scroller .parent') will not be visible anymore.

If you bind to the 'scroll' event, then you will need to make the area scrollable (which as you say, defeats the point of the what you're trying to acheive!). Instead, you need to listen for the events that would otherwise usually cause scrolling, such as listening for mousehweel events. You may also wish to listen for swipe events etc.
You can calculate scroll distance by using the wheelData property of the event to detemrine the scroll delta. (In Firefox and opera you will need to use the detail property instead.)
var onMouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll"
: "mousewheel";
var timeout;
$("#scroller").on(onMouseWheelEvent, function (e)
{
clearTimeout(timeout);
$('span').text('scrolling');
var scrollEvent = e.originalEvent;
var delta = scrollEvent.detail? scrollEvent.detail*(-120) : scrollEvent.wheelDelta
console.log(e.originalEvent.wheelDelta);
timeout = setTimeout(function ()
{
$('span').text('');
}, 1000);
});

Demo: http://jsfiddle.net/techsin/o2n2q5p4/
Improved: http://jsfiddle.net/techsin/o2n2q5p4/1/
This is similar to link you posted however it dosen't rely on scrolled up amount but creates its own amount relying on mousewheel data. I tried to solve your original problem instead.
if anything is unclear just ask: (no jquery used just for challenge)
var a=0, topSpeed = 20, deg=0;
window.addEventListener('mousewheel', function(e){
if (a<topSpeed) {
a = a + ((e.wheelDelta/1000) * topSpeed);
}
});
var img = document.getElementById('gear');
function animate() {
a = +(a*.95).toFixed(2);
if (Math.abs(a)<1) a=0;
deg = (deg+a) % 360;
img.style.transform = 'rotate('+deg+'deg)';
requestAnimationFrame(animate);
}
animate();

how to i get the image to center in my gallery

I have made a simple slider gallery for my site but have found that when I click next the image updates but it does not centre until I have done a full cycle of the images
how can i get the images to align from the start?
HERE IS THE JS FIDDLE > http://jsfiddle.net/8pScd/4
HTML
<div class="view_gallery">view gallery</div>
<div class="prev control"><<</div>
<div class="next control">>></div>
<div class="gallery">
</div>
<div class="overlay"></div>
CSS
.overlay{
display: none;
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
z-index: 100;
}
.gallery{
z-index: 200;
padding: 10px;
position: absolute;
left: 50%;
background: #fff;
}
.control{
position: absolute;
top: 200px;
z-index: 300;
color: #fff;
text-transform: capitalize;
font-size: 2em;
cursor: pointer;
}
.prev{left: 0;}
.next{right:0;}
JQUERY
//images
var pics = new Array();
pics[0] = "cars.jpg";
pics[1] = "cats.png";
pics[2] = "dogs.png";
pics[3] = "bus.jpg"
//total amount of pictures to display
var pictot = pics.length-1;
var nxt = $(".next"),
prv = $(".prev"),
view = $(".view_gallery"),
gal = $(".gallery"),
overlay = $(".overlay"),
num = 0;
//view gallery
view.click(function(){
overlay.show();
gal.show();
// Start gallery off on the first image
gal.html('<img src="' + pics[0] + '" />');
});
nxt.click(function(){
// If on the last image set value to 0. Else add 1
if (num == pictot){num = 0;}else{num++;};
update();
});
prv.click(function(){
// If on first image set value to last image number. Else minus 1
if (num == 0){num = pictot;}else{num--;}
update();
});
function update () {
// update image with next/previous
gal.html('<img src="' + pics[num] + '" />');
//center image (not working very well)
var x = gal.width()/2;
gal.css("marginLeft", -x);
};
//hide
overlay.click(function(){
gal.hide();
$(this).hide();
});

The problem you have is that the "update" function is called immediately after clicking on prev/next. The image has not yet been loaded, so the code does not actually know the new gal.width yet. That's why it works after a full round: the images are now in the cache, and therefore already available.
The best solution would be to use javascript Image objects to preload the pictures; an easier way but possibly problematic is to use the 'load' event (it may not work well in all browsers).

You can align your gallery div with some simple css hack.
1)first define width. (you can define dynamic width with jquery).
2)add position:absolute;
3)add left:0 , right:0;
4)add margin:0 auto;
final code looks like this.
.gallery {
background: none repeat scroll 0 0 #FFFFFF;
left: 0;
margin: 0 auto !important;
padding: 10px;
position: absolute;
right: 0;
width: 600px;
z-index: 200;
}

your math is wrong, look at this example http://jsfiddle.net/8pScd/6/
i've just need to change your math at
var x = $('body').width()/2 - gal.width()/2;
gal.css("margin-left", x + 'px');
and i removed this line at your css
left: 50%;
.gallery{
z-index: 200;
padding: 10px;
position: absolute;
background: #fff;
}

Knowing that .gallery is 920px wide, set left: 50%; margin-left: -470px. Also remove the line in javascript which updates margin-left of the gallery container - gal.css("marginLeft", -x);