Trying to make multiple lightboxes work in javascript - javascript

I've been following a tutorial for a JS lightbox but I'm not fully understanding how to be able to use this on multiple divs.
What I want is the same lightbox but I want the content inside it to be different depending on what button/link I press.
Any help would be appreciated. I'll post the relevant snippets below.
HTML:
<ul id="portfolioitems">
<li><img src="images/digitaltattoo.jpg"><div>Digital Tattoo</div></li>
<li><img src="images/flashgame.jpg"><div>Flash Game - Deserted</div></li>
<li><img src="images/photos.jpg"><div>Photography</div></li>
<li><img src="images/bumper.jpg"><div>Video Bumper</div></li>
<li><img src="images/fbfanaticism.jpg"><div>Facebook Fanaticism</div></li>
<li><img src="images/oldwebsite.jpg"><div>Business Card Website</div></li>
</ul>
<div id="1">
<div class="contentwindowwrapper">
<div class="contentwindow">
<div class="contentwindowclose">x</div>
4365786
</div>
</div>
</div>
<div id="2">
<div class="contentwindowwrapper">
<div class="contentwindow">
<div class="contentwindowclose">x</div>
reerrhr
</div>
</div>
</div>
JS:
$(document).ready(function(){
var divnumber = $(this).attr("href");
$('#1').click(function(){
$('.contentwindowwrapper, .contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
$('.contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
$('#1, .contentwindowwrapper, .contentwindow').css('display', 'block');
$('.contentwindowwrapper, .contentwindow').css('z-index', '1');
});
$('#2').click(function(){
$('.contentwindowwrapper, .contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
$('.contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
$('#2, .contentwindowwrapper, .contentwindow').css('display', 'block');
$('.contentwindowwrapper, .contentwindow').css('z-index', '1');
});
$('.contentwindowclose').click(function(){
close_contentwindow();
});
$('.contentwindowwrapper').click(function(){
close_contentwindow();
});
});
function close_contentwindow()
{
$('.contentwindowwrapper, .contentwindow').animate({'opacity':'0'}, 100, 'linear', function(){
$('.contentwindowwrapper, .contentwindow').css('display', 'none');
$('.contentwindowwrapper, .contentwindow').css('z-index', '-1');
});
}
Thanks

No question, but hey here's an answer. This one is working but comes without any styling.
A simple jQuery lightbox plugin:
jQuery.fn.myLightbox = function() {
return this.each( function() {
var lightboxContentLink = jQuery( this ).attr( 'href' );
if( jQuery( lightboxContentLink ).length ) {
/* get contents from another element with ID lightboxContentLink */
var lightboxContent = jQuery( lightboxContentLink );
}
else {
/**
* #todo implement loading from URL
*/
var lightboxContent = 'some URL content';
}
var windowWrapper = jQuery( '<div class="contentwindowwrapper" />' );
var window = jQuery( '<div class="contentwindow" />' );
var windowHandle = jQuery( '<div class="contentwindowclose">close</div>' );
/* close popup on handle click */
windowHandle.click( function( event ) {
windowWrapper.hide();
} );
/* add content and window handle to popup */
window.append( lightboxContent, windowHandle );
/* wrap window with wrapper */
windowWrapper.append( window );
windowWrapper.hide();
/* insert new popup into DOM */
jQuery( 'body' ).append( windowWrapper );
jQuery( this ).click( function( event ) {
/* don't follow link */
event.preventDefault();
/* close any popups that are still open */
jQuery( '.contentwindowwrapper' ).hide();
/* fade-in popup */
windowWrapper.show( 300 );
} );
} );
};
The required HTML: (complete)
<ul id="portfolioitems">
<li>Open C1</li>
<li>Open C2</li>
<li>Open C3</li>
</ul>
<div id="c1">This is the content for popup C1.</div>
<div id="c2">This is the content for popup C2.</div>
<div id="c3">This is the content for popup C3.</div>
The call/setup (jQuery again):
jQuery( document ).ready( function( $ ) {
$( '#portfolioitems a[href]' ).myLightbox();
} );

Related

How to connect navigation links to jquery.mobile swiping pages?

I'm trying to create a webpage primarily for mobile. User navigates from page to another by swiping left or right. I have done this with jQuery mobile.
Now I would like to connect it to fixed navigation bar at the bottom of the screen, so that when user swipes the activated manu item changes accordingly. Can somebody give me a code for that?
Also I would like to make it so that when user clicks on a menu item, page changes with the same slide animation as when swiping. Now I have the animation on second menu item in a way that when it's clicked, the animation occurs but the sliding page is always the next one and not the exact page I want. So if user is on front page and then clicks on third menu item, it shows an animation of second page sliding to view and then jumps to third page, when it should automatically show animation of third page when you click third menu item.
Here is the swipe page script
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
transition: "slide"
});
}
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
transition: "slide",
reverse: true
});
}
$( document ).one( "pagecreate", "#page1", function() {
$( document ).on( "swipeleft", ".ui-page", function( event ) {
var next = $( this ).jqmData( "next" );
if ( next ) {
navnext( next );
}
});
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if (prev) {
navprev( prev );
}
});
$( document ).on( "click", ".next", function() {
var next = $( ".ui-page-active" ).jqmData( "next" );
// Check if there is a next page
if ( next ) {
navnext( next );
}
});
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if ( prev && ( event.target === $( this )[ 0 ] ) ) {
navprev( prev );
}
});
$( document ).on( "click", ".prev", function() {
var prev = $( ".ui-page-active" ).jqmData( "prev" );
if ( prev ) {
navprev( prev );
}
});
});
And this is my structure where I have added the bad animation to menu item News
<div id="page1" data-role="page" data-prev="#page3" data-next="#page2">
<div data-role="content" class="sivu">
I am page 1
</div>
</div>
<div id="page2" data-role="page" data-prev="#page1" data-next="#page3">
<div data-role="content" class="sivu">
I am page 2
</div>
</div>
<div id="page3" data-role="page" data-prev="#page2" data-next="#page1">
<div data-role="content" class="sivu">
I am page 3
</div>
</div>
<div class="scrollmenu" id="navbar" data-role="footer">
Home
News
Contact
About
Home
News
Contact
About
</div>
And here is link to code pen (it's not working for some reason)
https://codepen.io/pinjakumpulainen/pen/YMbNRx

disable scroll body when menu is open wordpress

My menu in wordpress has the following code:
<nav role='navigation'>
<div id="menuToggle" onclick="lockScroll()" >
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
) );
?>
</ul>
</div>
</nav>
And this jQuery function to disable scroll in body when #menuToggle is clicked:
<script>
jQuery(function(lockScroll) {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
}
else {
$('body').addClass('lock-scroll');
}
});
</script>
But it always gives me the error
Uncaught TypeError: $ is not a function at
HTMLDocument.
Im not exactly sure what 'open' means in your case. This code should most likely do the right thing or push you in the right direction:
jQuery( '#menuToggle' ).click( function() {
jQuery( 'body' ).addClass( 'lock-scroll' );
} );
jQuery( document ).on( 'mousedown', function( e ) {
var c = jQuery('#menuToggle');
if( !c.is( e.target ) && c.has( e.target ).length === 0 ) {
jQuery( 'body' ).removeClass( 'lock-scroll' );
}
} );
If you click #menuToggle the lock-scroll class is added (first part). As soon as you click outside of #menuToggle it will be removed (second part).
Please Try This:-
jQuery(function(lockScroll) {
if (jQuery('body').hasClass('lock-scroll')) {
jQuery('body').removeClass('lock-scroll');
}
else {
jQuery('body').addClass('lock-scroll');
}
});
This way a can disable the scroll when click
<script>
jQuery('#menuToggle').click( function(){
jQuery( 'body' ).addClass( 'lock-scroll' );
});
</script>
How can i remove class when click again?

Close div when clicking Background div

I want to close a Div when i click on the Background div(SearchBlur).
My problem is if i click on the shown div it closes also.
here is my javascrip code
SearchBlur.addEventListener('click', closePopup);
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
}
here my html
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">
</div>
</div>
</div>
</div>
the Programm looks like this
i want to close the popup wehn i click on the dark background
sorry for my bad english :D
Use event.stopPropagation(); onclick the child you want
var counter = 1;
$( ".SearchBlur" ).on( "click", function() {
if(counter == 1){
$( "#search_input" ).animate({ "left": "-300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
});
$( ".div_container" ).on( "click", function() {
event.stopPropagation();
});
.SearchBlur{
background:blue;
}
.div_container{
width:100px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">div_container
</div>
</div>
</div>
</div>
Try add a listener to the child div with following code
event.stopPropagation();
Which div are you trying to close?
From what I can see, you're fading out the highest level div, so all markup nested within SearchBlur will also be hidden. I assume you want to target a deeper nested div, for example:
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.div_container').fadeOut("normal");
counter = 0;
}
}
In a simple way your html looks like:
<div class="blur">
<div class="popup"></div>
</div>
Your JS is just like this:
$('.blur').on('click', function (e){
if (e.target === this)
$(this).fadeOut();
});
Here is codepen: https://codepen.io/alexmoronto/pen/xaKvxg

jQuery ToggleClass optimisation and features

I have worked on the below code to control a series of 3 sidebars. As you can see, the code isn't particularly efficient as I've simply repeated the content for each class. I'd like to streamline this if possible to just one function?
I'd also like to add the functionality of only ever allowing one sidebar to be active. So if sidebar .artists is .active and I click sidebar .about, the .artists sidebar will collapse.
Thanks.
JQuery
$(function() {
$( ".artists" ).click(function() {
$( ".sidebar.artists" ).toggleClass( "active" );
});
});
$(function() {
$( ".about" ).click(function() {
$( ".sidebar.about" ).toggleClass( "active" );
});
});
$(function() {
$( ".history" ).click(function() {
$( ".sidebar.history" ).toggleClass( "active" );
});
});
HTML
<nav>
<ul>
<li class="artists"><a>Artists</a></li>
<li>News</li>
<li class="about"><a>About</a></li>
<li class="history"><a>History</a></li>
</ul>
</nav>
<nav class="sidebar artists">
Sidebar Artists content
</nav>
<nav class="sidebar about">
Sidebar About content
</nav>
<nav class="sidebar history">
Sidebar History content
</nav>
You can use this to optimize it:
$(function() {
$( ".sidebar" ).click(function() {
$(this).toggleClass( "active" );
$(".active").toggleClass( "active" );
});
});
As per markup code I would suggest you to add an ID to the main ul as main-nav:
$(function() {
$( "#main-nav li" ).click(function() {
var cls = this.className;
$(this).addClass( "active" )
.siblings("li").removeClass( "active" );
$(".sidebar."+cls).slideToggle()
.siblings(".sidebar").slideUp();
});
});
$('.artists, .about, .history').click(function() {
var subClass = '';
if($(this).hasClass('artists')) {
subClass = 'artists';
} else if($(this).hasClass('about')) {
subClass = 'about';
} else if($(this).hasClass('history')) {
subClass = 'history';
}
$('.sidebar:not(.'+subClass+')').removeClass('active');
$('.sidebar.'+subClass).toggleClass('active');
});
https://jsfiddle.net/aua0wxm9/3/
As you have given the markup, I have changed my code.
Try this:
I have checked this code and it works properly
JS
$(document).ready(function(){
$('ul li').on('click',function(){
$('.sidebar').hide();
$(this).parent().parent().siblings("." +$(this).attr('class')).show();
});
});
Alternatively using active class
$('ul li').on('click',function(){
$('.sidebar').removeClass('active');
$(this).parent().parent().siblings("." +$(this).attr('class')).addClass('active');
});
Here's the fiddle example:
http://jsfiddle.net/5angwsnb/3/
Hope it works well for you too!
Update:
CSS:
.sidebar{
display:none;
}
.active{
//your transition here
}

Put transition to hover in jquery

I have this script in jquery which makes a hover image (in the hover replaces the images) .
The specific question is how do I place a transition ?
$( "figure.salud img" ).hover(
function() {
$( this ).attr("src","img/salud5.jpg");
},function() {
$( this ).attr("src","img/salud5-gris.jpg");
}
);
Are you looking for something as this ,do let me know if something else was expected!
$( ".salud img" ).hover(
function() {
$( this ).fadeOut(0).attr("src","https://pmcdeadline2.files.wordpress.com/2014/06/yahoo-logo.jpg").fadeIn(500);
},function() {
$( this ).fadeOut(0).attr("src","http://velocityagency.com/wp-content/uploads/2013/08/go.jpg").fadeIn(500);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="salud">
<img src="http://velocityagency.com/wp-content/uploads/2013/08/go.jpg" width="160" height="160"/>
</div>
JS FIDDLE: https://jsfiddle.net/nhwuh7pb/9/

Categories