We Keep Coding

Change adjust the height in bxSlider

I'm trying to change the bxslider height adjustment for percentage rather than pixel, but I'm a bit lost about it.
I found in the code line that makes this adjustment:
slider.viewport.css('height', getViewportHeight());
and here, set the viewport height
slider.viewport.height(getViewportHeight());
accurate results in css percentage because used responsive layout
thanks.

When I was encountering problems with bxSlider's height being cutoff at loading, I wrote a quick patch that basically removes the height property and attribute of .bx-viewport which allowed my CSS rule to override the height to whatever I wanted. That script is the last block. I commented it out because you may not need it.
I didn't know if you wanted a carousel of multiple slides or whether you wanted it to slide horizontally or vertically since the demo wasn't functioning. So I made it a 1 slide vertical carousel.
I enabled adaptiveHeight to show you it's dynamic capabilities with height, by default bxSlider just stays at the size of the tallest slide.
All of these features are options and as they are options that makes them optional...optionally.
There's 2 styles included but disabled. The first one is used if you want to use that height fix script. The second rule id to move the control arrows to the top. If you like the slider in vertical mode then you'll most likely want have your arrow controls at the top. If set at the default position in the middle, it'll jump every time there's a change in height.
Fiddle
Snippet
$(document).ready(function() {
var bx = $('.bxslider').bxSlider({
mode: 'vertical',
adaptiveHeight: true,
adaptiveHeightSpeed: 750,
slideWidth: 400,
minSlides: 1,
maxSlides: 1,
moveSlides: 1
});
});
/*
document.documentElement.addEventListener('DOMContentLoaded', function(event) {
event.stopPropagation();
var tgt = document.querySelector('.bx-viewport');
//tgt.removeProperty('height');
//tgt.removeAttribute('height');
//tgt.setAttribute('height', '100%');
}, false);
*/
img {
display: block;
margin: 0 auto
}
/*
.bx-viewport {
height:90vh !important;
}
*/
/*
.bx-controls a {
top:.05% !important;
}
*/
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div>
<iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video1"></iframe>
</div>
<div>
<img src="http://placehold.it/350x666?text=350x666.png" id="image2">
</div>
<div>
<iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video3"></iframe>
</div>
<div>
<img src="http://placehold.it/350x350?text=350x350.png" id="image4">
</div>
</div>

Lightgallery - Showing local comment box html instead of fb comment box

I would like to display my custom comment box html instead of facebook's comment box in my CakePHP site's Lightgallery implementation. How can I do that? Will it need plugin customization?
And, facebook comment box implementation is not responsive while I would need it to be responsive as well.

I had a similar situation where I needed to display the Photo captions and My own data as well. I created my own sidebar and overlaid it on top of the gallery but I was running into lots of height issues. So I utilised the Gallery layout by inserting my sidebar into the gallery.
Here's what I did, I created my sidebar and added it in the body, and hid it, then when the Gallery opens I cloned it and inserted it into the gallery. When the gallery closes I destroy it, and call it again when the gallery opens again.
I also hide the captions by default and write them to the sidebar after each slide transition.
Have a look at the lightGallery API Events, without them this would not be possible.
HTML
// My own sidebar element, I added this just before the closing Body tag, it is hidden via CSS
<div class="gallery-info-box">
<div class="slide-caption-wrap">
// Photo captions will be populated here
</div>
// include advert
// include comments
</div>
CSS
// Push Gallery objects 420px to the right so the controls wont be covered by the sidebar
.lg-admin-wrap,
.lg-outer .lg-video-cont,
.lg-outer .lg-thumb-outer,
.lg-thumb-open .lg-toogle-thumb,
.lg-outer .lg-toogle-thumb,
.lg-toolbar.group
#media (min-width: 768px)
padding-right: 420px
.lg-actions .lg-next
#media (min-width: 768px)
margin-right: 420px
// Position and style gallery sidebar
.gallery-info-box
display: none
.lg
.gallery-info-box
display: block
position: absolute
z-index: 1080
top: 0
right: 0
width: 400px
height: 100%
padding: 20px
background-color: white
#media (max-width: 767px)
display: none
.slide-caption-wrap
h4
margin-top: 0
font-size: 24px
JS
var $lg = $('#light-gallery');
// Perform any action just before opening the gallery
$lg.on('onAfterOpen.lg',function(event){
// Hide the original comments
$('.lg-sub-html').hide();
// Insert sidebar into the gallery
$('.gallery-info-box').clone().appendTo('.lg').show();
});
// Perform any action after the slide has been loaded
$lg.on('onAfterAppendSubHtml.lg',function(event){
var lgSubContent = $('.lg-sub-html').html();
// Populate the sidebar with the captions
$('.lg .slide-caption-wrap').html(lgSubContent);
});
// Perform any action just after closing the gallery
$lg.on('onCloseAfter.lg',function(event){
// Remove the gallery sidebar
$('.lg .gallery-info-box').remove();
});

At the end, we decided to use light gallery only in case of desktop and have normal responsive page link in case of smaller screens. It went something like this :
HTML
<a href="/projectitems/view/[ID]" class="light-thumb" data-image="/upload/projectitems/[ID]/image.jpeg">
<img src="/upload/projectitems/[ID]/image.jpeg" alt="">
</a>
...
JS
if ($(window).width() > 991) {
// Code to load lightgallery files by $.getScript() and append to <head>
$( "a.light-thumb" ).each(function( index ) {
var currentHref = $(this).attr('href').replace('/view/', '/viewNew/'); // Link change to load only comment box
$(this).attr('data-sub-html', '<div class="fb-comments" id="comments-' + index + '" data-href="' + currentHref + '"></div>');
$(this).attr('href', $(this).attr('data-image'));
});
$(".row-fluid.slider").lightGallery({
selector: '.light-thumb',
appendSubHtmlTo: '.lg-item',
addClass: 'fb-comments',
mode: 'lg-fade',
download: false
});
$(".row-fluid.slider").on('onAfterSlide.lg', function(event, prevIndex, index) {
var commentBox = $('#comments-' + index);
var dataUrl = commentBox.attr('data-href');
$.ajax({
url : '<?= $this->base ?>' + dataUrl,
type : 'GET',
success : function(response){
commentBox.html(response);
commentBox.css('background-image', 'none');
$("body").css("overflow", "hidden");
}
});
});
$(".row-fluid.slider").on('onCloseAfter.lg', function(event) {
$("body").css("overflow", "auto");
});
}

CLose Button doesn't appear on magnific-popup

This should be simple .... However....
I've tried almost everything to get the Close (X) Button to appear on the magnific popup. But it doesn't happen. There's no escape from the popup page except for the Back option. Here's what I've got:
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
and
<div class="popup-modal">
<img src="img/paintings/acrylic-trulkhor-1.png">
</div>
<div id="test-modal" class="mfp-hide white-popup">
<p><button class="closePopup">Close</button></p>
</div>
<script type="text/javascript">
$('.popup-modal').magnificPopup({
type: 'inline',
modal: false,
});
$(document).on('click', '.closePopup', function (e)
{
e.preventDefault();
$.magnificPopup.close();
});
</script>
</div>
Any ideas?
Thanks.

Here is a working example: https://jsfiddle.net/0rd5dc3v/2/
There are a few things I changed:
// Change the html link to the popup id, not the image url
<div class="popup-modal">
<a class="popup-modal-link" href="#test-modal"><img src="img/paintings/acrylic-trulkhor-1.png"></a>
</div>
// Call magnificPopup on the <a> element, not the outer div
$('.popup-modal-link').magnificPopup({
type: 'inline',
// Hide the builtin close button so we can use a custom close button
showCloseBtn: false
});

The button is white in color by default. To make it visible set its CSS property to black or any color that is visible on a white background.
.mfp-close {
color : black;
}

A simple workaround is to include the closeMarkup property in the object you init Magnific Popup with, and adding in a custom class to that markup.
Then, add that named custom class from your markup to your CSS with display set to something other than 'none', and marked !important.
Within the Magnific Popus JS:
closeMarkup:"<button title='%title%' type='button' class='mfp-close myDisplayOverride'>×</button>"
CSS:
.myDisplayOverride{
display:block !important
}

5 years late to the party!
I had the same issue as you did: when inline was set to true, the close button was not there.
You need to add the closeBtnInside: true configuration option in order to make the button visible.
So in your case:
$('.popup-modal').magnificPopup({
type: 'inline',
modal: false,
closeBtnInside: true
});
Just keep in mind that if you have custom markup for you close button, you need to add a tiny bit of CSS magic to make it work on click.
My custom button markup looks like this:
closeMarkup: '<button type="button" class="mfp-close"><i class="far fa-times"></i></button>'
And when you click on the <i class="far"> element, nothing happens.
So you need to add
.mfp-close i {
pointer-events: none;
}
because magnificPopup has the click handler bound to the button element but not its children...

Trying to fade and slide text out of initials on mouse over with jQuery

I'm trying to create an effect with jQuery where on mouse over of my initials on the page in the header, the div they are in expands (using jQuery animate) and the text of my full name fades in from each initial.
I have tried a variety of things but am not sure what is the best way to do this. I'm a bit stuck. I'm currently trying to get it going by having the initials of my name "OW" in two separate divs and then the remainder of my name to make up "wen" and "illiams" in between those initals. Like so:
<div class="initialF inlinediv">O</div>
<div class="fullF inlinediv">wen</div>
<div class="initialL inlinediv">W</div>
<div class="fullL inlinediv">illiams</div>
I thought it would work to use jQuery slideLeft and .fadeIn to get the text to slide in from the left as well as fading to look like the text is emerging from the initials but the animations was jumpy and would go onto a second line while the div was still expanding. I am using the below jQuery to detect the mouseIn/Out events:
<script>
$(".brand").mouseenter(function() {
$('.brand').animate({width: '160px'});
$('.fullF').fadeIn("slow");
});
$(".brand").mouseout(function() {
$('.brand').animate({width: '36px'});
$('.fullF').fadeOut("slow");
});
</script>
The alternatives I have tried were using jquery.lettering.js to help with it but there seemed to be some issues with that. Any suggestions to push me in the right direction would be useful and my site with a partially working example is here:
http://192.241.203.146/

Here's one using css transitions rather than jquery animate: http://jsfiddle.net/S58Se/2/
<div class='branding'>
<span class='initial'>O</span><span class='hidden nameFull wen'>wen</span>
<span class='initial'>W</span><span class='hidden nameFull illiams'>illiams</span>
</div>
span {
display: inline-block;
overflow: hidden;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
}
.wen { width: 36px; }
.illiams { width: 160px; }
span.hidden {
width: 0px;
opacity: 0;
}
$('.branding').hover(
function() { $('.nameFull').removeClass('hidden'); },
function() { $('.nameFull').addClass('hidden'); }
);
Or you can do away with the javascript altogether with this: http://jsfiddle.net/S58Se/3/
remove the js and add these css statements:
.branding:hover .wen {
width: 36px;
opacity: 1;
}
.branding:hover .illiams {
width: 160px;
opacity: 1;
}
... just because I think it's neat.

A good way to go about this is to just expand the use of your call to the animation method by adding another property to the object you are passing in. So instead of calling an extra method (fadeIn) you just handle it all in one fell swoop:
$('.brand').on({
'mouseenter' : function () {
$('.nameFull').stop().animate({
'width' : '200px',
'opacity' : '1'
}, 500);
},
'mouseleave' : function () {
$('.nameFull').stop().animate({
'width' : '0',
'opacity' : '0'
}, 500);
}
});
You'll notice I'm also using 'on' instead of the 'hover' or 'mouseenter' and 'mouseleave' methods. In most recent versions of jQuery those methods just reference 'on', so it's better to just cut out the middle man and do it all in one place.
I'm not sure if this exactly fits your design, but I made a Codepen to demonstrate the code in action: http://codepen.io/Tristan-zimmerman/pen/lnDGh

Style the hidden divs position:absolute, and when show them:
'show' them first, to set them visible
then position them (next to your 'launching' div), using jQuery.position();
set the animation going.
Essentially you want them 'absolute' to avoid them thunking in/out & changing your existing flow. position() must be called after making the element visible, and then you should have appropriate starting conditions to kick off your animation.
Or you could try using <span>' for the incoming text and/or displaying as inline-block, which may help avoid the "incoming" kicking things down a line. HTH.

I think what you are looking for is something like this: JSFiddle
html:
<div class="brand">
<div>O<span class="full">wen </span>W<span class="full">illiams</span></div>
</div>
jq:
$('.brand').hover(function(){
$(this).stop().animate({width: '160px'},'slow',function(){
$(this).children('div').children('.full').stop().fadeIn('slow');
});
},function(){
$(this).children('div').children('.full').stop().fadeOut('slow',function(){
$(this).parent().parent().stop().animate({width: '36px'},'slow');
});
});
css:
.full{
display: none;
}
note: there is a simple bug that happens in a specific case and I'm working on it.
regards,

Background Image Carousel

I'm trying to create a simple website that only consists of background images inside a carousel that will move from left to right, with directional arrows. I have found one resources that provides a simple example however when I tried to reproduce their model, the script doesn't seem to define itself. Also, there is the second issue with actually making it full-screen since the demo is only 700x500.
Here is a link to the resource: Dynamic Drive.
Also, here is my HTML
<!DOCTYPE html>
<head>
<title>Hit Heavy</title>
<link rel="shortcut icon" href="favicon.ico" type="image/ico" />
<style type="text/css">
div.bgcarousel { /* CSS for main carousel container */
background: black center center no-repeat;
width: 100%;
}
img.navbutton { /* CSS for the nav buttons */
margin: 5px;
opacity: 0.7;
}
div.slide{ /* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}
</style>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/bgcarousel.js" script type="text/javascript"></script>
<script type="text/javascript">
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['bg.jpg'], //["image_path", "optional description"]
['bg.jpg'],
['bg.jpg'],
['bg.jpg'] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.png', 'right.png'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
</script>
</head>
<body>
<div id="mybgcarousel" class="bgcarousel"></div>
</body>
</html>
As for the javascript that backs the scripting within the html, you can view it here

The problem is in the following line you have set the width to 100%
div.bgcarousel{ /* CSS for main carousel container */
background: black ;
width:700px; /* default dimensions of carousel */
height:500px;
}

#user2122160 Height is Important change the css like this
div.bgcarousel { /* CSS for main carousel container */
background: black center center no-repeat;
width: 100%;
height:100%;
}
i created Slider based Your Code its Working Well without Error Link below:
http://www.fileconvoy.com/dfl.php?id=g7d74fb2c3b904c6a99923428881a8f81443981afd

I think you need to add a $(document).ready() handler around that code, I think it's running BEFORE jquery and bgcarousel gets loaded, change the script to
<script type="text/javascript">
$(document).ready(function(){
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['bg.jpg'], //["image_path", "optional description"]
['bg.jpg'],
['bg.jpg'],
['bg.jpg'] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.png', 'right.png'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
})
</script>
the $(document).ready part makes your code wait for the document to be loaded before executing your script