I am using blueimp gallery http://blueimp.github.io/Gallery/ as a lightbox in my website. Is there an easy way to keep the indicator on by default? Right now, after you open a gallery in a lightbox you need to click on an image for it to show navigation buttons and indicator options.
Add blueimp-gallery-controls class to gallery container:
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
Edit the blueimp-gallery.css. Set the elements you want shown to display:block instead of display:none.
Related
Looking to implement the following.
I have a navigation menu, where when I hover over the "Services" link a submenu is shown. The submenu stays shown if the cursor moves off "Services" in the main menu and hovers over the submenu and also if the cursor moves around the page. The submenu will disappear when one of the other main menu items is hovered over.
Example of the menu on this website (apologies for the link and I know the page may change soon, but showing as easiest way to describe what's required) https://kota.co.uk/
I am using WordPress
Example of the menu structure
HTML
<div class="slide-in-menu-container">
<div class="menu__main">
<a class="menu__block" href="/home">Home</a>
<a class="menu__services" href="/services">Services</a>
<a class="menu__block" href="/work">Work</a>
<a class="menu__block" href="/about">About</a>
<a class="menu__block" href="/contact">Contact</a>
</div>
<div class="menu__services--hover">
link
link
link
link
</div>
</div>
I have not shown any jQuery, as I have tried a few different solutions and didn't know which was best to show if any, but none of them keep the submenu shown until I hover over another menu item.
Initially hide() your services div and we can achieve this by using jQuery mouseover() and mouseleave()
Run snippet below to see in action.
$(".menu__services").mouseover(function() {
$('.menu__services--hover').removeClass('d-none')
$(".menu__block").mouseover(function() {
$('.menu__services--hover').addClass('d-none')
});
});
.d-none {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-in-menu-container">
<div class="menu__main">
<a class="menu__block" href="/home">Home</a>
<a class="menu__services" href="/services">Services</a>
<a class="menu__block" href="/work">Work</a>
<a class="menu__block" href="/about">About</a>
<a class="menu__block" href="/contact">Contact</a>
</div>
<div class="menu__services--hover d-none">
link
link
link
link
</div>
</div>
Simple just hide all menus when a mouse hovers on the other menu then show the menu you want to show and dont add function on mouseleve
Good answer by #AlwaysHelping, There is a problem when mouse leave from main menu option, the sub menus panel not hiding, so i just corrected and putted a hack for that issue.
it will check main and submenus has already mousehover then it will not add class class for d-none.
$(document).ready(function(){
$(".menu__services").mouseenter(function() {
$('.menu__services--hover').removeClass('d-none')
});
$(".menu__services, .menu__services--hover").mouseleave(function() {
setTimeout(function(){
if(!$('.menu__services:hover').length && !$(".menu__services--hover:hover").length){
$(".menu__services--hover").addClass('d-none')
}
}, 100);
});
});
.d-none {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-in-menu-container">
<div class="menu__main">
<a class="menu__block" href="/home">Home</a>
<a class="menu__services" href="/services">Services</a>
<a class="menu__block" href="/work">Work</a>
<a class="menu__block" href="/about">About</a>
<a class="menu__block" href="/contact">Contact</a>
</div>
<div class="menu__services--hover d-none">
link
link
link
link
</div>
</div>
Hope this help.
I want to add a close button to an image that I opened in my Image gallery. I have used the 'img' tag inside the anchor tag, where it should display a particular image of full size within the same page and want to close the image and come back to the main page.
I have came across doing this solution with Jquery, Is there anyway it can be done with javascript??
index.html
<div class="image-gallery-items">
<div class="image-gallery-item">
<a href="/dist/images/myImg.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg.jpg">
</a>
</div>
<div class="image-gallery-item">
<a href="/dist/images/myImg2.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg2.jpg">
</a>
</div>
I make gallery on my onepage website. I try use show/hide and scrollit
to show more details about my work. But I do not know how to connect it together to make it work.
Here code gallery. When I push it open information about it.
<li>
<a href="#single-project" class="show_hide more" rel="#slidingDiv8" >
<div class="item web-design" data-ref="mixitup-target">
<img src="img/1.png" alt="project 9">
</div>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h6>Amazing Caption</h6>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</a>
</li>
Here is Scrolit which I want to put in the code above.
<li><a data-scroll-nav='4'></a></li>
In the start div i have add
<section data-scroll-index='4'>
How do I connect them show/hide and scrollit to work together? Trying for some time and will only show/hide but not scroll.
Are you trying to use Jquery toggle class ? If yes, Jquery trigger can be call like this $(selector).toggle(speed,callback);
Hope this helps
https://jsfiddle.net/pq8ef3dw/
how can i create moving div like on this site (on right side of slider) Click to see div on web with javascript or jquery ?
The vertical carousel on this page (http://jquery.malsup.com/cycle2/demo/carousel.php) might help you out.
You can Google for jQuery carousel and you will find a lot of further tutorials and downloads for this.
<div class="slideshow vertical"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-next="#next3"
data-cycle-prev="#prev3"
data-cycle-pager="#pager3"
data-cycle-carousel-visible=2
data-cycle-carousel-vertical=true
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
...
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class=center>
<a href=# id=prev3><< Prev </a>
<a href=# id=next3> Next >> </a>
</div>
<div class="cycle-pager" id=pager3></div>
I'm currently making a website for a university project where I'm using a piece of Javascript ( http://buildinternet.com/project/supersized/ ) in order to generate a background that is a gallery of several images.
I'm trying to set the site so that it will display a single image as the background in the event of Javascript being turned off, but the navigation elements of this slideshow are generated using HTML code outside of the script tags and inside the body tag.
Is there a way I can set this HTML code so that it will only be included when Javascript is active, leaving the screen clear of the navigation controls when it isn't?
At request the code I'm trying to isolate is the Div tags being called below.
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<!-- <a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<!--<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
Like #jumpingcode mentioned, you would want to hide the controls in question with CSS, and show them with JavaScript.
Hide the div with CSS:
#controls-wrapper {
display:none;
}
Then show it in your page with jQuery:
$('#controls-wrapper').show();
Or use .css() to have more control over what type of display property to use:
$('#controls-wrapper').css('display', 'block');