We Keep Coding

How to set the height of both the columns to the highest of them with jQuery?

A sheetdb plugin pulls data from a shared googlesheet to display them on a WordPress site. The page displays nothing else but this dynamic contents from the googlesheet. It is a simple page. Below is custom field content from WordPress page editor. This is what prints data on the page via template(Code added at the end of this post)
[sheetdb url="https://sheetdb.io/api/v1/ymk583vab4dwh" search="Approval=1&Display=1"]
<div class="story-entry">
<div class="content"> {{Story}} </div>
<div class="contestent-name">-{{First Name}} {{Initial}}</div>
</div>
[/sheetdb]
CSS for the div displaying columns on the page.
.story-entry {
margin: 15px 10px;
border: solid 1px black;
padding: 10px 20px;
width: calc(50% - 22px);
float: left;
}
<?php $story = get_field('story'); ?>
<div class="contest-story">
<div class="wrap-x">
<div class="inside">
<div class="row">
<div class="contest-story-text col col-xs-12"><?php echo do_shortcode($story); ?></div>
</div>
</div>
</div>
</div>
The problem with the columns is them having the same height resulting in unnecessary wastage of the extra space. I got the logic to dynamically find out the max height of the two columns and set both them to the max height.
With the following jQuery code I am trying to use to set the height to both the columns.
$(document).ready(function() {
var maxHeight = 0;
var entryNumber = 1;
var prevEntrySelector = null;
$(".story-entry").each(function(){
alert('Hello');
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
if ((entryNumber % 2) == 0) {
// Even entry.
// Set height of previous entry and this entry to maxHeight.
$(this).height(maxHeight);
prevEntrySelector.height(maxHeight);
// this - this selector - this story entry
maxHeight = 0;
}
prevEntrySelector = $(this);
entryNumber ++;
});
$(".entry-selector").height(maxHeight);
});
This code doesn't work on this page. Below is the reference page.
https://knackshops.com/pages/spread-joy-message
What I did so far is as seen below with unnecessary space after the content
This is the page that I want to make look like this with jQuery.
The full template code for this page:
<?php
$hero = get_field('hero');
$hero_h1 = $hero['hero_-_h1'];
$hero_h2 = $hero['hero_-_h2'];
$background = $hero['hero_-_background_options'];
$image = $background['background_-_image'];
$link_text = get_field('link_text');
$link_to_contest = get_field('link_to_contest');
$story = get_field('story');
?>
<?php get_header(); ?>
<div class="default-flex-hero relative">
<div class="inside">
<div class="row mb0 pt pb">
<?php if($image): ?>
<div class="col col-xs-12 col-md-2 col-lg-2 mb0">
<picture>
<source media="(max-width: 480px)" srcset="<?php echo($image['sizes']['small']); ?>">
<source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
<source media="(max-width: 1280px)" srcset="<?php echo($image['sizes']['large']); ?>">
<source srcset="<?php echo($image['sizes']['xlarge']); ?>">
<img src="<?php echo($image['sizes']['xlarge']); ?>" alt="<?php echo $image['alt']; ?>" />
</picture>
</div>
<?php endif; ?>
<div class="hero-col col col-xs-12 col-md-10 col-lg-10 mb0">
<h1 class="mb0 color-tan-dark">
<?php if( $hero_h1 ): echo $hero_h1; endif; ?>
</h1>
<?php if( $hero_h2 ): ?>
<h2 class="mb0 mt2 alt-heading h4">
<?php echo $hero_h2; ?>
</h2>
<?php endif; ?>
</div>
</div>
</div>
</div>
<div class="contest-link">
<div class="wrap-x">
<div class="inside">
<div class="row">
<div class="contest-link-text col col-xs-12">
SHARE YOUR OWN STORY HERE
</div>
</div>
</div>
</div>
</div>
**<div class="contest-story">
<div class="wrap-x">
<div class="inside">
<div class="row">
<div class="contest-story-text col col-xs-12"><?php echo do_shortcode($story); ?></div>
</div>
</div>
</div>
</div>**
<?php get_footer(); ?>

You can do with css
just add these line
.contest-story-text > div{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.story-entry {
height: auto !important;
}
#media only screen and (max-width: 600px) {
.story-entry {
width: calc(100% - 22px) !important
}
}

I finally accomplished it with jQuery and an eventhandler for the plugin sheetdb.
window.addEventListener("sheetdb-downloaded", function() {
var maxHeight = 0;
var entryNumber = 1;
var prevEntrySelector = null;
$(".story-entry").each(function(index) {
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
if ((entryNumber % 2) == 0) {
// Even entry.
// Set height of previous entry and this entry to maxHeight.
$(this).height(maxHeight);
prevEntrySelector.height(maxHeight);
// this - this selector - this story entry
console.log( "Height: " + maxHeight );
maxHeight = 0;
}
prevEntrySelector = $(this);
entryNumber ++;
return true;
});
$(".entry-selector").height(maxHeight);
});

How to add a Lightbox inside wordpress loop and get_post()?

I am new to wordpress custom theme developing. Currently I am revamping a site into wordpress and there is a gallery page consist with a lightbox. In website, images were pre-selected and images were linked to code by src.
But when it comes to my wordpress revamp, I use wordpress loop for show-all dynamic pill and get_post() function for category dynamic pills.
All I need is to have an idea about to customize my wordpress loop and get_post() functions to add the lightbox which orginal website used. Here are my codes and original site codes
Original Site
gallery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SEO -->
<title>Gallery</title>
<meta name="description" content="Hello">
<meta name="keywords" content="Hello">
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Open Sans -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Lightbox -->
<link href="assets/css/lightbox.css" rel="stylesheet">
<!-- Pre Classes -->
<link href="assets/css/pre-classes.css" rel="stylesheet">
<!-- Styles -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Content -->
<section class="content pull-left width-wide clear-both">
<div class="wrap">
<!-- Inside Content -->
<div class="inside-content inside-page pull-left width-wide clear-both">
<!-- Gallery -->
<div class="gallery pull-left width-wide">
<!-- Gallery Items -->
<div class="gallery-items pull-left width-wide">
<!-- Item -->
<a href="img1" data-imagelightbox="a" class="item col-md-4">
<img src="img1" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img2" data-imagelightbox="a" class="item col-md-4">
<img src="img2" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img3" data-imagelightbox="a" class="item col-md-4">
<img src="img3" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img4" data-imagelightbox="a" class="item col-md-4">
<img src="img4" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img5" data-imagelightbox="a" class="item col-md-4">
<img src="img5" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
<a href="img6" data-imagelightbox="a" class="item col-md-4">
<img src="img6.jpg" alt="Hello World" width="344" height="215">
</a><!-- // Item -->
<!-- Item -->
</div><!-- // Gallery Items -->
</div><!-- // Gallery -->
</div><!-- Inside Content -->
</div>
</section><!-- // Content -->
<!-- jScripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- <script src="assets/js/cycle.min.js"></script> -->
<script src="assets/js/imagelightbox.min.js"></script>
<!-- Custom jsPlugins -->
<!-- <script src="assets/js/plugins.jquery.js"></script> -->
<!-- Custom jScripts -->
<script src="assets/js/custom.jquery.js"></script>
</body>
</html>
imagelightbox.min.js
;(function(e,t,n,r){"use strict";var i=function(){var e=n.body||n.documentElement,e=e.style;if(e.WebkitTransition=="")return"-webkit-";if(e.MozTransition=="")return"-moz-";if(e.OTransition=="")return"-o-";if(e.transition=="")return"";return false},s=i()===false?false:true,o=function(e,t,n){var r={},s=i();r[s+"transform"]="translateX("+t+")";r[s+"transition"]=s+"transform "+n+"s linear";e.css(r)},u="ontouchstart"in t,a=t.navigator.pointerEnabled||t.navigator.msPointerEnabled,f=function(e){if(u)return true;if(!a||typeof e==="undefined"||typeof e.pointerType==="undefined")return false;if(typeof e.MSPOINTER_TYPE_MOUSE!=="undefined"){if(e.MSPOINTER_TYPE_MOUSE!=e.pointerType)return true}else if(e.pointerType!="mouse")return true;return false};e.fn.imageLightbox=function(r){var r=e.extend({selector:'id="imagelightbox"',allowedTypes:"png|jpg|jpeg|gif",animationSpeed:250,preloadNext:true,enableKeyboard:true,quitOnEnd:false,quitOnImgClick:false,quitOnDocClick:true,onStart:false,onEnd:false,onLoadStart:false,onLoadEnd:false},r),i=e([]),l=e(),c=e(),h=0,p=0,d=0,v=false,m=function(t){return e(t).prop("tagName").toLowerCase()=="a"&&(new RegExp(".("+r.allowedTypes+")$","i")).test(e(t).attr("href"))},g=function(){if(!c.length)return true;var n=e(t).width()*.8,r=e(t).height()*.9,i=new Image;i.src=c.attr("src");i.onload=function(){h=i.width;p=i.height;if(h>n||p>r){var s=h/p>n/r?h/n:p/r;h/=s;p/=s}c.css({width:h+"px",height:p+"px",top:(e(t).height()-p)/2+"px",left:(e(t).width()-h)/2+"px"})}},y=function(t){if(v)return false;t=typeof t==="undefined"?false:t=="left"?1:-1;if(c.length){if(t!==false&&(i.length<2||r.quitOnEnd===true&&(t===-1&&i.index(l)==0||t===1&&i.index(l)==i.length-1))){w();return false}var n={opacity:0};if(s)o(c,100*t-d+"px",r.animationSpeed/1e3);else n.left=parseInt(c.css("left"))+100*t+"px";c.animate(n,r.animationSpeed,function(){b()});d=0}v=true;if(r.onLoadStart!==false)r.onLoadStart();setTimeout(function(){c=e("<img "+r.selector+" />").attr("src",l.attr("href")).load(function(){c.appendTo("body");g();var n={opacity:1};c.css("opacity",0);if(s){o(c,-100*t+"px",0);setTimeout(function(){o(c,0+"px",r.animationSpeed/1e3)},50)}else{var u=parseInt(c.css("left"));n.left=u+"px";c.css("left",u-100*t+"px")}c.animate(n,r.animationSpeed,function(){v=false;if(r.onLoadEnd!==false)r.onLoadEnd()});if(r.preloadNext){var a=i.eq(i.index(l)+1);if(!a.length)a=i.eq(0);e("<img />").attr("src",a.attr("href")).load()}}).error(function(){if(r.onLoadEnd!==false)r.onLoadEnd()});var n=0,u=0,p=0;c.on(a?"pointerup MSPointerUp":"click",function(e){e.preventDefault();if(r.quitOnImgClick){w();return false}if(f(e.originalEvent))return true;var t=(e.pageX||e.originalEvent.pageX)-e.target.offsetLeft;l=i.eq(i.index(l)-(h/2>t?1:-1));if(!l.length)l=i.eq(h/2>t?i.length:0);y(h/2>t?"left":"right")}).on("touchstart pointerdown MSPointerDown",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;if(s)p=parseInt(c.css("left"));n=e.originalEvent.pageX||e.originalEvent.touches[0].pageX}).on("touchmove pointermove MSPointerMove",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;e.preventDefault();u=e.originalEvent.pageX||e.originalEvent.touches[0].pageX;d=n-u;if(s)o(c,-d+"px",0);else c.css("left",p-d+"px")}).on("touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;if(Math.abs(d)>50){l=i.eq(i.index(l)-(d<0?1:-1));if(!l.length)l=i.eq(d<0?i.length:0);y(d>0?"right":"left")}else{if(s)o(c,0+"px",r.animationSpeed/1e3);else c.animate({left:p+"px"},r.animationSpeed/2)}})},r.animationSpeed+100)},b=function(){if(!c.length)return false;c.remove();c=e()},w=function(){if(!c.length)return false;c.animate({opacity:0},r.animationSpeed,function(){b();v=false;if(r.onEnd!==false)r.onEnd()})};e(t).on("resize",g);if(r.quitOnDocClick){e(n).on(u?"touchend":"click",function(t){if(c.length&&!e(t.target).is(c))w()})}if(r.enableKeyboard){e(n).on("keyup",function(e){if(!c.length)return true;e.preventDefault();if(e.keyCode==27)w();if(e.keyCode==37||e.keyCode==39){l=i.eq(i.index(l)-(e.keyCode==37?1:-1));if(!l.length)l=i.eq(e.keyCode==37?i.length:0);y(e.keyCode==37?"left":"right")}})}e(n).on("click",this.selector,function(t){if(!m(this))return true;t.preventDefault();if(v)return false;v=false;if(r.onStart!==false)r.onStart();l=e(this);y()});this.each(function(){if(!m(this))return true;i=i.add(e(this))});this.switchImageLightbox=function(e){var t=i.eq(e);if(t.length){var n=i.index(l);l=t;y(e<n?"left":"right")}return this};this.quitImageLightbox=function(){w();return this};return this}})(jQuery,window,document);
$( function()
{
// ACTIVITY INDICATOR
var activityIndicatorOn = function()
{
$('.overlay-bg').remove();
$( '<div id="imagelightbox-loading"><div></div></div><div class="overlay-bg"></div>' ).appendTo( 'body' );
},
activityIndicatorOff = function()
{
$( '#imagelightbox-loading' ).remove();
},
// OVERLAY
overlayOn = function()
{
$( '<div id="imagelightbox-overlay"></div>' ).appendTo( 'body' );
},
overlayOff = function()
{
$( '#imagelightbox-overlay' ).remove();
},
// CLOSE BUTTON
closeButtonOn = function( instance )
{
$( '<button type="button" id="imagelightbox-close" title="Close"></button>' ).appendTo( 'body' ).on( 'click touchend', function(){ $( this ).remove(); instance.quitImageLightbox(); return false; });
},
closeButtonOff = function()
{
$( '#imagelightbox-close' ).remove();
},
// CAPTION
captionOn = function()
{
var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' ).attr( 'alt' );
if( description.length > 0 )
$( '<div id="imagelightbox-caption">' + description + '</div>' ).appendTo( 'body' );
},
captionOff = function()
{
$( '#imagelightbox-caption' ).remove();
},
// NAVIGATION
navigationOn = function( instance, selector )
{
var images = $( selector );
if( images.length )
{
var nav = $( '<div id="imagelightbox-nav"></div>' );
for( var i = 0; i < images.length; i++ )
nav.append( '<button type="button"></button>' );
nav.appendTo( 'body' );
nav.on( 'click touchend', function(){ return false; });
var navItems = nav.find( 'button' );
navItems.on( 'click touchend', function()
{
var $this = $( this );
if( images.eq( $this.index() ).attr( 'href' ) != $( '#imagelightbox' ).attr( 'src' ) )
instance.switchImageLightbox( $this.index() );
navItems.removeClass( 'active' );
navItems.eq( $this.index() ).addClass( 'active' );
return false;
})
.on( 'touchend', function(){ return false; });
}
},
navigationUpdate = function( selector )
{
var items = $( '#imagelightbox-nav button' );
items.removeClass( 'active' );
items.eq( $( selector ).filter( '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ).index( selector ) ).addClass( 'active' );
},
navigationOff = function()
{
$( '#imagelightbox-nav' ).remove();
},
// ARROWS
arrowsOn = function( instance, selector )
{
var $arrows = $( '<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button><button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>' );
$arrows.appendTo( 'body' );
$arrows.on( 'click touchend', function( e )
{
e.preventDefault();
var $this = $( this ),
$target = $( selector + '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ),
index = $target.index( selector );
if( $this.hasClass( 'imagelightbox-arrow-left' ) )
{
index = index - 1;
if( !$( selector ).eq( index ).length )
index = $( selector ).length;
}
else
{
index = index + 1;
if( !$( selector ).eq( index ).length )
index = 0;
}
instance.switchImageLightbox( index );
return false;
});
},
arrowsOff = function()
{
$( '.imagelightbox-arrow' ).remove();
};
// WITH ACTIVITY INDICATION
$( 'a[data-imagelightbox="a"]' ).imageLightbox(
{
onLoadStart: function() { activityIndicatorOn(); },
onLoadEnd: function() { activityIndicatorOff(); },
onEnd: function() { activityIndicatorOff();$('.overlay-bg').remove(); }
});
});
Wordpress - page-gallery.php
get_header(); ?>
<section class="content pull-left width-wide clear-both">
<div class="wrap">
<!-- Inside Content -->
<div class="inside-content inside-page pull-left width-wide clear-both">
<!-- page header -->
<div class="page-header pull-left width-wide">
<!-- Title -->
<h1>Gallery</h1><!-- Title -->
<!-- Breadcrumb -->
<ul class="_bread">
<li>Home</li>
<li>Gallery</li>
</ul>
<!-- Breadcrumb -->
</div><!-- // page header -->
<!-- Gallery -->
<div class="gallery pull-left width-wide">
<!-- Menu -->
<div class="cat-menu pull-right padding-right-20">
<!--Categories : -->
<!-- Show All
<a href="#Category1" title="Category 1 " >Category 1 </a>
<a href="#Category2" title="Category 2" >Category 2</a>
<a href="#Category3" title="Category 3" >Category 3</a> -->
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#showall">Show All</a></li>
<li><a data-toggle="pill" href="#Category1">Category 1</a></li>
<li><a data-toggle="pill" href="#Category2">Category 2</a></li>
<li><a data-toggle="pill" href="#Category3">Category 3</a></li>
</ul>
</div><!-- // Menu -->
<!-- Gallery Items -->
<div class="gallery-items pull-left width-wide">
<div class="tab-content">
<div id="showall" class="tab-pane fade in active">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php the_content(); ?>
<?php endwhile;
else:
echo "Content not found";
endif;
wp_reset_postdata();?>
</div>
<div id="Category1" class="tab-pane">
<?php
$my_page_id = 766; //your page or post ID
$my_page = get_post($my_page_id); //retrieves the page via the ID
$content = $my_page->post_content; //gets the unfiltered page content
$content = apply_filters('the_content', $content); //cleanup content
$content = str_replace(']]>', ']]>', $content); //cleanup content
$title = $my_page->post_title; //retrieves page title and sets the variable
?>
<?php
echo $content; //show page content
?>
</div>
<div id="Category2" class="tab-pane">
<?php
$my_page_id = 769;
$my_page = get_post($my_page_id);
$content = $my_page->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
$title = $my_page->post_title;
?>
<?php
echo $content; //show page content
?>
</div>
<div id="Category3" class="tab-pane">
<?php
$my_page_id = 772; //your page or post ID
$my_page = get_post($my_page_id); //retrieves the page via the ID
$content = $my_page->post_content; //gets the unfiltered page content
$content = apply_filters('the_content', $content); //cleanup content
$content = str_replace(']]>', ']]>', $content); //cleanup content
$title = $my_page->post_title; //retrieves page title and sets the variable
?>
<?php
echo $content; //show page content
?>
</div>
</div>
</div><!-- // Gallery Items -->
</div><!-- // Gallery -->
</div><!-- Inside Content -->
</div>
</section><!-- // Content -->
<?php get_footer(); ?>
Please help me with this.

This is not an actual answer. However I managed to develop lightbox which works onclick. I used ACF gallery field.
style.css
header{
position: sticky;
}
footer{
position: sticky;
}
page-gallery.php
<div class="tab-content">
<?php $images = get_field('gallery');
if( $images ): ?>
<?php foreach( $images as $image ): ?>
<div class="gallery_content_wrapper">
<div class="item col-md-4">
<img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" width="344" height="215" onclick="openModal();currentSlide(1)" class="cursor">
</div>
<?php if ( function_exists('slb_activate') ){
$content = slb_activate($content);
}
echo $content; ?>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<img src="<?php echo $image['url']; ?>">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
custom.js
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
custom.css
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 100000000;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #000000;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
/*text-align: center;*/
}
.mySlides{
text-align: center;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
opacity: 1;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
This will not display the exact image which you select because I haven't add a loop to it. However this will solve the lightbox problem.
Further I removed lightbox js and css files added above mentioned codes.
Have a great day!
cheers!

Can someone explain why my "fixed navigation on Scroll" is not working?

I would like my navigation to be fixed after a slideshow on my wordpress site, however the coding I have used in the past does not appear to be working.
The website in question is:
www.guerrilla.nz
The Code:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
<script src="https://use.typekit.net/gbc6dao.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.j s"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type='text/javascript'>
// Sticky nav
var nav = $('stick');
var navHomeY = nav.offset().top;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if ($(this).scrollTop() > navHomeY){
nav.addClass("fixed-nav");
}
else{
nav.removeClass("fixed-nav");
}
});
</script>
<style>
.fixed-nav {
position: fixed;
top: 0;
z-index: 1001;
width: 100%;
}
#stick.fixed-nav {
background-color: rgba(255, 255, 255, 1);
position: fixed!important;
top: 0;left: 0; right: 0;
top: 0;
width: 100%;
z-index: 50000!important;
}
</style>
</head>
<body <?php body_class(); ?>>
<?php do_action( 'before' ); ?>
<?php if( is_page( 'Home' ) ) { ?>
<div class="cb-slideshow-container">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>OWNER OF A SMALL BUSINESS?</h3> </div></li>
<li><span>Image 02</span><div><h3>OR TRADIE,<br>
LOOKING TO GO IT ALONE?</div></li>
<li><span>Image 03</span><div><h3>DON'T KNOW<br>
WHERE TO START...</h3></div></li>
<li><span>Image 04</span><div><h3>WE CAN HELP</h3></div></li>
<li><span class="toe">Gerrilla</span></li>
</ul>
</div>
<?php } ?>
<header class="site-header" role="banner">
<nav id="stick" class="site-navigation">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default">
<div class="navbar-header">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only"><?php _e('Toggle navigation','_tk') ?> </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Your site title as branding in the menu -->
<?php if ( get_theme_mod( 'andys_logo' ) ) : ?>
<div class='site-logo'>
<a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'> <img src='<?php echo esc_url( get_theme_mod( 'andys_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'> </a>
</div>
<?php else : ?>
<hgroup>
<h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
<h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php endif; ?>
</div>
<div class="getstartedn-wrap">
<a href="http://www.guerrilla.nz/contact-us/">
<div class="nav-getstarted getstarted-button">GET STARTED</div>
</a>
</div>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'nav',
'container_id' => 'navbar-collapse',
'container_class' => 'collapse navbar- collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'menu_id' => 'main-menu',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
</div><!-- .navbar -->
</div>
</div> <!--<div style="background-color:#000; height:30px; color:#000;"> dsfsf</div> -->
</div><!-- .container -->
</nav><!-- .site-navigation -->
</header><!-- #masthead -->
I would like my navigation to be fixed after a slideshow on my wordpress site, however the coding I have used in the past does not appear to be working.

Just take a look at your console. There's an error: Uncaught TypeError: Cannot read property 'top' of undefined.
It's pretty simple. Get the outerHeight of the slideshow element and then apply the sticky class to your nav if this specific height is reached.
Don't forget to add a padding-top to your body with the same height of your nav. Because your navigation will be fixed at the top, your body needs a padding-top.
Here's a simple example:
$(window).scroll(function() {
var slideshow = $('.slideshow').outerHeight();
var nav = $('nav');
if ($(window).scrollTop() >= slideshow) {
nav.addClass('sticky');
} else {
nav.removeClass('sticky');
}
});
html, body {
padding: 0;
margin: 0;
}
.slideshow {
width: 100%;
height: 200px;
background: blue;
}
nav {
width: 100%;
height: 50px;
background: red;
}
.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
}
main {
/* Get some space */
min-height: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow">
<p>
Just for testing
</p>
</div>
<nav>
<p>
Just to demonstrate it
</p>
</nav>
<main>
<p>
Just to get some space
</p>
</main>

Keeping page in one place while changing images or reloading page?

I've checked this site for the same kind of questions but I'm not looking to change the image on this project without the page reloading - it needs to reload. Although when I do click the next or previous buttons the page jumps right to the top again as it should do, is there a way to combat that so that when the user clicks the next image the page reloads with the image on screen rather than the user having to scroll down every time? Here is my script:
$albumName = "Our Gallery"; // Name your album!
/*
* Installation:
* 1.) Place your photos into the images directory.
* - Photos will be displayed in alphabetical order.
* 2.) Rename the "basic-php-photo-album" folder to anything you wish.
* - Example: paris-photo-album
* 3.) Upload the renamed folder and all of its contents to your server.
*
* That's it! Make multiple albums by repeating the above 3 steps.
*/
/*
* You shouldn't need to change anything beyond this.
*
*/
$p = $_GET['p'];
if ($handle = opendir("uploads")) {
$i = 1;
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
$img[$i] = $file;
if ($p == $img[$i]) {
$ci = $i;
}
$i++;
}
}
closedir($handle);
$ti = $i - 1;
$pi = $ci - 1;
if ($p == "") {
$ni = $ci + 2;
} else {
$ni = $ci + 1;
}
$prevNext = "";
if ($pi > 0) {
$piFile = $img[$pi];
$prevNext .= "Previous &#171";
} else {
$prevNext .= "«";
}
$prevNext .= " | ";
if ($ni <= $ti) {
$niFile = $img[$ni];
$prevNext .= "&#187 Next";
} else {
$prevNext .= "»";
}
if ($p == "") {
$p = $img[1];
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Dave's Caravan Lettings</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Hire our Deluxe Plus Caravan based in Sandy Bay, Exmouth for an easy, great priced family holiday! Comes complete with all required facilities as standard!">
<meta name="keywords" content="Haven,Holidays,Sandy,Bay,Devon,Cliffs,Exmouth,Beach,Caravan,Hire,Rental,Rent,Cheap,Holiday,Family,Entertainment,Daves,Letting,Lettings,Fun,Best,Stay,Nights,Price,Buy">
<meta name="author" content="BaseEnterprises WebDesign">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
td, select, input {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
}
.hRule {
border-top: 1px solid #cdcdcd;
margin: 0px 0px 10px 0px;
}
img {
border: 1px solid #333333;
}
.nextPrevious {
font-size: 18px;
color: #cdcdcd;
padding-bottom: 15px;
}
a, a:visited {
color: #cc0000;
text-decoration: none;
}
a:active, a:hover {
color: #cc0000;
text-decoration: underline;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="header-bg">
<div class="wrap">
<div class="header">
<div class="logo">
<h1>Dave's Caravan Lettings</h1>
</div>
</div>
<div class="header-bot">
<div class="menu">
<ul>
<li class="home">Home</li>
<li class="">Location</li>
<li class="">Facilities</li>
<li class="">Availability</li>
<li class="">Contact Us</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="banner">
<div class="wrap">
<span class="banner-img">
<img src="images/banner2.jpg" alt=""/>
</span>
</div>
</div>
</div>
<div class="main">
<div class="wrap">
<div class="content-bot">
<h3><?php echo $albumName; ?></h3>
<p>Images sent to us by previous holiday makers staying in our Caravan... See what it's like yourself by browsing the images below...</p><br></br>
<div class="inner-top">
<div class="section group" align="center">
<div class="hRule"></div>
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr align="center">
<td class="nextPrevious"><?php echo $prevNext; ?></td>
</tr>
<tr align="center">
<td><img src="uploads/<?php echo $p; ?>" alt="<?php echo $$albumName; ?>" border="0" height="300px" width="400px"></td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>

If you wanted to scroll right to the bottom automatically, depending on how large your images are - you could use something like this:
$(".section group").animate({ scrollTop: $(document).height() }, "fast");
return false;
And then add this to your page:
<div class="section group" align="center" style="overflow-y: scroll;height:520px;width:520px 240px">
Then all you would do is fiddle around with the width and height attributes until they match your design.

JavaScript
get the current scroll with:
document.documentElement.scrollTop + document.body.scrollTop
And add that to the reloaded page so it scrolls to the same position as it was.

I would try to pass the scroll position over to the next page, and restore that setting with javascript. My example includes jQuery to make life easier. Plain Javascript would probably involve some cross browser compatibility hassle.
You could insert this (tested) example code in your <head> section:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function() {
// set scroll position to the previous state, only if it was given
<?php if( isset($_GET['scrollTop']) ) {
echo "$('body').scrollTop(" . $_GET['scrollTop'] . ");";
} ?>
// append current scroll position parameter to the link
$('.nextPrevious').on('click', 'a', function(e) {
e.preventDefault();
document.location.href = $(this).attr('href') + '&scrollTop=' + $('body').scrollTop();
});
});
</script>
If you are already using jQuery in your page you don't need to include it again, of course.

Image slider timing issue

i am a newbie to programming and trying to create a slider for ma first website which i did manage to, but its having some timing issue,i.e sometimes my image gets too quickly updated or too slowly and fails to sync in with css3 animation. i used javascript timing function along with css for animation, and php for image and caption upload(i created the slider with upload facility for website owners). I am attaching the codes here, sorry if its messy and not the standard way for creating a slider.
this is my slider:
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<style>
input[type="radio"]
{
position:relative;
top:120px;
left:600px;
display:none;
}
input[type="radio"] + label
{
position:relative;
top:120px;
left:600px;
display:inline-block;
width:19px;
height:19px;
background:url(check_radio_sheet.png) -38px no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label
{
background:url(check_radio_sheet.png) right top no-repeat;
}
div#slider
{
width:700px;
height:306px;
margin-left:auto;
margin-right:auto;
position:relative;
top:50px;
z-index:-2;
-webkit-animation: sliding 16s infinite;
}
#-webkit-keyframes sliding
{
0%{opacity:0;left:600px;}
10%{opacity:1;left:0px;}
25%{opacity:0;left:-600px;}
35%{opacity:1;left:0px;}
50%{opacity:0;left:600px}
60%{opacity:1;left:0px;}
75%{opacity:0;left:0px;}
85%{opacity:1;left:0px;}
90%{opacity:1;left:0px;}
100%{opacity:0;left:0px;}
}
#i
{
-webkit-animation: slideimage 16s infinite;
}
#-webkit-keyframes slideimage
{
0%{width:700px;height:306px;}
10%{}
25%{}
35%{}
50%{width:700px;height:306px;}
60%{width:700px;height:306px;}
75%{width:100px;height:44px;}
85%{}
100%{width:700px;height:306px;}
}
#-webkit-keyframes com
{
0%{opacity:0;}
10%{opacity:1;}
25%{opacity:0;}
35%{opacity:1;left:0px;}
50%{opacity:0;left:300px}
51%{left:0px;}
60%{opacity:1;left:0px;}
75%{opacity:0;left:-300px}
85%{opacity:1;left:0px;}
100%{opacity:0;}
}
div#sliderframe
{
z-index:-2;
width:800px;
height:406px;
background:#666666;
overflow:hidden;
}
div.slide
{
position:relative;
left:300px;
top:100px;
}
.s
{
color:#FFFFFF;
position:relative;
top:65px;
font-size:18px;
-webkit-animation: com 16s infinite;
}
</style>
<script type="text/javascript">
<?php
for($i=1; $i<6; $i++)
{
//echo "image-slider-$i.jpg.txt";
$file=fopen("image-slider-$i.jpg.txt","r");
while(!feof($file))
{
$a[$i]=fgets($file);
}
fclose($file);
}
?>
var a=setInterval(function(){change()},4000);
var n=2;
function change()
{
document.getElementById("i").src="image-slider-"+n+".jpg";
document.getElementById(n).checked="checked";
if(n==1)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[1]\""?>;
}
else if(n==2)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[2]\""?>;
document.getElementById(n).checked="checked";
}
else if(n==3)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[3]\""?>;
document.getElementById(n).checked="checked";
}
else if(n==4)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[4]\""?>;
document.getElementById(n).checked="checked";
}
else if(n==5)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[5]\""?>;
document.getElementById(n).checked="checked";
}
n++;
if(n==6)
{
n=1;
}
}
function changenum(a)
{
n=a;
}
</script>
</head>
<body>
<div id="myslide">
<div class="slide" id="sliderframe">
<div id="slider"><img id="i" src="image-slider-1.jpg"/></div>
<center><span id="sc" class="s"><?php echo $a[1];?></span></center>
</div>
<input checked="checked" onclick="changenum('1')" id="1" type="radio" name="im"/><label for="1"></label>
<input onClick="changenum('2')" id="2" type="radio" name="im"/><label for="2"></label>
<input onClick="changenum('3')" id="3" type="radio" name="im"/><label for="3"></label>
<input onClick="changenum('4')" id="4" type="radio" name="im"/><label for="4"></label>
<input onClick="changenum('5')" id="5" type="radio" name="im"/><label for="5"></label>
</div>
</body>
</html>
this is my image listing page:
<html>
<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
.align_center
{
position:relative;
left:350px;
top:120px;
float:left;
}
</style>
</head>
<body>
<?php
for($i=1; $i<6; $i++)
{
//echo "image-slider-$i.jpg.txt";
$file=fopen("image-slider-$i.jpg.txt","r");
while(!feof($file))
{
$a[$i]=fgets($file);
}
fclose($file);
}?>
<div class="align_center">
<div class="img">
<a href="imageupload.php?image=image-slider-1.jpg">
<img src="image-slider-1.jpg" alt="slider image" width="110" height="90" />
</a>
<div class="desc"><?php echo $a[1]; ?></div>
</div>
<div class="img">
<a href="imageupload.php?image=image-slider-2.jpg">
<img src="image-slider-2.jpg" alt="slider image" width="110" height="90" />
</a>
<div class="desc"><?php echo $a[2]; ?></div>
</div>
<div class="img">
<a href="imageupload.php?image=image-slider-3.jpg">
<img src="image-slider-3.jpg" alt="slider image" width="110" height="90" />
</a>
<div class="desc"><?php echo $a[3]; ?></div>
</div>
<div class="img">
<a href="imageupload.php?image=image-slider-4.jpg">
<img src="image-slider-4.jpg" alt="slider image" width="110" height="90" />
</a>
<div class="desc"><?php echo $a[4]; ?></div>
</div>
<div class="img">
<a href="imageupload.php?image=image-slider-5.jpg">
<img src="image-slider-5.jpg" alt="slider image" width="110" height="90" />
</a>
<div class="desc"><?php echo $a[5]; ?></div>
</div>
</div>
</body>
</html>
and this one is image upload page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.notice{
display:inline;
margin:2px;
border:solid 2px;
position:absolute;
top:60px;
width:200px;
float:left;
padding:4px;
}
.upload_details
{
position:relative;
left:500px;
}
.upload_details input[type="submit"]
{
width:300px;
}
</style>
</head>
<body>
<?php
$image=$_GET['image'];
?>
<center>
Go to update page<br /><br />
<img src=<?php echo "\"$image\"";?> /><br />
</center>
<br />
<div class="upload_details">
<form method="post" enctype="multipart/form-data" action="imageupload.php?image=<?php echo "$image\"";?>>
Add description : <input type="text" name="description" id="des" /><br /><br />
<label for="slide_image">Upload new image : </label>
<input type="file" id="slide_imageid" name="slide_image" accept="image/jpeg"/>
<br /><br />
<input type="submit" value="Upload"/>
</form>
</div>
<?php
if(isset($_REQUEST['description']))
{
$a=$_REQUEST['description'];
if($a=="")
{
echo '<p style="color:red">Enter description, if you want a new one.</p>';
}
else
{
$file=fopen($image.".txt","w");
fwrite($file,$a);
echo '<p style="color:green">Description uploaded</p>';
}
if ((($_FILES["slide_image"]["type"] == "image/jpeg")|| ($_FILES["slide_image"]["type"] == "image/jpg"))&& ($_FILES["slide_image"]["size"] < 200000))
{
if ($_FILES["slide_image"]["error"] > 0)
{
echo "Error: " . $_FILES["slide_image"]["error"] . "<br>";
}
else
{
echo "Uploaded image: " . $_FILES["slide_image"]["name"] ."of Size: " . ($_FILES["slide_image"]["size"]/1024 ) . " kB<br>";
$_FILES["slide_image"]["name"]=$image;
move_uploaded_file($_FILES["slide_image"]["tmp_name"],$_FILES["slide_image"]["name"] );
}
}
else
{
echo "invalid file";
}
}
?>
</body>
</html>
i am submitting the whole codes here. Please someone help me with this performance issue and guide me towards a better way.
edit: I am using text files to store description at upload page which is retrieved to variables in slider page using php(if that matters).