I am trying to make a slideshow with Bootstrap's JavaScript collapse and tab. The idea is to have a list of thumbnails that can be clicked to show a blow up of the picture in a collapse.
I want to be able to click on the first thumbnail to open up the collapse with the first thumbnails blown up pic. When the second thumbnail is clicked, the first blown up pic should be replaced with the second one.
The problem I'm running into right now is that the blown up images are showing up in a list on top of each other instead of replacing each other.
Here is a fiddle with the current issue: http://jsfiddle.net/g7nrt9b4/
Code for the Fiddle:
<div class="panel-body">
<ul class="thumb-list">
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
</ul>
<div class="collapse pic-theater" id="collapseA1">
<img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
</div>
<div class="collapse pic-theater" id="collapseA2">
<img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
</div>
</div>
Thanks in advance!
Here you go:
Add some class (show-img in the example below) to your img tags, so you can append a click event to them.
Add some image loading indicator to inform the user that something is going on when thumbnail is clicked (used blockUI just for example).
And we're ready to go:
HTML:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Title.
</h3>
</div>
<div class="panel-body">
<ul class="thumb-list">
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
<!-- more images ... -->
</ul>
<div id="collapse" class="collapse pic-theater">
<div class="block">
<img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
</div>
</div>
</div>
</div>
<img src="https://amitchandnz.files.wordpress.com/2010/08/please_wait.gif?w=614" id="spinner" />
jQuery:
// don't want to reload current image if it has been already loaded, so make variable for that:
var loaded = false,
// lastclicked is the item that was last clikced. This is just a variable now, so we do not have to repeat 'var':
lastClicked,
// set the collapse element as variable, so we have easir to call it later on:
collapseEl = $('#collapse');
// method that specify what should happen when the thumbnail is clicked:
$('.show-img').click( function(){
// class 'current' is to define if the thumbnail was clicked as last, if so, collapse the panel, if not, load image of the thumbnail that was just clicked
$('.thumb-img').removeClass('current');
$(this).find('.thumb-img').addClass('current');
if(this != lastClicked){
// the thumbnail wasn't clicked last time:
lastClicked = this;
loaded = false;
}else{
// the thumbnail was clicked last time, so we want to collapse the panel instead of reloading image again:
collapseEl.collapse('toggle');
loaded = true;
}
if(!loaded){
// show the panel as there's another item loaded inside:
collapseEl.collapse('show');
// set that this item is being loaded:
loaded = true;
// fetch the image source from the thumbnail 'href' attribute:
var img = $(this).find('.thumb-img').attr('src');
// notify the user that something is going on while loading the image:
$('.block').block({
message : $('#spinner'),
css : {
background : 'none',
border : 'none'
}
});
// load the image:
$('.theater-img').load( function(){
// set image as loaded, so the click would not repeat loading process (could be skipped if the images are cached):
loaded = false;
// remove loading indicator:
$('.block').unblock();
// added [ '?'+ (new Date).getTime() ] - to simulate different images. So each new (except the one that has a 'current' class) thumbnail click tends like it's a new image:
}).attr('src', img + '?'+ (new Date).getTime());
}
});
// when panel is collapsed, remove class 'current' from the img, so that we know it's not displayed:
collapseEl.on('hide.bs.collapse', function () {
$('.thumb-img').removeClass('current');
})
DEMO
Related
i am using #id on 3 buttons to change image on Slides , but i dont want to scroll to images slide section when i click on button just want to slide image to next without scrolling to image section
here is drive video link to show how my web is looking right now https://drive.google.com/file/d/1dXMCeBNzkn2c5ChNQfOAVthNBHHsePSp/view?usp=drivesdk
<div className="carousel carousel-center max-w-md md:max-w-screen-2xl mx-auto space-x-24 ">
<div id="item1" className="carousel-item">
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image1" />
</div>
<div id="item2" className="carousel-item " >
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image2" />
</div>
<div id="item3" className="carousel-item">
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image3" />
</div>
</div>
Just add an event listener to your buttons and prevent the default behaviour. Add an id of "link" to the button and then add an event listener like below. If your button element contains an anchor tag, add the "link" id to anchor tag instead of button.
document.getElementById("link").addEventListener("click", (e) => {
e.preventDefault();
});
So I am having a problem with trying to create drop up menu on click.
First of all, there is the real site that I am working on. https://socialmanagement.000webhostapp.com/
under 736px width, the menu will turn to one button. The problem is that on mobile devices it's really buggy. If you click it on phone, it will automatically proceed you to the "href" of the last button in the menu even if it's not showing. Also, the menu won't go down after another clicking the "home" button
I need to drop up to a menu that I click on the button (the button will stay in the same position not like right now where it goes up) and it will stay until user clicks on it once again.
Thank a lot for any advice
HTML:
<div class="navbar" id="myTopnav" >
<div class="dropup">
<img src="images/Icons/home.png" />
<div class="dropup-content" >
<a href="#home" > <img src="images/Icons/home.png" /> Home</a>
<img src="images/Icons/about.png" /> News
<img src="images/Icons/info.png" /> Contact
<img src="images/Icons/menu.png" /> Home
<img src="images/Icons/pic.png" /> Newssssssssssss
<img src="images/Icons/about.png" /> Contact
</div>
</div>
</div>
SCRIPT (the First scrip that I got here was bad so I have to change it to this one, still can't close it from a mobile device):
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.icon')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
EDITED:
First of all, in your provided HTML code, there is no myDropdown element. So, first we need to add that id to the dropup-content element. Then, we can just toggle a class of show when the a or in your case, the icon, is clicked. So, here it is:
HTML:
<div class="navbar" id="myTopnav" >
<div class="dropup">
<!-- You don't need javascript void here, we just won't include href.-->
<a class="icon" onclick="myFunction()"> <img src="images/Icons/home.png" /> </a>
<!-- We add id="myDropdown" to the dropup-content element.-->
<div class="dropup-content" id="myDropdown">
<a href="#home" > <img src="images/Icons/home.png" /> Home</a>
<img src="images/Icons/about.png" /> News
<img src="images/Icons/info.png" /> Contact
<img src="images/Icons/menu.png" /> Home
<img src="images/Icons/pic.png" /> Newssssssssssss
<img src="images/Icons/about.png" /> Contact
</div>
</div>
</div>
SCRIPT:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show")
}
// This is all you need to toggle on/off the menu,
// no need of that extra function with a for loop that you have in your code.
Of course, this goes without saying, you must edit the show class in your CSS in a way that you would like it to look.
As for the other question, how to stick the menu in a same position, you just add position: absolute to that element in your CSS, with the top/left/right/bottom coordinates that you like, and give it a z-index: 2(or higher) to make sure its on top of every other element. Hope this clears your issues.
I am trying to show animation on list item click. Same animation work with button click but not with list item.
No exception printing on console.
Here is my code.
function animateButtons(clicked_btn_id){
var circle = $('#' + clicked_btn_id + ' .circle');
if (!circle.length) {
$('#' + clicked_btn_id).append('<div class="circle"></div>');
circle = $('#' + clicked_btn_id + ' .circle');
}
setTimeout(function(){
circle.toggleClass('open');
});
setTimeout(function() {
//change image back
circle.toggleClass('open');
}, 300);
}
}
function clickedControlButton(clicked_btn_id){
animateButtons(clicked_btn_id);
}
Here is html code.
<div class="wrapper">
<ul class="nav nav-tabs list" id="myTab">
<li>
<img src="images/one.png" class="img-circle center-block img-reponsive" alt="one" onclick="clickedControlButton(this.id)" id="btnone">
<p style="color:white;" class="index-footer-btn-text" id="oneText"> one </p>
</li>
<li>
<img src="images/two.png" class="img-circle center-block img-reponsive" alt="two" onclick="clickedControlButton(this.id)" id="btntwo">
<p style="color:white;" class="index-footer-btn-text" id="twoText"> two </p>
</li>
<li>
<img src="images/three.png" class="img-circle center-block img-reponsive" alt="three" onclick="clickedControlButton(this.id)" id="btnthree">
<p style="color:white;" class="index-footer-btn-text" id="threeText"> three </p>
</li>
</ul>
</div>
You may need to add the listener to the list items and not to the images. Images do not support nested elements, meaning that you can't add any circles inside the image, so you need to add it inside the list and format it with CSS to look as you wish.
So:
Remove the onclick event from the img elements
Give the list elements some id's
Attach the events to the list elements
Format your circles using CSS
Here is a JSFiddle with the functionality you want to achieve:
https://jsfiddle.net/oz15hzsb/
Here is how to attach the listeners:
$('.nav-tabs li').click(function(){
animateButtons($(this).attr('id'));
})
I have a home page having fadeslideshow with 5 slides. The plugin used for slideshow is http://plugins.jquery.com/project/fadeslideshow.
In the home page i also have Menu bar with menu items in it. When user clicks the menu item the slideshow content should be removed and one more slideshow should be added with menu items content. One more problem is, I need autoslideshow true for home page, but false for menu items slideshow. So i need to call slideshow.js file twice in the jquery. I tried with this but its not working.
The jquery code where i am calling the plugin. This is used for home page.
slide=jQuery('#slideshow').fadeSlideShow(
{width:936, height:476, autoplay:true});
When user clicks menu item the '#slideshow' content will be removed and menu items div will be loaded.
$('ul.dropdown-menu li a').click( function(event) {
$('#slideshowWrapper1').empty().load('test.html');
slide=jQuery('#slideshow').fadeSlideShow(
{ width:936, height:476, autoplay:false});
var newTopicContent = $(this).attr('id');
alert(newTopicContent);
});
The code for home page with 5 slideshow
<div id="slideshowWrapper1">
<div id="slideshow" class="slides">
<div class="5">
<div class="txtCenter" > <p> This is 5th slide</p></div>
</div>
<div class="4">
<div class="txtCenter" >
<img src="images/new/home4.png" alt="" /></div>
</div>
<div class="3">
<div class="txtCenter" ><p>This is third slide</p></div>
</div>
<div class="2">
<div style="text-align: center;margin-top: 2%;"><img src="images/new/some.png" alt="" /></div>
<br style="clear:both;"/>
</div>
<div class="1">
<div><img src="images/new/recreate.png" alt="" /></div>
<br style="clear:both;"/>
</div>
</div>
</div>
The test.html page has different contents for menu items. Here in my code the first slideshow is working very fine. But after clicking the menu item slideshow is not working. All slide contents coming in the same page.
I need help. Thanks in advance!!
If i understand correctly, you want to remove the first slideshow to replace with a new slideshow returned via test.html ?
I think you must wait for test.html to be load using load(url, callback)
see http://api.jquery.com/load/
$('ul.dropdown-menu li a').click( function(event) {
var id = $(this).attr('id');
$('#slideshowWrapper1').empty().load('test.html', function() {
slide=jQuery('#slideshow').fadeSlideShow(
{ width:936, height:476, autoplay:false});
var newTopicContent = id;
alert(newTopicContent);
});
});
I am using a image gallery in WordPress, images are fetching from database and displaying it into front end.
In my case a big image container, and three image thumbnail,
I want, when when i click on the thumbnail of the image the previous image which in container goes fade out and clicked image set in to image container.
My Html Markup
<!--A container Div which have 1st image from the thumbnail-->
<div class="wl-poster">
<a href=#" id="wl-poster-link">
<img id="poster-main-image" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg">
</a>
</div>
<!--For Thumbnails-->
<div id="wl-poster-thumb">
<ul id="posterlist">
<li class="poster-thumb">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg" rel="http://www.cnn.com/">
</li>
<li class="poster-thumb">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/3047006581_1eec7f647d.jpg" rel="http://yahoo.com">
</li>
<li class="poster-thumb" style="margin-right: 0pt;">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/lush-summer-louisville-kentucky-wallpapers-1024x768.jpg" rel="http://apple.com">
</li>
</ul>
</div>
Used jQuery
if(jQuery('.homepage-poster').length > 0){ // since this will return a empty
var img_src = jQuery("#wl-poster-thumb ul li:first img").attr('src');
var href_path = jQuery("#wl-poster-thumb ul li:first img").attr('rel');
var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
jQuery('.wl-poster img').attr('src',final_src);
jQuery('.wl-poster a').attr('href',href_path );
}
jQuery('#posterlist .poster-thumb img').click(function(){
var href_path = jQuery(this).attr('rel');
var img_src = jQuery(this).attr('src');
var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
jQuery('#poster-main-image').remove(function() {
jQuery('a#wl-poster-link').attr('href',href_path);
jQuery('#poster-main-image').attr('src',final_src)..fadeOut('slow').fadeIn('slow');
// $('#img1').fadeOut('slow').remove();
// $('#img1').fadeOut('slow').fadeIn('slow');
});
});
Please help me to solve this issue.
try it with this code:
jQuery('#wl-poster-link').attr('href', href_path);
jQuery('#poster-main-image').fadeOut('slow').attr('src',final_src);
//wait till image has loaded, you could think about a loading-gif laying above your image-container..
jQuery('#loading').show(); //or fadeIn
jQuery('#poster-main-image').load(function() { jQuery('#loading').hide(); jQuery(this).fadeIn('slow'); });
You added a point too much on your chaining. Also, the remove-function is not needed.
You forgot a beginning " on your a#wl-poster-link for the href. Fix this too.