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!
I have a horizontal image gallery, the images for which is populated from a thumbnail folder. I want to create a utility where the clicked image always remain at the middle of the thumbnail image palette. Similar to the question asked here.
A minimal version of the code is as follows:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#loaded_img_panel {
border-top: solid 0.3em #f1ded9;
display:flex;
flex-wrap: nowrap;
overflow-x:auto;
padding: 10px 0 0 0;
}
#loaded_img_panel > ul > li {
list-style: none;
}
#loaded_img_panel ul li img {
display: inline;
width: 210px;
height:175px;
cursor: pointer;
}
#loaded_img_panel img.active{
border: 0.4em solid red;
padding : 5px;
}
#loaded_img_panel > caption {
display:block;
}
#loaded_img_panel img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="book-list-headbox">
<div class="page-number-box">
<label for="" id="total-page" value="" class="mb-0"></label>
<span class="separator">of</span>
<input type="text" id="current-page" value="1">
</div>
</div>
<div class="loaded_img_panel" id="loaded_img_panel">
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
window.addEventListener('load', function(e) {
var matchLst = "thumb";
var project = "upload";
if (matchLst !== null && matchLst !=="") {
$.post("loadimages.php", { 'project' : project,'matchLst' : matchLst }, function(output){
$("#loaded_img_panel").html(output).show();
});
}
})
$(function(){
$('#gotoframe').change(function() {
var i = $(this).val() -1;
activeBook(i);
localStorage.setItem('clicki', i);
});
$('#loaded_img_panel').on('click', 'img', function() {
activeBook($(this).index());
});
function activeBook(i){
$('#loaded_img_panel img').removeClass('active');
var active = $('#loaded_img_panel img').eq(i).addClass('active');
var left = active.position().left;
console.log("firstleft: " + left);
var currScroll= $(".loaded_img_panel").scrollLeft();
var contWidth = $('.loaded_img_panel').width()/2;
var activeOuterWidth = active.outerWidth()/2;
left= left + currScroll - contWidth + activeOuterWidth;
$('.loaded_img_panel').animate( {
scrollLeft: left
},'slow');
}
});
</script>
loadimages.php
<?php
session_start();
$project = $_POST['project'];
$match = $_POST['matchLst'];
$_SESSION['matchLst'] = $match;
$tardir = "projects/" . $project . "/" . $match . "/thumb/*.jpg" ;
$imgdir = "projects/" . $project . "/" . $match . "/" ;
$files = glob($tardir);
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
$filname = basename($num, ".jpg");
$imgname = basename($num);
$img = $imgdir . $imgname;
$filnam = substr($filname, -5);
$filnam = rtrim($filnam);
echo '<ul class="item" id="item">';
echo '<li class="book"><img src="'.$img.'" id="thumbNails'.$filnam.'"/>';
echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
echo '</li></ul>';
}
?>
The php code renders the images from the folder. When I click on the image from the gallery, instead of providing the position of the image, I get static values till I use the scroll bar to select some of the images that were not visible onload. Those clicks returns the position values in negative. What I am trying to do is given as an example here.
I found some code in an article on daniweb.com for a jquery slideshow and got it working pulling data from mysql. I want to modify it so the slide changes automatically every 5 seconds or so, instead of having to click the buttons but don't know how to modify this code to do that...
Here's the current code: It uses a mysql database and php to pull used car info from a table and then display in a slideshow. The idea is to run this on a rasPi with a 7-10" display at our cashier counter or waiting room for customers to see...
Any help would be greatly appreciated, thank you!
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 950;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
* {
font-family:Arial;
}
body {
width:800px;
height:572px;
background:linear-gradient(#117dc8,#15527c);
}
.header {
color:white;
font-size:28px;
margin-left:20px;
margin-top:10px;
}
.logo {
position:absolute;
margin-left:720px;
margin-top:-30px;
z-index:10;
width:250px;
}
.container {
position:relative;
background-color:#fafafa;
width:940px;
height:480px;
border-radius:10px;
margin-top:10px;
margin-left:6px;
padding:5px;
z-index:6;
}
#carDisplay {
width:915px;
height:455px;
padding:10px;
border:none;
}
.contact {
position:absolute;
color:white;
margin:15px 80px;
font-size:20px;
}
* {
font-family:Arial;
}
#cert {
color:#e3001b;
}
.cartitle {
font-size:30px;
margin-left:10px;
}
.stock {
font-size:14px;
font-size:18px;
color:#999;
margin-left:10px;
}
.carimg {
width:480px;
padding:5px;
margin-left:10px;
box-shadow:0px 2px 5px 1px #bbb;
}
.details {
padding:30px;
font-size:25px;
}
.price {
font-size:35px;
font-weight:bold;
color:#333;
text-align:center;
margin-top:-20px;
margin-bottom:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Used Car New Arrivals</title>
<link rel="stylesheet" href="css/mainstyle.css">
<link rel="stylesheet" href="css/framestyle.css">
<script src="jscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div class="header"><i>Used Car New Arrivals | </i><span style="font-size:20px;">Falmouth Toyota</span></div>
<img class="logo" src="ft-logo.png" />
<div class="container">
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "usedcars";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM usedcars";
$result = mysqli_query($conn, $sql);
$num = mysql_num_rows($result);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "<div id='slideshow'>
<div id='slidesContainer'>
<div class='slide'>
<table class='tableStyle'>
<tr>
<td colspan='2'><div class='stock'>Stock: " . $row["stock"] ."</div></td>
</tr>
<tr>
<td colspan='2'><div class='cartitle'><b><span id='cert'>" . $row["certified"] . "</span> " . $row["preowned"]. " " . $row["year"] . " " . $row["make"] . " " . $row["model"] . " " . "</b><span style='font-size:18px;color:#999;'> - " . number_format($row["mileage"]) . " miles</span></div></td>
</tr>
<tr>
<td colspan='2'><hr /></td>
</tr>
<tr>
<td><img class='carimg' src='" .$row["img"] . "' /></td>
<td class='details'><div class='price'>Price: $" . number_format($row["price"]) ."</div><br>
<hr style='margin-top:-25px;'/>
<b>Vehicle Features</b>
<ul>
<li>" . $row["feat1"] . "</li>
<li>" . $row["feat2"] . "</li>
<li>" . $row["feat3"] . "</li>
<li>" . $row["feat4"] . "</li>
</ul>
</td>
<tr>
</table>
</div>
</div>
</div>";
}
}
else {
echo "<span>No images available</span>";
}
mysqli_close($conn);
?>
</div>
<div class="contact">VISIT OUR SHOWROOM FOR MORE INFORMATION ON ANY OF THESE VEHICLES</div>
</body>
<script src="jscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</html>
Try adding the following code inside a script tag. Feel free to change the slide change duration as per your requirement.
Here 5000 means 5*1000 milli seconds, which is 5 seconds.
window.setInterval(function() {
$('#rightControl.control').click();
}, 5000);
Accept this answer if it helps.
Update: Playing the slideshow continuously (looping)
Note: Replace the existing animate function with the below snippet
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
}, function() {
// if last slide then move the pointer to 1st slide
if(currentPosition == numberOfSlides-1) {
currentPosition = -1;
}
});
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 «";
} else {
$prevNext .= "«";
}
$prevNext .= " | ";
if ($ni <= $ti) {
$niFile = $img[$ni];
$prevNext .= "» 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.
I am using JS-Graph.IT to create a flowchart diagram and want to upon selection of a dropdown option, load a div with an altered version of the flowchart. Prior to loading AJAX content, the flow diagram works and shows boxes with arrows pointing from one box to another. After loading AJAX content, the connectors can't seem to be generated.
I found here that it is because of the need to clear the canvas before using the same canvas ids. SourceForge I tried following the instructions and copied the delCanvas function to the JS file, and calling the delCanvas function and reinitializing page objects in the header of the HTML page as such:
<script type="text/javascript">
jQuery(document).ready(function() {
JSGraphIt.initPageObjects();
$("body").delegate("#button1", "click", function() {
delCanvas('#mainCanvas');
var button2 = $('#combo').val();
$.ajax({ // ajax call starts
url: 'serverside17.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
JSGraphIt.initPageObjects();
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
}
});
});
});
</script>
Thanks in advance for your help!
HTML page:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script> <!-- Jquery for Slide Toggle -->
<script type="text/javascript" src="../js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="../sf-homepage.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
}
</style>
<script type="text/javascript">
function onLoad()
{
JSGraphIt.initPageObjects();
}
jQuery(document).ready(function() {
$(".block").bind('click', $.proxy(function(event) {
var input = $(event.target).attr('id');
var lines = input.split('_');
var button = lines[0];
$.ajax({ // ajax call starts
url: 'srvrside.php', // JQuery loads serverside.php
data: 'button=' + button, // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
$('#content').html(''); // Clear #content div
$('#content').append(data);
}
});
return false; // keeps the page from not refreshing
}, this));
$("#button1").bind('click', $.proxy(function(event) {
var button2 = $('#combo').val();
$.ajax({ // ajax call starts
url: 'serverside15.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
JSGraphIt.initPageObjects();
}
});
return false; // keeps the page from not refreshing
}, this));
});
</script>
</head>
<body onload="onLoad();">
<select id="combo">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input id="button1" type="button" value="Click!" />
<div id="mainCanvas" class="canvas" style="float: left; background: #F8F8F8; width: 100%; height: 60%; border-top: #ccc 1px solid !important; border-bottom: #ccc 1px solid !important; margin: 0 !important; border-left: 0; border-right: 0; padding: 0 !important;">
<?php
***database connection details***
while($row = mysqli_fetch_array($result))
{
echo '<div id="'.$row['id'].'_block" class="block" style="background: red;';
echo ' !important; left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
echo '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> ';
echo $row['name'];
echo '</div>';
}
// Creating connectors
$result = mysqli_query($con,"SELECT * FROM dependencies");
while($row = mysqli_fetch_array($result))
{
echo '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
if ($row['down_arrow'] == 1) {
echo 'down_start">';
}
else {
echo 'right_start">';
}
echo '<img class="connector-end" src="arrow.gif">';
echo '<label class="middle-label">'.$row['desc'].'</label>';
echo '</div>';
}
// Closing database connection
mysqli_close($con);
?>
</div>
</body>
</html>
Server side PHP:
<?php
// Get value of clicked button
$button = $_GET['button2'];
$all = '';
***Database connection***
while($row = mysqli_fetch_array($result))
{
$all .= '<div id="'.$row['id'].'_block" class="block" style="border: 3px solid #000; background: red;';
$all .= 'left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
$all .= '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> ';
$all .= $row['name'];
$all .= '</div>';
}
***database connection***
while($row = mysqli_fetch_array($result))
{
$all .= '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
if ($row['down_arrow'] == 1) {
$all .= 'down_start">';
}
else {
$all .= 'right_start">';
}
$all .= '<img class="connector-end" src="arrow.gif">';
$all .= '<label class="middle-label">'.$row['desc'].'</label>';
$all .= '</div>';
}
// Closing database connection
mysqli_close($con);
print json_encode($all);
?>
JS-Graph.IT JS