Adding descriptions inside a blueimp gallery - javascript

I am using a BlueImp Gallery to add lightboxes to my image gallery. So, when you click on an image thumbnail, it launches a lightbox with a larger version of the image etc.
I also want to add in some descriptive text and a button to each slide of the lightbox, but I am having trouble making it work. It won't show the placeholder descriptions that I have added in.
Here's what I have so far;
HTML:
<div id="blueimp-gallery" class="blueimp-gallery">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<p class="description"></p>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="links">
<div class="row prints">
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm3.staticflickr.com/2843/10406026526_4cd1b56391.jpg" title="Ballooning" data-description="This is a banana." data-gallery>
<img src="http://farm8.staticflickr.com/7389/10404414563_0914b69e0e.jpg" alt="Ballooning">
</a>
<h3>Ballooning</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5547/10406009404_c197c2221b.jpg" title="Clearing" data-description="This is a apple." data-gallery>
<img src="http://farm6.staticflickr.com/5490/10404414523_745ea3065d.jpg" alt="Clearing">
</a>
<h3>Clearing</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5510/10406026066_7f95a075ee.jpg" title="Sky/Sea" data-description="This is a cherry." data-gallery>
<img src="http://farm4.staticflickr.com/3769/10404249505_d767f7c420.jpg" alt="Sky/Sea">
</a>
<h3>Sky/Sea</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3678/10406009004_5c625e2028.jpg" title="Lights" data-description="This is a grapefruit." data-gallery>
<img src="http://farm3.staticflickr.com/2814/10404249395_9e4cae5bc7.jpg" alt="Lights">
</a>
<h3>Lights</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5538/10406019875_8424fbee11.jpg" title="Silhouettes" data-description="This is a orange." data-gallery>
<img src="http://farm8.staticflickr.com/7343/10404255766_d808d1902d.jpg" alt="Silhouettes">
</a>
<h3>Silhouettes</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3682/10406009134_3b666324ff.jpg" title="Sway" data-description="This is a kiwi." data-gallery>
<img src="http://farm6.staticflickr.com/5516/10404249545_7efb481042.jpg" alt="Sway">
</a>
<h3>Sway</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm8.staticflickr.com/7425/10406019935_1def1e0c09.jpg" title="Sunset" data-description="This is a grape." data-gallery>
<img src="http://farm3.staticflickr.com/2810/10404249465_0124b7f3e5.jpg" alt="Sunset">
</a>
<h3>Sunset</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5532/10406009324_4cd1b56391.jpg" title="Lighthouse" data-description="This is a strawberry." data-gallery>
<img src="http://farm6.staticflickr.com/5543/10404240054_6261498220.jpg" alt="Lighthouse">
</a>
<h3>Lighthouse</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3747/10406026506_6a4dbf2df0.jpg" title="Slabs"data-description="This is a pineapple." data-gallery>
<img src="http://farm8.staticflickr.com/7345/10404249655_7512bf6565.jpg" alt="Slabs">
</a>
<h3>Slabs</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.blueimp-gallery > .description {
position: absolute;
top: 30px;
left: 15px;
color: red;
display: none;
}
.blueimp-gallery-controls > .description {
display: block;
}
JS:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
And in my body (gallery.js is the file where I've added the above JS):
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="lib/fancybox/jquery.fancybox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="js/bootstrap-image-gallery.min.js"></script>
<script src="js/gallery.js"></script>
Any pointers on where I've gone wrong would be much appreciated!

You can pass any needed data on a element, and then display it in the gallery.
I spend a lot of time trying to find an answer, so I'll leave it here.
Here is an example:
HTML:
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<p class="description"></p>
<p class="example"></p>
...
</div>
------
<div id="links">
Banana
Apple
</div>
JS:
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {
index: link, event: event,
onslide: function (index, slide) {
self = this;
var initializeAdditional = function (index, data, klass, self) {
var text = self.list[index].getAttribute(data),
node = self.container.find(klass);
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
};
initializeAdditional(index, 'data-description', '.description', self);
initializeAdditional(index, 'data-example', '.example', self);
}
},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
CSS:
You can use .scss to refactor it, but it's just for example
.blueimp-gallery > .description, .blueimp-gallery > .example {
position: absolute;
top: 30px;
left: 15px;
color: #fff;
display: none;
}
.blueimp-gallery-controls > .description, .blueimp-gallery-controls > .example {
display: block;
}

Sorry if to late but I find a way to do this, only change the JS from:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
to this:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].innerHTML = text;
}
}
}
);

blueimp.Gallery(
document.getElementById('links'), {
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
});
http://jsfiddle.net/2B3bN/25/
Have a look at this one, it is a working one.
Just check what you've done wrong compared to mine.

use
document.getElementById('links').getElementsByTagName('a') or .children()

That works only for the first link...
I am trying to get it to work with html in the data-description. I have it working and pulling in the decsription text, but how do you parse the html to work as a link?
http://jsfiddle.net/LXp76/
<img src="http://lorempixel.com/80/80/" alt="" >
here it is working with FancyBox, http://jsfiddle.net/yShjB/2/
but I would much rather use the BlueImp Gallery..

Related

Remove Parent element child elements href has no property

I was trying to remove the parent element if the child element href has no attribute.
$(document).ready(function() {
var noImg = "";
var cPathName = window.location.pathname;
if (noImg) {
$(this).parent().remove();
}
});
$(".dnext-thumbs-gallery-top-image-link").filter(function() {
if ($(this).attr('href').length == 0) {
console.log('test');
$(this).parent().parent().remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cs-gallery" class="et_pb_with_border et_pb_module dnxte_thumbs_gallery_parent dnxte_thumbs_gallery_parent_0_tb_body">
<div class="et_pb_module_inner">
<div class="dnext_thumbs_gallery_top_holder">
<div class="swiper-container dnext-thumbs-gallery-top swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper dnext-thumbs-gallery-active" data-lightbox="on">
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_0_tb_body swiper-slide">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="">
</div>
</div>
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_1_tb_body swiper-slide swiper-slide-prev" style="width: 1080px; margin-right: 10px;">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="https://adroithd.com/wp-content/uploads/2022/07/WhatsApp-Image-2022-03-28-at-11.45.05-AM.jpeg.webp">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
when I trying to filter. got an error
$(...).filter is not a function
how to solve this error?
You can use each instead of filter.
$(document).ready(function() {
var noImg = "";
var cPathName = window.location.pathname;
if (noImg) {
$(this).parent().remove();
}
});
$(".dnext-thumbs-gallery-top-image-link").each(function(i, e) {
if ($(e).attr('href').length == 0) {
$(this).parent().parent().remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cs-gallery" class="et_pb_with_border et_pb_module dnxte_thumbs_gallery_parent dnxte_thumbs_gallery_parent_0_tb_body">
<div class="et_pb_module_inner">
<div class="dnext_thumbs_gallery_top_holder">
<div class="swiper-container dnext-thumbs-gallery-top swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper dnext-thumbs-gallery-active" data-lightbox="on">
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_0_tb_body swiper-slide">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="">
</div>
</div>
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_1_tb_body swiper-slide swiper-slide-prev" style="width: 1080px; margin-right: 10px;">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="https://adroithd.com/wp-content/uploads/2022/07/WhatsApp-Image-2022-03-28-at-11.45.05-AM.jpeg.webp">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

jQuery move div based on child class character length

I have a bootstrap 4 column template in mobile I want to apply clear:both based on child div character length . I mentioned the below the sample code if not clear I will briefly text on commands. Anyone help me to achieve this.
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rustic</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rusticabcede Rusticabcede</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rusticabc</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
<div class="col-sm-3 col-xs-6 applyclear">
<h4 class="tileh4">Rusticabcede</h4>
<div class="item-wrap">
<a href="http://mobilegear.my/alphatiles/product_detail/view/YLH6000C">
<span class="tiadj-img">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-19845.jpg" alt="YLH6000C" class="img-responsive">
</span>
</a>
<h6>YLH6000C</h6>
</div>
</div>
The script I was tried.
if ($(window).width() < 767) {
$(document).ready(function() {
var totLength = $('.tileh4');
var charLength = totLength.text().length;
if(charLength > 3){
totLength.addClass('whitespac');
}
$('.applyclear:has(.tileh4.whitespac)').css('clear', 'both');
});
}
else {
}
sample code here

Hide parent div class if child div class does not have content when there are multiple parent divs with the same class name

I have a slider where some of the images in the slider can have an optional photo- credit containing text or link in a popper. I would like to iterate over all of the popper instances and if all of the p tags in the .photo-credit p class are empty, then hide only that instance of the parent popper. I've tried to piece together a solution from some other posts, but have not been able to get it to work. The code I have does not hide a popper if all p tags are empty for that popper. I'm a JavaScript newbie and would appreciate any help.
HTML
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /></div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p><p>A photo credit.</p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg">
<p class="slider-pagination"></p>
</div>
JavaScript
$('.popper').each(function () {
//var $thisPopper = $(this);
var hasContent = 0;
$('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent > 0){
//$thisPopper.hide();
$(this).hide();
}
});
You were on the right direction. However a couple mistakes in your javascript.
You tried to target all the div with "popper" class. However, the div with "popper" and "photo-credit" are on the same level. Why not targeting their parent div instead?
Try this code. It's been tested (Link to jsfiddle)
$('.slider-item').each(function () {
var thisSilerItem = $(this);
var hasContent = 0;
thisSilerItem.find('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent <= 0){
thisSilerItem.find('.popper').hide();
}
});
Edit:
Bonus:
If your page has a large amount of sliders, this jquery solution will cause some UX issues ("jumpy" div on/after page load)
Try a CSS only solution.
When you render your DOM elements. Add a class to "popper" div if the content of "photo-credit" is empty.
<div class="popper hide">
// img
</div>
Then in your CSS, add
.popper.hide { display: none; }
It's hard to fully gather what you want to do, but if I understand correctly...
$('.popper').each(function () {
var photoCredit = $(this).find(".photo-credit p")
if ( $(photoCredit).is(':empty') ){
$(this).hide();
}
});
It's worth pointing out that CSS4 developers are working on a 'has' selector but as of July 2017 there is no support for any browser just yet.
It is expected to work in the following manner:
.popper:has(> p:empty) { display: none }
I hope this helps... :)
You can check this code.
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
Working code
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" />
</div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p>
<p>A photo credit.</p>
</p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
<div class="slider-item">
<div class="slider-image-container">
<img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" />
</div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more">Learn More</div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<a href="#" class="slider-control-prev">
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a>
<a href="#" class="slider-control-next">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a>
<p class="slider-pagination"></p>
</div>

Simulate button click with delay

I have a function that switches between 3 divs when one of 3 buttons is clicked (each button is linked to each div). But I also need that function to click each button automatically with 4 seconds delay. I want to achieve something like a slider that switches between those 3 divs automatically but the divs can also be switched by buttons. Is it possible to do? If so, how to do that? I'm a total jQuery / javascript beginner and I have no idea how to make it work.
Code attached below.
$(document).ready(function() {
$('#button_slide1').trigger('click');
$('.btn a').on('click', function(e) {
e.preventDefault();
//figure out which slide to show
var slideToShow = $(this).attr('rel');
//hide current slide
$('#header .slides.active').removeClass('active')
$('#' + slideToShow).addClass('active');
//show new slide
});
});
.slides:not(.active) {
display: none;
}
.btn {
float: left;
margin: 5px;
}
.btn p {
padding: 0;
margin: 0;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" rel="slide1">
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide2">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide3">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>
This should get you well along your way.
<style>
.toggleDiv {
display: none;
}
.toggleDiv.active {
display: block;
}
</style>
<div id="div1" class="toggleDiv">
<span>I'm div #1</span>
</div>
<div id="div2" class="toggleDiv">
<span>I'm div #2</span>
</div>
<div id="div3" class="toggleDiv">
<span>I'm div #3</span>
</div>
<button type="button" onClick="slides.toggle(0)">Toggle 1</button>
<button type="button" onClick="slides.toggle(1)">Toggle 2</button>
<button type="button" onClick="slides.toggle(2)">Toggle 3</button>
<script>
var slides = [
document.getElementById("div1"),
document.getElementById("div2"),
document.getElementById("div3")
];
function Slides(slides, active) {
this.slides = slides;
this.activeIndex = active === 0 ? 0 : active === null ? null : active || null;
this.slidesCount = this.slides.length;
this.toggle = function(index) {
if (this.activeIndex === index) {
return this.close(index);
}
return this.open(index);
};
this.open = function(index) {
this.activeIndex = index;
let i;
for (i = 0; i < this.slidesCount; i++) {
if (this.activeIndex !== i) {
this.slides[i].classList.remove("active");
}
}
return this.slides[index].classList.add("active");
};
this.close = function(index) {
this.activeIndex = null;
return this.slides[index].classList.remove("active");
};
console.log(this.activeIndex)
if (this.activeIndex !== null) {
this.slides[this.activeIndex].classList.add("active");
}
}
var slides = new Slides(slides, 0);
</script>
You need to set an interval using javascript:
var inx=0, // the button index that must be clicked
totalButtons = $('.buttons-wrapper').find('div.btn').length; // total number of buttons
var myInterval = setInterval(clickButton, 4000); // name of the function that needs to be triggered, time interval in miliseconds
function clickButton() {
if (inx >= totalButtons) // check for out of index
inx = 0;
$('.buttons-wrapper').find('.btn').eq(inx).find('a').first().trigger('click');
inx=inx+1; // adding one unit to the index
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" rel="slide1" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide2" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide3" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>
https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
You can edit this example according to your need
$(document).ready(function() {
$("#slideshow > div:gt(0)").hide();
$('.btn').one("click", function(e) {
e.preventDefault();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
});
.btn {
float: left;
margin: 5px;
}
.btn p {
padding: 0;
margin: 0;
text-align: center;
}
#slideshow > div {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div id="slideshow">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" >
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>

Expand / Show and hide div element in a listview

As you can see, is this a list view and my mission is when you click on an element / div then the div with the images expand / show. Now that is easy, even for a backend developer, but I would like to:
1. when I click again on the same element, then the element will hide.
2. When I click on another element, then the element that is already expand will hide and the other element that I click on, will expand / show.
I need Script and CSS for this please.
<div class="row">
#foreach(var post in CurrentPage.Children)
{
<div class="col-md-12">
<div class="content equal" onclick="showhide()">
<a href="#post.Url">
<div class="date">#post.CreateDate.ToLongDateString()</div>
<h2>#post.Name</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images(-expand)">
<img src="#post.Image" />
</div>
</div>
}
</div>
Try as follows.
$('.content.equal').click(function() {
$('.content.equal').not(this).next().slideUp();
$(this).next().slideToggle();
});
$('.content.equal a').click(function(event) {
event.preventDefault();
});
.images {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>

Categories