Develop Reference

How do I make pagerCustom carousel in bxSlider?

I created a thumbnail slider with bxSlider pagerCustom. Thumbnails do not fit in the slider. I need to make the thumbnails a carousel.
I have 15 pictures and 15 thumbnails for them and the picture slide works like a carousel and I need the thumbnails to work the same way
How should I do it?
`js
$(document).ready(function() {
jQuery('.bxslider').bxSlider({
nextText: '',
prevText: '',
pagerCustom: '#bx-pager',
});
});
`
<div class="product3_slider">
<div class="slider3">
<ul class="bxslider">
<li><img src="https://static.mikrotik.group/image/trm240.jpg" /></li>
<li><img src="https://static.mikrotik.group/image/trm240back.jpg" /></li>
</ul>
</div>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="https://static.mikrotik.group/image/trm240small.jpg" /></a>
<a data-slide-index="1" href=""><img src="https://static.mikrotik.group/image/trm240backsmall.jpg"/></a>
</div>
</div>
I tried to find examples where there are a lot of pictures with thumbnails, but I did not find such examples.

How to minimize function repetition using element data-attribute?

My jQuery code is working but I want to minimal it by data attribute. Please see below my HTML and jQuery code.
The functions below are repeated upto four times and I want to minimize/reduce this repetition. Thanks in advance.
$('.nav-menu-list ul li:nth-child(1)').hover(function() {
$('#item-01').fadeIn();
}, function() {
$('#item-01').fadeOut();
});
$('.nav-menu-list ul li:nth-child(2)').hover(function() {
$('#item-02').fadeIn();
}, function() {
$('#item-02').fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="nav-menu-list">
<ul>
<li data-id="item-01"><h2>home</h2></li>
<li data-id="item-02"><h2>about us</h2></li>
<li data-id="item-03"><h2>category</h2></li>
<li data-id="item-04"><h2>news room</h2></li>
<li data-id="item-05"><h2>blog</h2></li>
<li data-id="item-06"><h2>contact us</h2></li>
</ul>
</span>
<span class="nav-menu-list-details">
<div id="item-01"><img src="images/home-preview.png" alt="" /></div>
<div id="item-02"><img src="images/home-preview.png" alt="" /></div>
<div id="item-03"><img src="images/home-preview.png" alt="" /></div>
<div id="item-04"><img src="images/home-preview.png" alt="" /></div>
<div id="item-05"><img src="images/home-preview.png" alt="" /></div>
<div id="item-06"><img src="images/home-preview.png" alt="" /></div>
</span>

You can use only a single function to control all of them.
But, for this, in the jQuery selector you must use $('.nav-menu-list ul li').
With this selector, hover() context will be the li itself, then, just get the data-id of the current hovered li and then use it to select the div you want to target.
See below, I suggest to use full page ("Expand Snippet") mode on the snippet to better visualization:
$('.nav-menu-list ul li').hover(function() {
let id = "#" + $(this).data("id")
$(id).fadeIn();
}, function() {
let id = "#" + $(this).data("id")
$(id).fadeOut();
});
.nav-menu-list-details div{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="nav-menu-list">
<ul>
<li data-id="item-01"><h2>home</h2></li>
<li data-id="item-02"><h2>about us</h2></li>
<li data-id="item-03"><h2>category</h2></li>
<li data-id="item-04"><h2>news room</h2></li>
<li data-id="item-05"><h2>blog</h2></li>
<li data-id="item-06"><h2>contact us</h2></li>
</ul>
</span>
<span class="nav-menu-list-details">
<div id="item-01"><img src="images/home-preview.png" alt="" />ITEM_1</div>
<div id="item-02"><img src="images/home-preview.png" alt="" />ITEM_2</div>
<div id="item-03"><img src="images/home-preview.png" alt="" />ITEM_3</div>
<div id="item-04"><img src="images/home-preview.png" alt="" />ITEM_4</div>
<div id="item-05"><img src="images/home-preview.png" alt="" />ITEM_5</div>
<div id="item-06"><img src="images/home-preview.png" alt="" />ITEM_6</div>
</span>

You should consider that the event target is the single object, even if the target includes a multitude of items:
$('.nav-menu-list ul li').hover(function() {
var id = $(this).data().id;
$("#"+id).fadeIn();
}, function(){
var id = $(this).data().id;
$('#'+id).fadeOut();
});

Replace article with div with a button that will stay and can toggle between article and div content

I want with jQuery when I click the button to toggle the content between the article and the div.
jQuery so far, but its not working as intended.
Thats all i have, i will appreciate if you guys could guide me.
$('.gal').on('click',function(){
if($('article').css('display')!='none'){
$('#vnav').html($('#vnav').html()).show().siblings('div').hide();
}else if($('#vnav').css('display')!=='none'){
$('#vnav').show().siblings('div').hide();}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="gal">Gallery</button></div>
<article>some content inside</article>
<div id="vnav" style="display:none;">
<ul id="horizontal">
<li><img src="images/1.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/2.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/3.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/4.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/5.jpg" width="782" alt="" height="440" /></li>
</ul>
</div>
Thanks in advance!

You just need to write this code to toggle between article & div on button click.
$('.gal').on('click',function(){
$('article').toggle();
$('#vnav').toggle();
});

You can try this https://jsfiddle.net/2Lzo9vfc/170/
JS
var show = true;
$('.gal').click(function() {
if(show == true) {
$('article').hide(200);
$('#vnav').show(200);
show = false;
} else {
$('#vnav').hide(200);
$('article').show(200);
show = true;
}
});

How to change image and link with data values in Javascript?

I start learn Javascript and I need your help.
I have big image and under big image there are 3 thumbnails. If user click second thumbnail, big image has to changes to second data-bigimage.
And swipebox link has to change to second data-original image. The same for other images.
HTML:
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>

jQuery(document).ready(function( $ ) {
$('.profile-thumbs li').click(function(){
var imageurl = $(this).children('img').data('bigimage');
var imageorig = $(this).children('img').data('original');
$('.profile-bigImage').attr("src", imageurl);
$('.swipebox').attr("href", imageorig);
});
});
$(this) is always the clicked element in a click function matching the selector.

This may do the stuff, try this:
$(".profile-thumbs li img").click(function() {
var bigImg = $(this).data("bigimage"),
original = $(this).data("original");
$(".swipebox").attr("href", original);
$(".profile-bigImage").attr("src", bigImg);
});

look at the below example using jQuery.
`$(this)` will refer the image clicked.
so $(this).attr('src') will be the source of the image which we click.
assign it to the image which is having class profile-bigImage
$('img').click(function(){
var imgsrc=$(this).attr('src');
$('.profile-bigImage').attr('src',imgsrc);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>

You can try something like that, it should work
$(document).on('click','.profile-thumbs img', function(event) {
event.preventDefault();
$('.profile-gallery-top a').attr('href', $(this).data('original'));
$('.profile-gallery-top img').attr('src', $(this).data('bigimage'));
});

Show Image Captions When Hovering

I'm trying to use javascript to show the caption of an image only when it's being hovered, and have a default caption displayed when no image is hovered.
<ul class="logos">
<li class="image-1"></li>
<li class="image-2"></li>
<li class="image-3"></li>
<li class="image-4"></li>
<li class="image-5"></li>
</ul>
<div class="captions">
<p>Default caption</p>
<p>This is a caption for the first logo</p>
<p>This is a caption for the second logo</p>
<p>This is a caption for the third logo</p>
<p>This is a caption for the fourth logo</p>
<p>This is a caption for the fifth logo</p>
</ul>
Any advice on how I could implement such an effect with javascript?

There's a better way to structure your page:
<script language="javascript" type="text/javascript">
// sets the caption for the clicked img
function caption(img){
// finds the element with an id="caption"
var ctrl = document.getElementById("caption");
// sets the text of the element = the alt property of the img
alert(img.alt);
ctrl.innerText = img.alt;
// sets the css display property = block (shows the element)
ctrl.style.display = "block";
// hides the defaultCaption element
document.getElementById("defaultCaption").style.display = "none";
}
// shows the defaultCaption and hides the caption div
function clearCaption() {
document.getElementById("defaultCaption").style.display = "block";
document.getElementById("caption").style.display = "none";
}
</script>
<ul class="logos">
<!--
alt : an alternative text description for an image
onmouseover : event handler that fires as the mouse moves over image
onmouseout : event handler that fires as the mouse moves off the image
-->
<li><img class="image-1" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-2" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-3" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-4" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-5" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
</ul>
<div id="caption" style="display:none"></div>
<div id="defaultCaption">default caption text</div>
UPDATED:
Hadn't spotted that the image tags were malformed? - I've rewritten it as a list of images.
If your want li elements then change alt to title (in the elements and the code).

You even do not need JavaScript. You can achieve it via CSS.
See it in action at jsFiddle: http://jsfiddle.net/phusick/n6wTr/
Markup:
<div class="container">
<ul class="logos">
<li class="image i1">
<p class="caption">1st caption</p>
</li>
<li class="image i2">
<p class="caption">2nd caption</p>
</li>
<li class="image i3">
<p class="caption">3rd caption</p>
</li>
</ul>
</div>
CSS:
div.container {
position: relative;
padding-top: 2em;
}
li.image p.caption {
position: absolute;
top: 0;
left: 0;
display: none;
}
li.image:hover p.caption {
display: block;
}​