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

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");
});
}

Related

Play animation when content get into view

I've been searching on many posts but almost all of them are confusing.
I'm working with animate.css into a which is at the middle of my page.
For default the animation is played when the page is loaded, but i want that it play when i reach the (when i'm scrolling).
Please, don't say about JS Reveal, i'd like to use the animation from animate.css
What i was trying:
HTML
<!-- Others div above -->
<div class="row sf-medida" id="sf-medida" onscroll="Animar();">
<!-- Others div below -->
JS
function Animar() {
setTimeout(function(){
document.getElementById("sf-medida").style.visibility = "visible";
$("#titulo-general").addClass("animated fadeInLeft");
$(".sub-titulo").addClass("animated bounceInRight");
$(".titulo-izquierda").addClass("animated swing");
$(".texto-1").addClass("animated fadeIn");
$(".texto-2").addClass("animated fadeIn");
},1000)
}
But it doesn't work, however, i've tried adding
window.addEventListener("scroll", Animar);
But what it does is that the animation is played whenever i scroll on the page,
This can be very easily done using little jquery. All you need to do is listen to the scroll event, then check if user have scrolled to the target element. If the user did, then add animation class from your animate.css. Adjust your if condition according to your desires. Check the below code and fiddle https://jsfiddle.net/15z6x5ko/ for reference
$(document).ready(function(){
$(document).scroll(function(evt){
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
var v1 = $(this).scrollTop();
if( v1 > v2 ){
console.log('in');
$('.box').addClass('animated flip')
}
});
});
So as per your request, let me try to explain the code line by line
$(document).ready(function(){
This is easy to understand. It just waits for browser to load all HTML & CSS first and when everything is loaded, the javascript code inside this function will run.
$(document).scroll(function(evt){
This is an event handler, our callback function will run whenever user scrolls on document. Remember change $(document) according whatever the parent is of your target element. So if your target div is inside another div whose class is .parent then use $('.parent').scroll . As for my code I am listening the event on document. When my document scrolls, my event will trigger.
var v1 = $(this).scrollTop();
This code will get the amount of scrolling user had done in pixels.
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
This is a simple math that checks the position of my target div from its parent element subtracting the half of the size of window from it. This will return the pixel positing of your target div. So when user reaches this pixel positing while scrolling, your animation will start.
$('.box').addClass('animated flip')
Now this code simply adds the animation css classes into the target div as soon as user scrolls to the target div.
I'm using "WoW.js" for my scroll reveal library. It's pretty easy to use, like for real. One line of code
<div class="wow fadeIn">content</div>
Here, take a look: http://mynameismatthieu.com/WOW/docs.html
Here's an example using Jquery.
In it we use .scrollTop and .height to measure the videos container from the top of the page so that we know when it comes into view when scrolling. (it's actually set to load when it reaches 100px below the bottom of the viewable area, a sort of preload. you can adjust it to whatever you like.)
The video load is done by copying the url from data-src= into src= when the video container is at the desired spot on the page. (in this case, 100px below the viewable area)
fiddle
note, the video won't load on stack so be sure to view the fiddle
https://jsfiddle.net/Hastig/xszu6b1p/
I scraped it together from these two answers..
Youtube Autoplay
Ladyload Images
$(window).scroll(function() {
$.each($('iframe'), function() {
if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
var source = $(this).data('src');
$(this).attr('src', source);
$(this).removeAttr('data-src');
}
})
})
body {
margin: 0;
}
.filler {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}
.filler-top { background-color: blue }
.filler-btm { background-color: green; }
.video-container {
/* css tricks - responsive iframe video */
/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
display: flex;
justify-content: center;
background-color: red;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filler filler-top">filler top</div>
<div class="video-container">
<iframe data-src="https://www.youtube.com/embed/f0JDs4FY8cQ?rel=0&autoplay=1"></iframe>
</div>
<div class="filler filler-btm">filler bottom</div>

Media Query conflicts with $(window).resize()

I've got a left nav div that hides via media query at < 768 and a filter button that displays at < 768. When you click the filter button it uses JQuery to toggle the display of the left nav via show()/hide(). When the window is resized >= 768 I use JQuery to set the display of the left nav back to show.
As I said, my media query handles hiding the left nav when the window width goes below 768, but the problem is it only fires if I have not clicked the filter button. Once I size it under 768 and then click the filter button to turn it on and then click it again to turn it off and then size up over 768 and then back down the left nav is still there. It's like the media query no longer works for the display:none attribute. There are other css properties I change in the media query like width and color and those still work, but it's no longer hiding the div.
I've simplified the code to illustrates the problem.
HTML
Button
<div id="navLeft">NavLeft</div>
CSS
#navLeft {
background-color:orange;
}
#filterButton {
background-color:silver;
display: none;
}
#media only screen and (max-width: 300px) {
#navLeft {
display: none;
}
#filterButton {
display: inline;
}
}
JS
$(window).resize(function()
{
var $theWindowSize = $(this).width();
if($theWindowSize > 300)
{
$('#navLeft').show();
}
});
// Filters
$('#filterButton').bind('click',function(event)
{
event.preventDefault();
if ($('#filterButton').hasClass('filtersActive'))
{
$('#navLeft').hide();
$('#filterButton').removeClass('filtersActive');
}
else
{
$('#navLeft').show();
$('#filterButton').addClass('filtersActive');
}
});
Here's the fiddle. To replicate the behavior follow the steps below.
https://jsfiddle.net/athcy8fL/
1) Resize the width of the Result viewport several times under and above 300px before clicking anything and you'll see everything works as planned. Under 300px the button comes on and the NavLeft div hides. Over 300px and the Button hides and the NavLeft shows
2) Size the Result viewport below 300px and click the Button link. The NavLeft div should appear. Good.
3) Size the Result viewport above 300px and the Button hides. Good.
4) Size the Result viewport below 300px, the NavLeft should hide but it does not. Not Good.
Why doesn't the media query work after using Javascript to alter its display property?
The problem is that when you call .show() in an element that is not already visible, jquery will add an inline style to show the element and override your css, causing the media-query not to work.
I modified your code a little bit to take the inline-style priority into account
http://jsfiddle.net/yjs3fou7/
basically I changed the resize function:
$(window).resize(function()
{
var $theWindowSize = $(this).width();
if($theWindowSize > 300)
{
$('#navLeft').show();
$('#filterButton').removeClass('filtersActive')
} else {
if (!$('#filterButton').hasClass('filtersActive'))
$('#navLeft').hide();
}
});
inline styles have more priority than id or class styles according to css specificity rules so once you start manipulating things from javascript you must remember it may cause your css to stop being applied
The problem is the use of inline styles which has more specificity than the css rules.
$(window).resize(function() {
var $theWindowSize = $(this).width();
if ($theWindowSize > 300) {
$('#navLeft').removeClass('show');
$('#filterButton').removeClass('filtersActive');
}
});
// Filters
$('#filterButton').bind('click', function(event) {
event.preventDefault();
$('#filterButton').toggleClass('filtersActive');
$('#navLeft').toggleClass('show', $('#filterButton').hasClass('filtersActive'));
});
#navLeft {
background-color: orange;
}
#filterButton {
background-color: silver;
display: none;
}
#media only screen and (max-width: 300px) {
#navLeft {
display: none;
}
#filterButton {
display: inline;
}
#navLeft.show {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Button
<div id="navLeft">NavLeft</div>
Demo: Fiddle

Button auto size in Jquery Mobile

I am developing a jquery/PhoneGap application. I have been trying hard to get the buttons behave the way I want to. In short I am trying to achieve the following:
I put a set of six Jquery-Mobile buttons (mini, normal or button-group).
The above set needs to be in one horizontal line so I have put them in a div.
The numbers of buttons and its text dynamically changes, so I need a CSS/JS trick that allows me to resize the button size and text based on the div/screen size. When I started with Jquery mobile (two weeks ago), I thought that this will be a basic functionality :) but alas !
Some code that I am trying right now is:
//TO CREATE BUTTONS
for(var button_id=0; button_id < window.g_maxLength/2; button_id++){
var bt_id= "<button class =\"tile\" data-theme=\"e\" data-inline=\"true\" data-mini=\"true\" id =\"button_tid"+button_id+"\";>.</button>";
$("#buttoncontainer1").append($(bt_id));
}
//HTML
<div id="tiled" align="center">
<div data-role="controlgroup" data-type="horizontal" id="buttoncontainer1">
<!-- Button will be added by JS-->
</div>
</div>
//CSS
#tiled {
align:center;
height:23%;
position:absolute;
text-align :center;
padding: 1px;
width:90%;
top:73%;
margin-right:4%;
margin-left:4%;
background-color:#b0e0e6;
border-radius: 10px;
border-width: 3%;
border-style:double;
Right now what I have is works fine on small screen devices, but as soon as I open my app in large screen device the buttons look very small with lot of empty spaces. Any help here will be appreciated !!
PS: Also used media queries - but they somehow do not work on jquery-mobile.
#media (min-width: 500px) {
html { font-size: 120%; }
}
Here's a workaround for auto-adjust width and font-size of buttons.
Demo: http://jsfiddle.net/Palestinian/UYa4Y/
// Number of buttons
var buttons = $('[data- role=controlgroup]').find('a').length;
// Parent div width
var btn_width = $('#tiled').width() / buttons;
// Remove left/right button padding
$('.ui-btn-inner').css({
'padding-left': 1,
'padding-right': 1
});
// Set button new width
$('.ui-btn-inner').width(btn_width - 4);
// Adjust font-size for each button based on text
$('.ui-btn-text').each(function () {
while ($(this).width() > $('.ui-btn-inner').width()) {
var font = parseFloat($(this).css('font-size')) - 1 + "px";
$(this).css('font-size', font);
}
});

Custom styles for multiple instances of Fancybox

I am using Fancybox 2.0.6 to display both images and video. When rolling over the image/video (when there are multiple images in a gallery), Fancybox displays the previous and next icons and links. The clickable area takes up 40% of the left and right side of the image/video, as it should according to jquery.fancybox.css. This is great for images, however for video, it blocks the play button so that the user goes to the next/prev video rather than being able to play or pause the video. I would like to change the width of the clickable area, but only for videos - I would like it to stay the same for images. I have researched Fancybox to find that I can use wrapCSS to create custom styles for multiple instances of Fancybox, but I cannot get it to work.
Here are my js calls
<script type="text/javascript">
$(document).ready(function() {
$(".vimeo").fancybox({
width: 781,
height: 440,
type: 'iframe',
fitToView : false,
wrapCSS : 'fancybox-nav-video'
});
});
</script>
<script>
$(document).ready(function()
{
$('.fancybox').fancybox(
{
padding : 0,
openEffect : 'elastic'
}
);
$(".fancybox").fancybox(
{
wrapCSS : 'fancybox-nav',
closeClick : true,
helpers : {
overlay : {
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
}
);
}
);
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
</script>
And here is how I have images and video displayed within my HTML:
<a class="fancybox" rel="gallery1" href="image1.jpg">
<a class="fancybox" rel="gallery1" href="image2.jpg">
<a class="vimeo" rel="gallery2" href="videoplayerlink1">
<a class="vimeo" rel="gallery2" href="videoplayerlink2">
Do I need to add something or change anything within the .js file? What am I missing?
First you need to understand that when you use the wrapCSS option, a new class selector will be added to the fancybox wrap (.fancybox-wrap) so adding the option wrapCSS:'fancybox-nav-video' means that when you open fancybox you will get
<div class="fancybox-wrap fancybox-nav-video ....etc." ....
Second, you need to declare your specific fancybox buttons CSS properties for such new selector (an inline CSS declaration after you loaded the fancybox css file):
.fancybox-nav-video .fancybox-nav {
width: 60px;
}
.fancybox-nav-video .fancybox-nav span {
visibility: visible; /* arrows will be permanently visible */
}
.fancybox-nav-video .fancybox-next {
right: -60px; /* move right outside fancybox area */
}
.fancybox-nav-video .fancybox-prev {
left: -60px; /* move left outside fancybox area */
}
Notice that these new css properties will be applied only to the fancybox wrap with class fancybox-nav-video (where we used the wrapCSS option). These css will place the buttons as well as the clickable area outside the fancybox, clearing out the vimeos's play button. Because that, we made the navigation arrows permanently visible, otherwise the visitor won't know where to hover.
Third, you just need to wrap all your fancybox custom scripts within a single .ready() method like:
<script type="text/javascript">
$(document).ready(function() {
// fancybox for vimeo
$(".vimeo").fancybox({
width: 781,
height: 440,
type: 'iframe',
fitToView : false,
wrapCSS : 'fancybox-nav-video' // add a class selector to the fancybox wrap
});
// fancybox for images
$(".fancybox").fancybox({
// options for images here
});
}); // ready
</script>

FancyBox steals content and doesn't put it back?

I have fancybox triggered on a link that loads content from a hidden div.
If I close the fancybox and click the link again, it loads up blank the second time around
Here's my code:
$.fancybox({
content: $target
});
Any ideas?
I've had a lot of bother with other people's light boxes, issues similar to yours, and other issues with not displaying content and such.
This quick bit of code creates the same as the fancybox plugin (essentially), this is what I use all the time, and its cross browser compatible and easy to debug and change when your content doesn't fit or comes out screwy or anything.
<script type="text/javascript">
jQuery(document).ready(function($){
$('a.clickme').click(function(){
// this creates an overlay
var theOverlay = $('<table class="overlayTable"><tr><td style="vertical-align:middle;text-align:center;padding:0"></td></tr></table>')
.click(function(){ $(document).unbind('keyup'); $(this).remove(); });
// this creates the white "inner" box
$('<div></div>')
.attr('id','insideContent')
.css({
'display':'inline-block',
'background':'#fff',
'padding':'20px'
})
.append('<p>Some content here... you can load anything you want - or copy it from another div if you want...</p>')
.appendTo($('body'))
.wrap(theOverlay)
.click(function(e){ e.stopPropagation(); });
$(document).bind('keyup', function(e){
// this binds the esc key to close the overlay
if(e.keyCode==27) { $(document).unbind('keyup'); $('table.overlayTable').remove(); }
});
});
});
</script>
<style>
.overlayTable {
background: url("url/to/transparent/png/for/overlay/background.png") repeat scroll 0 0 transparent;
border-collapse: collapse;
border-spacing: 0;
height: 100%; width: 100%; z-index: 999;
left: 0; position: fixed; top: 0;
}
</style>
Feel free to make it into a plugin or similar. As you're just filling a div with content you can put any HTML or anything in there you want.
You can also add your own touches, such as the close button (all it needs to do is call $('table.overlayTable').remove();).

Categories