In a project I have to create a carousel in Elementor which should look like the one below:
carousel design
Using the widget from Elementor I couldn't create a carousel like this so I tried to create my own carousel using Easy-Responsive-jQuery-Carousel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery FilmRoll Examples</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Easy-Responsive-jQuery-Carousel-Slider-Plugin-FilmRoll/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Easy-Responsive-jQuery-Carousel-Slider-Plugin-FilmRoll/css/bootstrap-responsive.min.css">
<style type="text/css">
body {
padding-top: 0;
padding-bottom: 40px;
}
.hero-unit {
text-align: center;
border-radius: 0;
margin: 150px 0 0 0;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #338cd6 59%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(59%,#338cd6), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#338cd6 59%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#338cd6 59%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#338cd6 59%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#338cd6 59%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.hero-unit h1, .hero-unit p.white { color: white; }
.hero-unit h1 img { vertical-align: bottom; }
.hero-unit p { margin-top: 30px; }
.film_roll_wrapper img {
border: 10px solid white;
box-shadow: 7px 7px 15px #777;
margin-left: 5px;
margin-right: 5px;
transition: all 1s ease;
}
.film_roll_wrapper .active img {
border: 10px solid yellow;
height: 600px;
}
.film_roll_container {
position: relative;
}
.film_roll_child.active {
padding-top: 70px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
.navbar-fixed-top {
margin-bottom: 0;
}
}
#media (max-width: 767px) {
.hero-unit {
margin-left: -20px;
margin-right: -20px;
}
}
</style>
</head>
<body>
<div id='film_roll_1'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Easy-Responsive-jQuery-Carousel-Slider-Plugin-FilmRoll/js/bootstrap.min.js"></script>
<!--<script src="https://www.jqueryscript.net/demo/Easy-Responsive-jQuery-Carousel-Slider-Plugin-FilmRoll/js/jquery.film_roll.js"></script>-->
<script type="text/javascript">
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.FilmRoll = (function() {
function FilmRoll(options) {
this.options = options != null ? options : {};
this.rotateRight = __bind(this.rotateRight, this);
this.rotateLeft = __bind(this.rotateLeft, this);
this.moveRight = __bind(this.moveRight, this);
this.moveLeft = __bind(this.moveLeft, this);
this.clearScroll = __bind(this.clearScroll, this);
this.configureScroll = __bind(this.configureScroll, this);
this.configureWidths = __bind(this.configureWidths, this);
this.configureHover = __bind(this.configureHover, this);
if (this.options.container) {
this.div = jQuery(this.options.container);
if (this.div.length) {
this.configure();
}
}
}
FilmRoll.prototype.configure = function() {
var first_child, shuttle_width,
_this = this;
this.children = this.div.children();
this.children.wrapAll('<div class="film_roll_wrapper"></div>');
this.children.wrapAll('<div class="film_roll_shuttle"></div>');
this.wrapper = this.div.find('.film_roll_wrapper');
this.shuttle = this.div.find('.film_roll_shuttle');
this.rotation = [];
shuttle_width = this.options.shuttle_width ? parseInt(this.options.shuttle_width, 10) : 10000;
this.shuttle.width(shuttle_width);
this.height = this.options.height ? parseInt(this.options.height, 10) : 0;
this.wrapper.height(this.height);
this.shuttle.height(this.height);
if (!(this.options.no_css === true || document.film_roll_styles_added)) {
jQuery("<style type='text/css'> .film_roll_wrapper {display: block; text-align: center; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 100%; margin: 0 !important; padding: 0 !important; overflow: hidden; width: 100%} .film_roll_shuttle {text-align: left; float: none; position: absolute; top: 0; left:0; right: auto; bottom: auto; margin: 0 !important; padding: 0 !important; z-index: auto} .film_roll_prev, .film_roll_next {position:absolute; top:48%; left:15px; width:40px; height:40px; margin:-20px 0 0 0; padding:0; font-size:60px; font-weight:100; line-height:30px; color:white; text-align: center; background: #222; border: 3px solid white; border-radius:23px; opacity:0.5} .film_roll_prev:hover, .film_roll_next:hover {color:white; text-decoration:none; opacity:0.9} .film_roll_next {left:auto; right:15px} .film_roll_pager {text-align:center} .film_roll_pager a {width:5px; height:5px; border:2px solid #333; border-radius:5px; display:inline-block; margin:0 5px 0 0; transition: all 1s ease} .film_roll_pager a:hover {background: #666} .film_roll_pager a.active {background: #333;} .film_roll_pager span {display:none} .film_roll_child .active{padding-top: 70px!important;} </style>").appendTo('head');
document.film_roll_styles_added = true;
}
if (this.options.pager !== false) {
this.pager = jQuery('<div class="film_roll_pager">');
this.div.append(this.pager);
this.children.each(function(i, e) {
var link;
link = jQuery("<a href='#' data-id='" + e.id + "'><span>" + (i + 1) + "</span></a>");
_this.pager.append(link);
return link.click(function() {
var direction, rotation_index;
_this.index = i;
rotation_index = jQuery.inArray(_this.children[i], _this.rotation);
direction = rotation_index < (_this.children.length / 2) ? 'right' : 'left';
_this.moveToIndex(_this.index, direction, true);
return false;
});
});
}
this.pager_links = this.div.find('.film_roll_pager a');
this.mouse_catcher = jQuery('<div style="position:absolute; top:0; left: 0; height: 100%; width: 100%;" class="film_roll_mouse_catcher"></div>');
this.mouse_catcher.appendTo(this.wrapper).mousemove(function(event) {
_this.clearScroll();
return _this.mouse_catcher.remove();
});
first_child = null;
this.children.each(function(i, e) {
var $el;
$el = jQuery(e);
$el.attr('style', 'position:relative; display:inline-block; vertical-align:middle');
$el.attr('data-film-roll-child-id', i);
$el.addClass("film_roll_child");
return _this.rotation.push(e);
});
if (this.options.prev && this.options.next) {
this.prev = jQuery(this.options.prev);
this.next = jQuery(this.options.next);
} else {
this.wrapper.append('<a class="film_roll_prev" href="#">‹</a>');
this.wrapper.append('<a class="film_roll_next" href="#">›</a>');
this.prev = this.div.find('.film_roll_prev');
this.next = this.div.find('.film_roll_next');
}
this.prev.click(function() {
_this.clearScroll();
return _this.moveRight();
});
this.next.click(function() {
_this.clearScroll();
return _this.moveLeft();
});
this.index = this.options.start_index || 0;
this.interval = this.options.interval || 4000;
this.animation = this.options.animation || this.interval / 4;
jQuery(window).resize(function() {
return _this.resize();
});
jQuery(window).load(function() {
_this.configureWidths();
_this.moveToIndex(_this.index, 'right', true);
if (_this.options.scroll !== false) {
_this.configureScroll();
return _this.configureHover();
}
});
this.div.trigger(jQuery.Event("film_roll:dom_ready"));
return this;
};
FilmRoll.prototype.configureHover = function() {
this.div.hover(this.clearScroll, this.configureScroll);
if (this.options.prev && this.options.next) {
this.prev.hover(this.clearScroll, this.configureScroll);
return this.next.hover(this.clearScroll, this.configureScroll);
}
};
FilmRoll.prototype.configureWidths = function() {
var max_el_height,
_this = this;
this.div.trigger(jQuery.Event("film_roll:before_loaded"));
this.width = max_el_height = 0;
this.children.each(function(i, e) {
var $el, el_height;
$el = jQuery(e);
_this.width += $el.outerWidth(true);
el_height = $el.outerHeight(true);
if (el_height > max_el_height) {
return max_el_height = el_height;
}
});
if (!this.options.height) {
this.height = max_el_height;
}
this.wrapper.height(this.height);
this.shuttle.height(this.height);
this.real_width = this.width;
this.shuttle.width(this.real_width * 2);
return this;
};
FilmRoll.prototype.configureScroll = function() {
var _this = this;
if (this.scrolled !== true) {
this.timer = setInterval(function() {
return _this.moveLeft();
}, this.interval);
this.scrolled = true;
}
return this;
};
FilmRoll.prototype.clearScroll = function() {
if (this.scrolled !== false) {
clearInterval(this.timer);
this.scrolled = false;
}
return this;
};
FilmRoll.prototype.marginLeft = function(rotation_index, offset) {
var child, i, margin, _i, _len, _ref;
if (offset == null) {
offset = 0;
}
margin = 0;
_ref = this.rotation;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
child = _ref[i];
if (i < rotation_index && i >= offset) {
margin += jQuery(child).outerWidth(true);
}
}
return margin;
};
FilmRoll.prototype.marginRight = function(rotation_index, offset) {
var child, i, margin, _i, _len, _ref;
if (offset == null) {
offset = 0;
}
offset = this.rotation.length - offset - 1;
margin = 0;
_ref = this.rotation;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
child = _ref[i];
if (i > rotation_index && i <= offset) {
margin += jQuery(child).outerWidth(true);
}
}
return margin;
};
FilmRoll.prototype.moveLeft = function() {
this.index = (this.index + 1) % this.children.length;
this.moveToIndex(this.index, 'left', true);
return false;
};
FilmRoll.prototype.moveRight = function() {
this.index -= 1;
if (this.index < 0) {
this.index = this.children.length - 1;
}
this.moveToIndex(this.index, 'right', true);
return false;
};
FilmRoll.prototype.moveToIndex = function(index, direction, animate) {
var child, new_left_margin, rotation_index, visible_margin, wrapper_width,
_this = this;
if (animate == null) {
animate = true;
}
child = this.children[index];
rotation_index = jQuery.inArray(child, this.rotation);
this.children.removeClass('active');
jQuery(child).addClass('active').trigger(jQuery.Event("film_roll:activate"));
this.pager_links.removeClass('active');
jQuery(this.pager_links[index]).addClass('active');
wrapper_width = this.wrapper.width();
if (wrapper_width < this.real_width) {
visible_margin = (wrapper_width - jQuery(child).outerWidth(true)) / 2;
if (direction === 'right') {
while (rotation_index === 0 || this.marginLeft(rotation_index) < visible_margin) {
this.rotateRight();
rotation_index = jQuery.inArray(child, this.rotation);
}
} else {
while (rotation_index === this.children.length - 1 || this.marginRight(rotation_index) < visible_margin) {
this.rotateLeft();
rotation_index = jQuery.inArray(child, this.rotation);
}
}
new_left_margin = -1 * (this.marginLeft(rotation_index) - visible_margin);
if (animate) {
this.shuttle.stop().animate({
'left': new_left_margin
}, this.animation, 'swing', function() {
return _this.div.trigger(jQuery.Event("film_roll:moved"));
});
} else {
this.shuttle.css('left', new_left_margin);
this.div.trigger(jQuery.Event("film_roll:moved"));
}
} else {
this.shuttle.css('left', (wrapper_width - this.width) / 2);
}
return this;
};
FilmRoll.prototype.resize = function() {
var _this = this;
this.clearScroll();
clearTimeout(this.resize_timer);
this.resize_timer = setTimeout(function() {
_this.configureScroll();
_this.moveToIndex(_this.index, 'left');
return _this.div.trigger(jQuery.Event("film_roll:resized"));
}, 200);
return this;
};
FilmRoll.prototype.rotateLeft = function() {
var _css_left, _first_child, _shuttle_left;
_css_left = this.shuttle.css('left');
_shuttle_left = _css_left ? parseInt(_css_left, 10) : 0;
_first_child = this.rotation.shift();
this.rotation.push(_first_child);
this.shuttle.css('left', _shuttle_left + jQuery(_first_child).outerWidth(true));
return this.shuttle.append(this.shuttle.children().first().detach());
};
FilmRoll.prototype.rotateRight = function() {
var _css_left, _last_child, _shuttle_left;
_css_left = this.shuttle.css('left');
_shuttle_left = _css_left ? parseInt(_css_left, 10) : 0;
_last_child = this.rotation.pop();
this.rotation.unshift(_last_child);
this.shuttle.css('left', _shuttle_left - jQuery(_last_child).outerWidth(true));
return this.shuttle.prepend(this.shuttle.children().last().detach());
};
return FilmRoll;
})();
}).call(this);
</script>
<script type="text/javascript">
(function() {
jQuery(function() {
this.film_rolls || (this.film_rolls = []);
this.film_rolls['film_roll_1'] = new FilmRoll({
container: '#film_roll_1',
height: 750
});
//return true;
});
}).call(this);
</script>
</body>
</html>
The customer wants the carousel to be modified not from Custom FIeld which was easier to do and directly from the Elementor.So I tried to create my own widget for that.
after a tutorial on youtube and using information from the official documentation from Elementor
Website and I created the following files.
The filles are situated in boostrap4-child in a folder call custom_widget_elementor after I created this php files in boostrap4-child theme in a folder call custom_widget_elementor.
//my-widgets.php
<?php
class My_Elementor_Widgets {
protected static $instance = null;
public static function get_instance() {
if ( ! isset( static::$instance ) ) {
static::$instance = new static;
}
return static::$instance;
}
protected function __construct() {
require_once('widget1.php');
add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_widgets' ] );
}
public function register_widgets() {
\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \Elementor\My_Widget_1() );
}
}
add_action( 'init', 'my_elementor_init' );
function my_elementor_init() {
My_Elementor_Widgets::get_instance();
}
?>
//widget1.php
<?php
namespace Elementor;
class My_Widget_1 extends Widget_Base {
public function get_name() {
return 'title-subtitle';
}
public function get_title() {
return 'title & sub-title';
}
public function get_icon() {
return 'fa fa-font';
}
public function get_categories() {
return [ 'basic' ];
}
protected function _register_controls() {
$this->start_controls_section(
'section_title',
[
'label' => __( 'Content', 'elementor' ),
]
);
$this->add_control(
'title',
[
'label' => __( 'Title', 'elementor' ),
'label_block' => true,
'type' => Controls_Manager::TEXT,
'placeholder' => __( 'Enter your title', 'elementor' ),
]
);
$this->add_control(
'subtitle',
[
'label' => __( 'Sub-title', 'elementor' ),
'label_block' => true,
'type' => Controls_Manager::TEXT,
'placeholder' => __( 'Enter your sub-title', 'elementor' ),
]
);
$this->add_control(
'link',
[
'label' => __( 'Link', 'elementor' ),
'type' => Controls_Manager::URL,
'placeholder' => __( 'https://your-link.com', 'elementor' ),
'default' => [
'url' => '',
]
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$url = $settings['link']['url'];
echo "<a href='$url'><div class='title'>$settings[title]</div> <div class='subtitle'>$settings[subtitle]</div></a>";
}
protected function _content_template() {
}
}
?>
In child theme in function.php as I see in exemple i write this.
//Function.php
require_once('elementor_custom_catousel/widget1.php');
But this does not work, although I have tried as many examples from the official documentation.that is, when I save, nothing appears in the basic categories in the elementor if i would solve this problem to build a carousel i just need to make html template.
Clearly mentioned on Official Documentation.
First, you need to register "elementor/widgets/widgets_registered" hook with a function. For Themes apply you can apply this way -
//Add Elementor Widgets
add_action('elementor/widgets/widgets_registered', 'widgets_registered');
public function widgets_registered() {
// We check if the Elementor plugin has been installed / activated.
if (defined('ELEMENTOR_PATH') && class_exists('Elementor\Widget_Base')) {
$files_directory = get_template_directory() . '/widgets/*.php';
$files = glob( $files_directory );
foreach($files as $widgets){
require_once $widgets;
}
}
}
Create a directory name "widgets", place all widget files. On this directory all Addons will be registered.
Related
1st time asking here!
I have a MySQL SELECT query and array of results. I have a container and within that container I want to display child div(s) displaying the array result + JQuery to add some nice fadeIn and fadeOut. The issue is the script display some of the array but NEVER all. I have 7 but the page shows 5 sometimes even 2 only and the data seems to be picked randomly.
// Fetch user notifications
$stmt0 = $conn->prepare("SELECT notifid, notification FROM notifications WHERE userid = :userid AND username = :uname;");
$stmt0->execute(['userid' => $userid, 'uname' => $username]);
$results0 = $stmt0->fetchAll();
foreach ($results0 as $row0) {
$notifid = $row0['notifid'];
$notification = $row0['notification'];
$notificationid = substr(sha1(mt_rand()), 0, 8);
echo "<div class='bluenot' id='".$notificationid."'>✔ <b><i>$notification</i></b></div>";
echo '<script>
$(document).ready(function(){
var notifid = ' . $notificationid . ';
$("#notifybox").append($ (notifid) );
setTimeout(function() {
$(notifid).fadeIn("fast", function () { $(this).delay(5000).fadeOut("fast"); });
$(notifid).css("display", "block");});
});
</script>';
CSS :
.notifybox {
width: auto;
height: auto;
position: fixed;
bottom: 0;
left: 15px;
z-index: 1000 important;
}
.bluenot {
width: 400px;
height: 80px;
padding: 20px 40px 20px 40px;
margin-top: 8px;
margin-bottom: 8px;
display: none;
background: #aaa9ff;
border-left: #2933aa 10px solid;
border-radius: 10px;
color: #353759;
text-align: center;
}
SOLVED:
Made a copy of class .bluenot and named it .dbnot then changed the code to :
echo "<div class='dbnot' id='".$notificationid."'>✔ <b><i>$notification</i></b></div>";
echo '<script>
$("#notifybox").append($ (".dbnot") );
$(".dbnot").fadeIn( 800 ).delay( 1000 ).fadeOut( 400 ).$(".dbnot").css("display", "block");
</script>';
Hope this helps anyone who would face the same issue.
You are missing the closing curly brackets for your foreach loop but assuming you have it after your <script> block then i would guess you are over writing the variable "notifid"
I would try to rearrange your logic and if you are deadset on this approach then create the variable "notifid" with a another variable to avoid duplicate declarations
something maybe like
$(document).ready(function(){
var notifid_' . $notificationid . ' = ' . $notificationid . ';
$("#notifybox").append($ (notifid_' . $notificationid . ') );
setTimeout(function() {
$(notifid_' . $notificationid . ').fadeIn("fast", function () { $(this).delay(5000).fadeOut("fast"); });
$(notifid_' . $notificationid . ').css("display", "block");});
});
I have some questions and i hope someone help me to solve it . the questions is:
1) i want to save the drawing polygon into database mysql.
2) each polygon can have different name and insert into database.
3) edit and delete the polygon that was created and save it into database.
in my code i'm using google map tool to draw and give color to each polygon was drawing on google map. so i hope someone help me of code about save all these into database. Thank you
code.
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<style type="text/css">
#map, html, body {
padding: 0;
margin: 0;
height: 100%;
}
#panel {
width: 200px;
font-family: Arial, sans-serif;
font-size: 13px;
float: right;
margin: 10px;
}
#color-palette {
clear: both;
}
.color-button {
width: 14px;
height: 14px;
font-size: 0;
margin: 2px;
float: left;
cursor: pointer;
}
#delete-button {
margin-top: 5px;
}
</style>
<script type="text/javascript">
var drawingManager;
var selectedShape;
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
var selectedColor;
var colorButtons = {};
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
selectColor(shape.get('fillColor') || shape.get('strokeColor'));
}
function deleteSelectedShape() {
if (selectedShape) {
selectedShape.setMap(null);
}
}
function selectColor(color) {
selectedColor = color;
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
}
// Retrieves the current options from the drawing manager and replaces the
// stroke or fill color as appropriate.
var polylineOptions = drawingManager.get('polylineOptions');
polylineOptions.strokeColor = color;
drawingManager.set('polylineOptions', polylineOptions);
var rectangleOptions = drawingManager.get('rectangleOptions');
rectangleOptions.fillColor = color;
drawingManager.set('rectangleOptions', rectangleOptions);
var circleOptions = drawingManager.get('circleOptions');
circleOptions.fillColor = color;
drawingManager.set('circleOptions', circleOptions);
var polygonOptions = drawingManager.get('polygonOptions');
polygonOptions.fillColor = color;
drawingManager.set('polygonOptions', polygonOptions);
}
function setSelectedShapeColor(color) {
if (selectedShape) {
if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
selectedShape.set('strokeColor', color);
} else {
selectedShape.set('fillColor', color);
}
}
}
function makeColorButton(color) {
var button = document.createElement('span');
button.className = 'color-button';
button.style.backgroundColor = color;
google.maps.event.addDomListener(button, 'click', function() {
selectColor(color);
setSelectedShapeColor(color);
});
return button;
}
function buildColorPalette() {
var colorPalette = document.getElementById('color-palette');
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
var colorButton = makeColorButton(currColor);
colorPalette.appendChild(colorButton);
colorButtons[currColor] = colorButton;
}
selectColor(colors[0]);
}
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(22.344, 114.048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true
};
// Creates a drawing manager attached to the map that allows the user to draw
// markers, lines, and shapes.
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
markerOptions: {
draggable: true
},
polylineOptions: {
editable: true
},
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
// Clear the current selection when the drawing mode is changed, or when the
// map is clicked.
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
buildColorPalette();
}
google.maps.event.addDomListener(window, 'load', initialize);
Ok, considering the broad nature to the question and lack of supporting structure / resources you will need to study and adapt if the following does what you need.
The first step would be to create the database structure you need - here I have created two, very basic, mySQL tables in a new database called gm_polygons. I'm not suggesting that these schemas will be sufficient for all the data that you need to store in the tables - such as colour, stroke, title etc etc but will give a starting point.
create table `paths` (
`id` int(10) unsigned not null auto_increment,
`pid` int(10) unsigned not null default '0',
`lat` float not null default '0',
`lng` float not null default '0',
primary key (`id`),
index `pid` (`pid`)
)
collate='utf8_general_ci'
engine=innodb;
create table `polygon` (
`id` int(10) unsigned not null auto_increment,
`name` varchar(50) not null default '0',
primary key (`id`)
)
collate='utf8_general_ci'
engine=innodb;
The php map page. The map loads, in this case centred upon London, and assigns a listener to the map which allows drawing of the polygon ( only polygons in this demo, no circles or polylines etc ) - the form has an input for the name of the poly and a button to send, via ajax, the details to the php script to process.
You could, after generating the db and tables shown here, modify the following byadding relevant details for host,user,password etc and run this to test.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
ob_clean();
/* process the addition of the polygon */
if( !empty( $_POST['name'] ) && !empty( $_POST['path'] ) ){
$dbhost = 'localhost';
$dbuser = 'root';
$dbpwd = 'xxx';
$dbname = 'gm_polygons';
$db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );
$name=$_POST['name'];
$path=json_decode( $_POST['path'] );
/* insert new path */
$sql='insert into polygon set `name`=?';
$stmt=$db->prepare( $sql );
if( !$stmt )exit( 'Error: query 1' );
$stmt->bind_param('s',$name);
$stmt->execute();
$stmt->free_result();
$stmt->close();
/* get the ID for the newly inserted Polygon name */
$id=$db->insert_id;
/* add all the latlng pairs for the polygon */
$sql='insert into `paths` ( `pid`, `lat`, `lng` ) values ( ?, ?, ? )';
$stmt=$db->prepare( $sql );
if( !$stmt )exit( 'Error: query 2' );
$stmt->bind_param( 'idd', $id, $lat, $lng );
foreach( $path as $obj ){
$lat=$obj->lat;
$lng=$obj->lng;
$stmt->execute();
}
$stmt->close();
echo json_encode(
array(
'name'=>$name,
'points'=>count($path)
)
);
}
exit();
}
?>
<html>
<head>
<meta charset='utf-8' />
<title>Google Maps: Storing Polygons in database</title>
<script async defer src='//maps.google.com/maps/api/js?key=APIKEY-gFJ0&callback=initMap®ion=GB&language=en'></script>
<script>
let map;
let div;
let bttn;
let input;
let options;
let centre;
let poly;
let path;
let polypath;
function initMap(){
const ajax=function( url, params, callback ){
let xhr=new XMLHttpRequest();
xhr.onload=function(){
if( this.status==200 && this.readyState==4 )callback( this.response )
};
xhr.open( 'POST', url, true );
xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
xhr.send( buildparams( params ) );
};
const buildparams=function(p){
if( p && typeof( p )==='object' ){
p=Object.keys( p ).map(function( k ){
return typeof( p[ k ] )=='object' ? buildparams( p[ k ] ) : [ encodeURIComponent( k ), encodeURIComponent( p[ k ] ) ].join('=')
}).join('&');
}
return p;
};
const createpoly=function(){
poly=new google.maps.Polygon({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
draggable:true,
editable:true
});
poly.setMap( map );
return poly;
};
centre=new google.maps.LatLng( 51.483719, -0.020037 );
div=document.getElementById('map');
input=document.querySelector('#container > form > input[name="polyname"]');
bttn=document.querySelector('#container > form > input[type="button"]');
options = {
zoom: 15,
center: centre,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: [ 'roadmap', 'terrain', 'satellite', 'hybrid' ]
}
};
map = new google.maps.Map( div, options );
createpoly();
google.maps.event.addListener( map, 'click', e=>{
path=poly.getPath();
path.push( e.latLng );
});
google.maps.event.addListener( poly, 'rightclick', e=>{
poly.setMap( null );
createpoly();
});
bttn.addEventListener('click',e=>{
if( input.value!='' ){
path=poly.getPath();
polypath=[];
for( let i=0; i < path.length; i++ ){
let point=path.getAt( i );
polypath.push( { lat:point.lat(), lng:point.lng() } )
}
let params={
path:JSON.stringify( polypath ),
name:input.value
}
let url=location.href;
let callback=function(r){
console.info( r );
input.value='';
poly.setMap( null );
createpoly();
};
/* send the polygon data */
ajax.call( this, url, params, callback );
}
})
}
</script>
<style>
body{ background:white; }
#container{
width: 90%;
min-height: 90vh;
height:auto;
box-sizing:border-box;
margin: auto;
float:none;
margin:1rem auto;
background:whitesmoke;
padding:1rem;
border:1px solid gray;
display:block;
}
#map {
width: 100%;
height: 80%;
clear:none;
display:block;
z-index:1!important;
background:white;
border:1px solid black;
}
</style>
</head>
<body>
<div id='container'>
<form method='post'>
<input type='text' name='polyname' />
<input type='button' value='Commit' title='Store the polygon' />
</form>
<div id='map'></div>
<div id='data'></div>
</div>
</body>
</html>
I am working on a graph that shows the temperature, date and time. Until now everything is working pretty good, but in order to get the new values from my MySQL database in need to completely refresh my page.
I want to be able to update the graph without pressing the Refresh button.
This is the code:
<?php require($_SERVER['DOCUMENT_ROOT'] . '/assets/php/getTemp.php' ); ?>
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>RPi</title>
</head>
<style>
div.tooltip {
position: absolute;
text-align: center;
width: 120px;
height: 28px;
padding: 3px;
font: 12px sans-serif;
background: lightgrey;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
body { font: 14px Arial;}
path {
stroke: #FF8C00;
stroke-width: 3;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: black;
stroke-width: 2;
shape-rendering: crispEdges;
}
.grid .tick {
stroke: grey;
stroke-opacity: 0.3;
shape-rendering: geometricPrecision;
}
.grid path {
stroke-width: 0;
}
</style>
<body>
<div id="option">
<input name="updateButton"
type="button"
value="Update"
onclick="updateData()"
/>
</div>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 800 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
var formatTime = d3.time.format("%d-%m-%Y %H:%M:%S");
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom");
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var valueline = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.datetime); })
.y(function(d) { return y(d.temperature); });
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
<?php echo "data=".$json_data.";" ?>
data.forEach(function(d) {
d.datetime = parseDate(d.datetime);
d.temperature = +d.temperature;
});
x.domain(d3.extent(data, function(d) { return d.datetime; }));
y.domain([0, d3.max(data, function(d) { return d.temperature; })]);
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) { return x(d.datetime); })
.attr("cy", function(d) { return y(d.temperature); })
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", 1);
div.html(formatTime(d.datetime) + "<br/>" + d.temperature + " ℃")
.style("left", (d3.event.pageX + 16) + "px")
.style("top", (d3.event.pageY + 16) + "px")
.style("position", "absolute");
})
.on("mouseout", function(d) {
div.transition()
.duration(50)
.style("opacity", 0);
});
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
)
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
</script>
</body>
I tried to do this:
function updateData() {
//d3.json("/assets/php/getTemp.php", function(error, data) {
<?php echo "data=".$json_data.";" ?>
data.forEach(function(d) {
d3.select("body").selectAll("svg")
d.datetime = parseDate(d.datetime);
d.temperature = +d.temperature;
});
x.domain(d3.extent(data, function(d) { return d.datetime; }));
y.domain([0, d3.max(data, function(d) { return d.temperature; })]);
var svg = d3.select("body").transition();
svg.select(".line")
.duration(750)
.attr("d", valueline(data));
svg.select(".x.axis")
.duration(750)
.call(xAxis);
svg.select(".y.axis")
.duration(750)
.call(yAxis);
};
but nothing happens, not even an error.
If it matters this is the PHP code used to get the temperatures and time form MySQL:
<?php
$hostname = 'localhost';
$username = 'root';
$password = 'admin';
try {
$dbh = new PDO("mysql:host=$hostname;dbname=temp_database",
$username, $password);
$sth = $dbh->prepare("
SELECT `datetime`, `temperature` FROM `tempLog`
");
$sth->execute();
$result = $sth->fetchAll(PDO::FETCH_ASSOC);
$dbh = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
}
$json_data = json_encode($result);
?>
What i need to do ?
Look into using the d3.json function. This lets you get json from php scripts without reloading the entire page from scratch. It's AJAX stuff, but the d3 helper functions hide the details.
https://github.com/mbostock/d3/wiki/Requests
PS. Remember, it will be an asynchronous call, so see the accepted answer here as well:
JSON output from PHP using d3.json
As to why it doesn't work currently, my hunch*, though there's not enough info to confirm, is that there's no change because it's always the same data, so nothing will change
<?php echo "data=".$json_data.";" ?>
That line^^^ in updateData is evaluated once at the start and then the whole function is plonked into the javascript realm. However many times you then call updateData, that previously generated javascript variable (data={some_json}) won't change without reloading the php page that generated updateData, even if you call that database related php that generates the server side variable.
*could be nonsense, but the bit above the line is still right
I want some suggestions regarding image upload form like facebook and tumblr which can preview multiple images with caption and description fields with each image and if user wants to remove any image before uploading he is able to do that. So please suggest me how to achieve this i have tried this but i am having issue with removing image from input type = file as it is readonly i am facing problem when i am submitting the form on server. Please give me your ideas i really need help i have deadline of this month i am badly stuck in this problem. I am using php and jquery. Note: Please dont suggest any plugins.
Thanks in advance.
I have face same problem like you
now i have found solution for that i think this will be useful for you to solve your problem
<input type="file" id="attachfile" name="replyFiles" multiple> <!--File Element for multiple intput-->
<div id="#filelist"></div>
<script>
var selDiv = "";
var storedFiles = []; //store the object of the all files
document.addEventListener("DOMContentLoaded", init, false);
function init() {
//To add the change listener on over file element
document.querySelector('#attachfile').addEventListener('change', handleFileSelect, false);
//allocate division where you want to print file name
selDiv = document.querySelector("#filelist");
}
//function to handle the file select listenere
function handleFileSelect(e) {
//to check that even single file is selected or not
if(!e.target.files) return;
//for clear the value of the selDiv
selDiv.innerHTML = "";
//get the array of file object in files variable
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
//print if any file is selected previosly
for(var i=0;i<storedFiles.length;i++)
{
selDiv.innerHTML += "<div class='filename'> <span class='removefile' data-file='"+storedFiles[i].name+"'> " + storedFiles[i].name + "</span></div>";
}
filesArr.forEach(function(f) {
//add new selected files into the array list
storedFiles.push(f);
//print new selected files into the given division
selDiv.innerHTML += "<div class='filename'> <span class='removefile' data-file='"+storedFiles[i].name+"'> " + f.name + "</span></div>";
});
//store the array of file in our element this is send to other page by form submit
$("input[name=replyfiles]").val(storedFiles);
}
//This function is used to remove the file form the selection
function removeFile(e) {
var file = $(this).data("file"); //To take the name of the file
for(var i=0;i<storedFiles.length;i++) { //for find the file from the array
if(storedFiles[i].name === file) {
storedFiles.splice(i,1); //remove file from the list
break;
}
}
//now store the list of the all remaining file in our element name which will submit with the form
$("input[name=replyfiles]").val(storedFiles);
$(this).parent().remove();
}
$(document).ready(function(){
$("body").on("click", ".removefile", removeFile);
})
</script>
//I added event handler for the file upload control to access the files properties.
document.addEventListener("DOMContentLoaded", init, false);
//To save an array of attachments
var AttachmentArray = [];
//counter for attachment array
var arrCounter = 0;
//to make sure the error message for number of files will be shown only one time.
var filesCounterAlertStatus = false;
//un ordered list to keep attachments thumbnails
var ul = document.createElement("ul");
ul.className = "thumb-Images";
ul.id = "imgList";
function init() {
//add javascript handlers for the file upload event
document
.querySelector("#files")
.addEventListener("change", handleFileSelect, false);
}
//the handler for file upload event
function handleFileSelect(e) {
//to make sure the user select file/files
if (!e.target.files) return;
//To obtaine a File reference
var files = e.target.files;
// Loop through the FileList and then to render image files as thumbnails.
for (var i = 0, f; (f = files[i]); i++) {
//instantiate a FileReader object to read its contents into memory
var fileReader = new FileReader();
// Closure to capture the file information and apply validation.
fileReader.onload = (function(readerEvt) {
return function(e) {
//Apply the validation rules for attachments upload
ApplyFileValidationRules(readerEvt);
//Render attachments thumbnails.
RenderThumbnail(e, readerEvt);
//Fill the array of attachment
FillAttachmentArray(e, readerEvt);
};
})(f);
// Read in the image file as a data URL.
// readAsDataURL: The result property will contain the file/blob's data encoded as a data URL.
// More info about Data URI scheme https://en.wikipedia.org/wiki/Data_URI_scheme
fileReader.readAsDataURL(f);
}
document
.getElementById("files")
.addEventListener("change", handleFileSelect, false);
}
//To remove attachment once user click on x button
jQuery(function($) {
$("div").on("click", ".img-wrap .close", function() {
var id = $(this)
.closest(".img-wrap")
.find("img")
.data("id");
//to remove the deleted item from array
var elementPos = AttachmentArray.map(function(x) {
return x.FileName;
}).indexOf(id);
if (elementPos !== -1) {
AttachmentArray.splice(elementPos, 1);
}
//to remove image tag
$(this)
.parent()
.find("img")
.not()
.remove();
//to remove div tag that contain the image
$(this)
.parent()
.find("div")
.not()
.remove();
//to remove div tag that contain caption name
$(this)
.parent()
.parent()
.find("div")
.not()
.remove();
//to remove li tag
var lis = document.querySelectorAll("#imgList li");
for (var i = 0; (li = lis[i]); i++) {
if (li.innerHTML == "") {
li.parentNode.removeChild(li);
}
}
});
});
//Apply the validation rules for attachments upload
function ApplyFileValidationRules(readerEvt) {
//To check file type according to upload conditions
if (CheckFileType(readerEvt.type) == false) {
alert(
"The file (" +
readerEvt.name +
") does not match the upload conditions, You can only upload jpg/png/gif files"
);
e.preventDefault();
return;
}
//To check file Size according to upload conditions
if (CheckFileSize(readerEvt.size) == false) {
alert(
"The file (" +
readerEvt.name +
") does not match the upload conditions, The maximum file size for uploads should not exceed 300 KB"
);
e.preventDefault();
return;
}
//To check files count according to upload conditions
if (CheckFilesCount(AttachmentArray) == false) {
if (!filesCounterAlertStatus) {
filesCounterAlertStatus = true;
alert(
"You have added more than 10 files. According to upload conditions you can upload 10 files maximum"
);
}
e.preventDefault();
return;
}
}
//To check file type according to upload conditions
function CheckFileType(fileType) {
if (fileType == "image/jpeg") {
return true;
} else if (fileType == "image/png") {
return true;
} else if (fileType == "image/gif") {
return true;
} else {
return false;
}
return true;
}
//To check file Size according to upload conditions
function CheckFileSize(fileSize) {
if (fileSize < 300000) {
return true;
} else {
return false;
}
return true;
}
//To check files count according to upload conditions
function CheckFilesCount(AttachmentArray) {
//Since AttachmentArray.length return the next available index in the array,
//I have used the loop to get the real length
var len = 0;
for (var i = 0; i < AttachmentArray.length; i++) {
if (AttachmentArray[i] !== undefined) {
len++;
}
}
//To check the length does not exceed 10 files maximum
if (len > 9) {
return false;
} else {
return true;
}
}
//Render attachments thumbnails.
function RenderThumbnail(e, readerEvt) {
var li = document.createElement("li");
ul.appendChild(li);
li.innerHTML = [
'<div class="img-wrap"> <span class="close">×</span>' +
'<img class="thumb" src="',
e.target.result,
'" title="',
escape(readerEvt.name),
'" data-id="',
readerEvt.name,
'"/>' + "</div>"
].join("");
var div = document.createElement("div");
div.className = "FileNameCaptionStyle";
li.appendChild(div);
div.innerHTML = [readerEvt.name].join("");
document.getElementById("Filelist").insertBefore(ul, null);
}
//Fill the array of attachment
function FillAttachmentArray(e, readerEvt) {
AttachmentArray[arrCounter] = {
AttachmentType: 1,
ObjectType: 1,
FileName: readerEvt.name,
FileDescription: "Attachment",
NoteText: "",
MimeType: readerEvt.type,
Content: e.target.result.split("base64,")[1],
FileSizeInBytes: readerEvt.size
};
arrCounter = arrCounter + 1;
}
/*Copied from bootstrap to handle input file multiple*/
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
/*Also */
.btn-success {
border: 1px solid #c5dbec;
background: #d0e5f5;
font-weight: bold;
color: #2e6e9e;
}
/* This is copied from https://github.com/blueimp/jQuery-File-Upload/blob/master/css/jquery.fileupload.css */
.fileinput-button {
position: relative;
overflow: hidden;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
font-size: 200px;
direction: ltr;
cursor: pointer;
}
.thumb {
height: 80px;
width: 100px;
border: 1px solid #000;
}
ul.thumb-Images li {
width: 120px;
float: left;
display: inline-block;
vertical-align: top;
height: 120px;
}
.img-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.img-wrap .close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
background-color: #d0e5f5;
padding: 5px 2px 2px;
color: #000;
font-weight: bolder;
cursor: pointer;
opacity: 0.5;
font-size: 23px;
line-height: 10px;
border-radius: 50%;
}
.img-wrap:hover .close {
opacity: 1;
background-color: #ff0000;
}
.FileNameCaptionStyle {
font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div>
<label style="font-size: 14px;">
<span style='color:navy;font-weight:bold'>Attachment Instructions :</span>
</label>
<!--To give the control a modern look, I have applied a stylesheet in the parent span.-->
<span class="btn btn-success fileinput-button">
<span>Select Attachment</span>
<input type="file" name="files[]" id="files" multiple accept="image/jpeg, image/png, image/gif,"><br />
</span>
<output id="Filelist"></output>
</div>
i have searched feverishly for a solution to my gallery, which doesnt apply the centering function to the image as i click it's respective thumbnail. instead i have to click the thumbnail at least twice for the large image to pop up in the center of the page. the gallery is a jquery/php. i have dynamically loaded my thumbnails using php and link them to the respective large image with the same name using php. I am wondering preloading the large image would help this problem if so how can i preload them seeing as though its an entire directory which has alot of pictures, hence why i didnt manually load them. the script is below:
<?php
error_reporting(0);
/* function: returns files from dir */
function get_files($images_dir,$exts = array('jpeg','gif','png','jpg')) {
$files = array();
if($handle = opendir($images_dir)) {
while(false !== ($file = readdir($handle))) {
$extension = strtolower(get_file_extension($file));
if($extension && in_array($extension,$exts)) {
$files[] = $file;
}
}
closedir($handle);
}
return $files;
}
/* function: returns a file's extension */
function get_file_extension($file_name) {
return substr(strrchr($file_name,'.'),1);
}
$images_dir = 'hftpnyc/thumbs/';
$thumbs_dir = 'hftpnyc/thumbs/thumbnails/';
$thumbs_width = 100;
$images_per_row = 11;
$string = "";
/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
$index = 0;
foreach($image_files as $index=>$file) {
$index++;
$thumbnail_image = $thumbs_dir.$file;
//if(!file_exists($thumbnail_image)) {
//$extension = get_file_extension($thumbnail_image);
//if($extension) {
//make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
//}
//}
error_reporting(0);
echo '<div class="smllpic" style=" padding: 0px; margin: 0px; border: 1px solid black; display: block; width: 100px; height:100px; float: left; "> <img id="thumbs" src="',$thumbnail_image,'" width="100px"/></div>';
if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
}
}
else {
echo '<p>There are no images in this gallery.</p>';
}
?>
<script type="text/javascript">
$(document).ready(function(){
$('.smllpic img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
},function () {
var $this = $(this);
$this.stop().animate({'opacity':'0.7'},200);
});
function centreit(){
//get the height and width of the modal
var modal_height = $('.box').height();
var modal_width = $('.box').width();
//get the height and width of the page
var window_width = $(window).width();
var window_height = $(window).height();
//calculate top and left offset needed for centering
var topp = (window_height - modal_height)/2;
var left = (window_width - modal_width)/2;
//apply new top and left css values
$('.box').css({'top' : topp+'px' , 'left' : left+'px', 'right': left+'px','bottom':topp+'px'});
$('.motown').css({'top' : topp+'px' , 'left' : left+'px', 'right': left+'px','bottom':topp+'px'});
};
$('.lightbox').click(function(e) {
e.preventDefault(); // keeps new page from loading
var thisPicture = $(this).attr('href'); // path to full sized picture,
function getit(){
$('body').append('<div class="backdrop" label="click to close"></div><div class="box" id="centre" ><div class="close">x</div><div style="cursor:pointer; opacity:1;font-family:Agency FB;margin-top:50%; right:-20px;position:fixed;color:white;font-size:50px; z-index:50;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-moz-box-shadow:0px 0px 5px #444444;-webkit-box-shadow:0px 0px 5px #444444;box-shadow:0px 0px 5px #444444;">></div><div style="cursor:pointer; opacity:.35;font-family:Agency FB;margin-top:50%; left:-20px; position:absolute; font-size:50px;color:white; z-index:70;-webkit-border-radius:5px;-moz-border-radius: 5px; border-radius:5px;-moz-box-shadow:0px 0px 5px #444444; -webkit-box-shadow:0px 0px 5px #444444; box-shadow:0px 0px 5px #444444;"><</div><img class="motown" src="'+thisPicture+'" style="max-height:705px;max-width:905px;" ></div>');
};
centreit();
$(window).resize(function(){
$('.box').resize();
$('.motown').resize();
centreit();
});
if ($('.smllpic').click()){
getit();
centreit();
$("html").css("overflow", "hidden");
$('.backdrop').fadeTo(500,0.9);
$('.box').children().fadeIn(1000);
};
//$('.backdrop').css({ 'display' : 'block', opacity : 0});
$('.close').click(function(){
close_box();});
$('.backdrop').click(function(){
close_box();});
function close_box(){
$('.backdrop').remove();
$('.box').remove();
$("html").css("overflow", "");};
});});
</script>
Don't preload the larger images. You are better off using jQuery to display a loading indicator (you can download gif loading indicators from - http://ajaxload.info/) while the image is being loaded. Once the image has been loaded, remove the indicator.