I'm using google maps API to allow the user draw polygons and display the length of every single border using maplabel library. But I have a problem when removing polygon and map label, I don't know how to remove them from Google Map.
My code looks like this:
HTML
<button id="enablePolygon">draw</button>
<button id="removePolygon">remove</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"></script>
<script src="https://cdn.jsdelivr.net/npm/js-map-label#1.0.1/src/maplabel.js"></script>
JS
var labels = [];
var allOverlays = [];
function setSelection(shape) {
selectedShape = shape;
shape.setEditable(true);
}
function initMap() {
var options = {
zoom: 14,
center: {
lat: 52.250618,
lng: 20.9774
}
};
var map = new google.maps.Map(document.getElementById("map"), options);
var drawingManager = new google.maps.drawing.DrawingManager({
polygonOptions: {
draggable: false,
fillColor: "#0e97fa",
fillOpacity: 0.2,
strokeWeight: 2,
strokeColor: "#0e97fa",
editable: true,
zIndex: 1
},
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes:
[
google.maps.drawing.OverlayType.POLYGON,
/* google.maps.drawing.OverlayType.POLYLINE, */
]
},
map: map,
drawingMode: 'polygon'
});
function attachPolygonInfoWindow(polygon) {
if (!polygon.labels) polygon.labels = [];
for (var i = 0; i < polygon.labels.length; i++) {
polygon.labels[i].setMap(null);
}
polygon.labels = [];
var path = polygon.getPath();
var points = path.getArray();
var area = google.maps.geometry.spherical
.computeArea(path.getArray())
.toFixed(0);
var bounds = new google.maps.LatLngBounds();
var i;
for (i = 0; i < points.length; i++) {
bounds.extend(points[i]);
}
var boundsCenter = bounds.getCenter();
var centerLabel = new MapLabel({
map: map,
position: boundsCenter,
fontSize: 14,
align: "center",
zIndex: 3
});
polygon.labels.push(centerLabel);
centerLabel.set("position", bounds.getCenter());
centerLabel.set("text", area + " m2");
if (path.getLength() < 2) return;
for (var i = 0; i < polygon.getPath().getLength(); i++) {
// for each side in path, compute center and length
var start = polygon.getPath().getAt(i);
var end = polygon.getPath().getAt(i < polygon.getPath().getLength() - 1 ? i + 1 : 0);
var sideLength = google.maps.geometry.spherical.computeDistanceBetween(start, end);
console.log(sideLength)
var sideCenter = google.maps.geometry.spherical.interpolate(start, end, 0.5);
/* console.log("sideCenter=" + sideCenter.toUrlValue(6)); */
var sideLabel = new MapLabel({
map: map,
fontSize: 14,
align: "center",
zIndex: 3
});
sideLabel.set("position", sideCenter);
sideLabel.set("text", sideLength.toFixed(2) + "m");
polygon.labels.push(sideLabel);
}
}
function removePolygonInfoWindow() {
for (var i = 0; i < labels.length; i++) {
labels[i].setMap(null);
}
labels = [];
}
google.maps.event.addListener(drawingManager, "overlaycomplete", function(e) {
allOverlays.push(e);
if (e.type != google.maps.drawing.OverlayType.MARKER) {
drawingManager.setDrawingMode(null);
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, "click", function() {
setSelection(newShape);
});
if (newShape.type == "polygon") {
var path = newShape.getPath();
google.maps.event.addListener(path, "insert_at", function() {
attachPolygonInfoWindow(newShape);
});
google.maps.event.addListener(path, "set_at", function() {
attachPolygonInfoWindow(newShape);
});
attachPolygonInfoWindow(newShape);
}
setSelection(newShape);
}
});
var enablePolygon = document.getElementById('enablePolygon');
enablePolygon.addEventListener('click', function(){
drawingManager.setMap(map);
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
});
var removePolygon = document.getElementById('removePolygon');
removePolygon.addEventListener('click', function(){
selectedShape.setMap(null);
drawingManager.setMap(null);
centerLabel.setRemoveLabel(true);
});
}
initMap();
Here is demo
I get a javascript error with the posted code: Uncaught ReferenceError: centerLabel is not defined. Not sure why you are using that variable, you are saving the labels in a property of the polygons labels. To remove them, iterate through that array, calling .setMap(null) on each label.
removePolygon.addEventListener('click', function() {
selectedShape.setMap(null);
drawingManager.setMap(null);
for (var i = 0; i < selectedShape.labels.length; i++) {
selectedShape.labels[i].setMap(null);
}
});
updated fiddle
code snippet:
var labels = [];
var allOverlays = [];
function setSelection(shape) {
selectedShape = shape;
shape.setEditable(true);
}
function initMap() {
var options = {
zoom: 14,
center: {
lat: 52.250618,
lng: 20.9774
}
};
var map = new google.maps.Map(document.getElementById("map"), options);
var drawingManager = new google.maps.drawing.DrawingManager({
polygonOptions: {
draggable: false,
fillColor: "#0e97fa",
fillOpacity: 0.2,
strokeWeight: 2,
strokeColor: "#0e97fa",
editable: true,
zIndex: 1
},
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON,
/* google.maps.drawing.OverlayType.POLYLINE, */
]
},
map: map,
drawingMode: 'polygon'
});
function attachPolygonInfoWindow(polygon) {
if (!polygon.labels) polygon.labels = [];
for (var i = 0; i < polygon.labels.length; i++) {
polygon.labels[i].setMap(null);
}
polygon.labels = [];
var path = polygon.getPath();
var points = path.getArray();
var area = google.maps.geometry.spherical
.computeArea(path.getArray())
.toFixed(0);
var bounds = new google.maps.LatLngBounds();
var i;
for (i = 0; i < points.length; i++) {
bounds.extend(points[i]);
}
var boundsCenter = bounds.getCenter();
var centerLabel = new MapLabel({
map: map,
position: boundsCenter,
fontSize: 14,
align: "center",
zIndex: 3
});
polygon.labels.push(centerLabel);
centerLabel.set("position", bounds.getCenter());
centerLabel.set("text", area + " m2");
if (path.getLength() < 2) return;
for (var i = 0; i < polygon.getPath().getLength(); i++) {
// for each side in path, compute center and length
var start = polygon.getPath().getAt(i);
var end = polygon.getPath().getAt(i < polygon.getPath().getLength() - 1 ? i + 1 : 0);
var sideLength = google.maps.geometry.spherical.computeDistanceBetween(start, end);
console.log(sideLength)
var sideCenter = google.maps.geometry.spherical.interpolate(start, end, 0.5);
/* console.log("sideCenter=" + sideCenter.toUrlValue(6)); */
var sideLabel = new MapLabel({
map: map,
fontSize: 14,
align: "center",
zIndex: 3
});
sideLabel.set("position", sideCenter);
sideLabel.set("text", sideLength.toFixed(2) + "m");
polygon.labels.push(sideLabel);
}
}
function removePolygonInfoWindow() {
for (var i = 0; i < labels.length; i++) {
labels[i].setMap(null);
}
labels = [];
}
google.maps.event.addListener(drawingManager, "overlaycomplete", function(e) {
allOverlays.push(e);
if (e.type != google.maps.drawing.OverlayType.MARKER) {
drawingManager.setDrawingMode(null);
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, "click", function() {
setSelection(newShape);
});
if (newShape.type == "polygon") {
var path = newShape.getPath();
google.maps.event.addListener(path, "insert_at", function() {
attachPolygonInfoWindow(newShape);
});
google.maps.event.addListener(path, "set_at", function() {
attachPolygonInfoWindow(newShape);
});
attachPolygonInfoWindow(newShape);
}
setSelection(newShape);
}
});
var enablePolygon = document.getElementById('enablePolygon');
enablePolygon.addEventListener('click', function() {
drawingManager.setMap(map);
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
});
var removePolygon = document.getElementById('resetPolygon');
removePolygon.addEventListener('click', function() {
selectedShape.setMap(null);
drawingManager.setMap(null);
for (var i = 0; i < selectedShape.labels.length; i++) {
selectedShape.labels[i].setMap(null);
}
});
}
initMap();
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<button id="enablePolygon">draw</button>
<button id="resetPolygon">remove</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"></script>
<script src="https://cdn.jsdelivr.net/npm/js-map-label#1.0.1/src/maplabel.js"></script>
Default icons not showing for MarkerCluster plugin after using IconCreateFunction.
I want to use the default icons for the plugin but when using attached code I loose all the icons functions, I only get the numbers with no icons and if I activate the "childCount" I get one type of circle with the numbers offcenter within the icon. The markers has already been clustered and I want to add this value to the markercluster that is why I'm using the IconCreateFuncton so the numbers on the map shows correctly but I have lost all the icons and its beautiful functions... what is missing?
Result below using "var childCount"
$.getJSON("../test/test.geojson", function(json) {
geoLayer = L.geoJson(json, {
pointToLayer: function(feature, latlng) {
var log_p = feature.properties.log_p;
var marker;
if (log_p > 0){
marker = new L.shapeMarker(latlng, {radius: log_p*25, fillColor: '#2b83ba', fillOpacity: 0.5, color: '#000000', weight: 1, shape: 'circle'});
}
else {
marker = null
}
return marker;
},
onEachFeature: function(feature, layer) {
var popupText = "Amount per day: " + '<b>' + feature.properties.total + '</b>';
layer.bindPopup(popupText, {
closeButton: true,
offset: L.point(0, -20)
});
layer.on('click', function() {
layer.openPopup();
});
},
});
var markers = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
var children = cluster.getAllChildMarkers();
var sum = 0;
for (var i = 0; i < children.length; i++) {
sum += children[i].feature.properties.total;
}
/*
var childCount = cluster.getAllChildMarkers();
var c = ' marker-cluster-';
if (childCount < 10) {
c += 'small';
} else if (childCount < 500) {
c += 'medium';
} else {
c += 'large';
}
*/
return new L.DivIcon({ html: '<b>' + sum + '</b>', className: 'marker-cluster'/* + c */, iconSize: new L.Point(40, 40) });
}
});
markers.addLayer(geoLayer)
map.addLayer(markers);
});
Markercluster icons, styles and functions are lost
I manage to solve the problem, a few lines of code was missing. I added them to the original JavaScript code as follows.
$.getJSON("../test/test.geojson", function(json) {
geoLayer = L.geoJson(json, {
pointToLayer: function(feature, latlng) {
var log_p = feature.properties.log_p;
var marker;
if (log_p > 0) {
marker = new L.shapeMarker(latlng, {
radius: log_p * 25,
fillColor: '#2b83ba',
fillOpacity: 0.5,
color: '#000000',
weight: 1,
shape: 'circle'
});
} else {
marker = null
}
return marker;
},
onEachFeature: function(feature, layer) {
var popupText = "Amount per day: " + '<b>' + feature.properties.total + '</b>';
layer.bindPopup(popupText, {
closeButton: true,
offset: L.point(0, -20)
});
layer.on('click', function() {
layer.openPopup();
});
},
});
var clusters = new L.MarkerClusterGroup({
maxClusterRadius: 125,
iconCreateFunction: function(cluster) {
var children = cluster.getAllChildMarkers();
var sum = 0;
for (var i = 0; i < children.length; i++) {
sum += children[i].feature.properties.total;
}
var childCount = cluster.getChildCount()
var c = ' marker-cluster-';
if (childCount + sum <= 50) {
c += 'small';
} else if (childCount + sum <= 250) {
c += 'medium';
} else {
c += 'large';
}
return new L.DivIcon({
html: '<div><span>' + sum + '</span></div>',
className: 'marker-cluster marker-cluster-' + c,
iconSize: new L.Point(40, 40)
});
},
});
clusters.addLayer(geoLayer)
map.addLayer(clusters);
});
and thank you once again for your expert support. I have a rather nice implementation of flot, that has one very unfortunate bug. The plot routine works in a loop, so it creates as many plots as there are data files, that pass muster, in the directory. If there is only one data file, then only one plot, the resulting flot plot works fine and the check boxes turn the lines on and off as expected. If I have more than one data file and hence more than one flot plot.. only the bottom one seems to work correctly, the remainder lock up after either one toggle or none.
Can someone give me an idea how to create the flot plots so they do not interfere? I have read elsewhere that the function name does not need to be different, but have not verified this, and I did change the labels, but this added additional weirdness.
Quite a long code.. but it gives you most of what I know...
The first section here actually builds the data sets for flot... then the rest creates the plot...
<script type='text/javascript'>//<![CDATA[
$(function(){
var results = [
<?php
$downsample = 5;
for($k=0;$k<2; $k++){
//$k =0 is Left, $k = 1 is right
if ($k==0){
$side = "L";
$offset = 1;
} elseif ($k==1) {
$side = "R";
$offset = 0;
}
for ($m = 1; $m <= count($trackdata)-1; $m++){
echo "\n{\n\"label\": \"".$m.$side."\",\n"; //echo "\n{\n\"label\": \"".$m." ".$side."\",\n";
echo "\"data\": [";
for ($n=1;$n<=count($PSD[$m*3-2]);$n=$n+$downsample){
$tmp = "[".$PSD[$m*3-2][$n].",".$PSD[$m*3-$offset][$n]."]";
echo $tmp;
if ($n > count($PSD[$m*3-2])-$downsample){
echo "]}";
} else {
echo ",";
}
}
if ($m <> count($trackdata)-1){
echo ",";
} else if ($k<1){
echo ",";
}
}
}
echo "];";
?>
var options = {
legend: {
show: true
},
series: {
points: {
show: false
},
lines: {
show: true
}
},
grid: {
hoverable: true
},
xaxis: {
},
yaxis: {
}
};
var i = 0;
var track = 0;
choiceContainer = $("#labeler<?php echo $i ?>");
var table = $('<table />');
var row = $('<tr/>');
var cell = $('<td width=\"100\"/>');
var temp = $(table);
$.each(results, function(key, val) {
track = track + 1;
val.color = i;
++i;
l = val.label;
if (track == 1){
temp.append(row);
row.append(cell);
cell.append('Left Channel');
} else if(track == <?php echo $tracks ?>){
row = $('<tr/>');
temp.append(row);
cell = $('<td width=\"100\">');
row.append(cell);
cell.append('Right Channel');
} //else if ((track == 7) or (track == 14) or (track == 21) or (track == 28) or (track == 35)){
//}
cell = $('<td width=\"60\"/>');
row.append(cell);
var bar = $('<div style=\"width:18px; white-space:nowrap; float:left\"><bar />');
cell.append(bar);
var inp = $('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked">');
cell.append(inp);
var bits = $('<label>', {
text: l,
'for': l
});
cell.append(bits);
choiceContainer.append(temp);
});
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function() {
var key = this.name;
for (var i = 0; i < results.length; i++) {
if (results[i].label === key) {
data.push(results[i]);
return true;
}
}
});
$.plot($("#placeholder<?php echo $i ?>"), data, options);
}
var previousPoint = null;
$("#placeholder<?php echo $i ?>").bind("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " $" + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid #fdd',
padding: '2px',
backgroundColor: '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
plotAccordingToChoices();
choiceContainer.find("input").change(plotAccordingToChoices);
$('.legendColorBox > div').each(function(i){
$(this).clone().prependTo(choiceContainer.find("bar").eq(i));
});
});//]]>
</script>
Okay.. so the dust settled and I did sort out my issue, along with cleaning up a few things. First of all, I created a function for the plot routine. This uncovered the issue I was having, where I was reusing the same variables for the divs into which the data was going, hence the mixed up results. By creating the function, and then driving the function with custom variables for each iteration, the plots operate independently as they should. – Mark
function flotplot(results, choiceContainer, plotholder, numtracks, legendcontainer){
// pass in results, choicecontainer, plotholder
// results = data
// choiceContainer = $("#labeler1");
// plotholder = $("#placeholder0");
var options = {
legend: {
show: true,
container: legendcontainer,
noColumns: 2,
sorted: false
},
series: {
points: {
show: false
},
lines: {
show: true
}
},
grid: {
hoverable: true
},
xaxes: [{
axisLabel: 'Frequency (Hz)',
}],
yaxes: [{
axisLabel: 'Power (dB)',
}],
crosshair: {
mode: "xy",
color: 001,
lineWidth: .5
}
};
var i = 0;
var track = 0;
var table = $('<table />');
var row = $('<tr/>');
var cell = $('<td width=\"100\"/>');
var temp = $(table);
$.each(results, function(key, val) {
track = track + 1;
val.color = i;
++i;
l = val.label;
if (track == 1){
temp.append(row);
row.append(cell);
cell.append('Left Channel');
} else if(track == numtracks){
row = $('<tr/>');
temp.append(row);
cell = $('<td width=\"100\">');
row.append(cell);
cell.append('Right Channel');
} //else if ((track == 7) or (track == 14) or (track == 21) or (track == 28) or (track == 35)){
//}
cell = $('<td width=\"70\"/>');
row.append(cell);
var bar = $('<div style=\"width:18px; white-space:nowrap; float:left\"><bar />');
cell.append(bar);
var inp = $('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked">');
cell.append(inp);
var bits = $('<label>', {
text: l,
'for': l
});
cell.append(bits);
choiceContainer.append(temp);
});
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function() {
var key = this.name;
for (var i = 0; i < results.length; i++) {
if (results[i].label === key) {
data.push(results[i]);
return true;
}
}
});
$.plot(plotholder, data, options);
}
var previousPoint = null;
plotholder.bind("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " " + y + "dB");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid #fdd',
padding: '2px',
backgroundColor: '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
plotAccordingToChoices();
choiceContainer.find("input").change(plotAccordingToChoices);
$('.legendColorBox > div').each(function(i){
$(this).clone().prependTo(choiceContainer.find("bar").eq(i));
});
};//]]>
Here is the structure into which it writes:
echo "<div id=\"placeholder".$i."\" class=\"loading\" style=\"width:600px;height:300px;display: inline; position: relative; float: left\"></div>";
echo "<div id=\"legendholder".$i."\" class=\"loading\" style=\"width:200px; height:300px; display: inline; position: relative; float: left\"></div>";
echo "<div id=\"picker1\" style=\"clear: both\"><p id=\"choices".$i."\">Show the following Tracks:</p></div>";
echo "<div id=\"labeler".$i."\"></div>";
I've installed Nivo Slider using the code from the demo included in the free download.
All of the images I am including in the slider are 800 pixels wide.
However, they are being resized to 1440 pixels wide. Extra code is being inserted:
<img src="images/bar.jpg" data-thumb="images/bar.jpg" alt="" title="" style="display: none; width: 1440px;">
I have searched the CSS and JS and can find no mention of 1440.
Where is this width being set?
Nivo Slider is responsive by default, if you want to limit the sliders width, use the below class in your CSS
.slider-wrapper.theme-default {
width: 800px; /* Desired width */
}
The above will work if you are using default theme of nivo slider, if you are using some other theme, than simply change the .theme-default to theme specific class which is assigned to the slider wrapper.
Use my custom nivo script code
/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
(function($) {
var NivoSlider = function(element, options) {
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
var vars = {
currentSlide : 0,
currentImage : '',
totalSlides : 0,
randAnim : '',
running : false,
paused : false,
stop : false
};
var slider = $(element);
slider.data('nivo:vars', vars);
slider.css('position', 'relative');
slider.addClass('nivoSlider');
var kids = slider.children();
kids.each(function() {
var child = $(this);
var link = '';
if (!child.is('img')) {
if (child.is('a')) {
child.addClass('nivo-imageLink');
link = child;
}
child = child.find('img:first');
}
var childWidth = child.width();
if (childWidth == 0)
childWidth = child.attr('width');
var childHeight = child.height();
if (childHeight == 0)
childHeight = child.attr('height');
if (childWidth > slider.width()) {
slider.width(childWidth);
}
if (childHeight > slider.height()) {
slider.height(childHeight);
}
if (link != '') {
link.css('display', 'none');
}
child.css('display', 'none');
vars.totalSlides++;
});
if (settings.startSlide > 0) {
if (settings.startSlide >= vars.totalSlides)
settings.startSlide = vars.totalSlides - 1;
vars.currentSlide = settings.startSlide;
}
if ($(kids[vars.currentSlide]).is('img')) {
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
if ($(kids[vars.currentSlide]).is('a')) {
$(kids[vars.currentSlide]).css('display', 'block');
}
slider.css({
'background' : 'url("' + vars.currentImage.attr('src') + '") no-repeat',
'background-size' : settings.backgroundSize
});
slider.append($('<div class="nivo-caption"><p></p></div>').css({
display : 'none',
opacity : settings.captionOpacity
}));
var processCaption = function(settings) {
var nivoCaption = $('.nivo-caption', slider);
if (vars.currentImage.attr('title') != '') {
var title = vars.currentImage.attr('title');
if (title.substr(0, 1) == '#')
title = $(title).html();
if (nivoCaption.css('display') == 'block') {
nivoCaption.find('p').fadeOut(settings.animSpeed, function() {
$(this).html(title);
$(this).fadeIn(settings.animSpeed);
});
} else {
nivoCaption.find('p').html(title);
}
nivoCaption.fadeIn(settings.animSpeed);
} else {
nivoCaption.fadeOut(settings.animSpeed);
}
}
processCaption(settings);
var timer = 0;
if (!settings.manualAdvance && kids.length > 1) {
timer = setInterval(function() {
nivoRun(slider, kids, settings, false);
}, settings.pauseTime);
}
if (settings.directionNav) {
slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + settings.prevText + '</a><a class="nivo-nextNav">' + settings.nextText + '</a></div>');
if (settings.directionNavHide) {
$('.nivo-directionNav', slider).hide();
slider.hover(function() {
$('.nivo-directionNav', slider).show();
}, function() {
$('.nivo-directionNav', slider).hide();
});
}
$('a.nivo-prevNav', slider).live('click', function() {
if (vars.running)
return false;
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
nivoRun(slider, kids, settings, 'prev');
});
$('a.nivo-nextNav', slider).live('click', function() {
if (vars.running)
return false;
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
});
}
if (settings.controlNav) {
var nivoControl = $('<div class="nivo-controlNav"></div>');
slider.append(nivoControl);
for (var i = 0; i < kids.length; i++) {
if (settings.controlNavThumbs) {
var child = kids.eq(i);
if (!child.is('img')) {
child = child.find('img:first');
}
if (settings.controlNavThumbsFromRel) {
nivoControl.append('<a class="nivo-control" rel="' + i + '"><img src="' + child.attr('rel') + '" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="' + i + '"><img src="' + child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) + '" alt="" /></a>');
}
} else {
nivoControl.append('<a class="nivo-control" rel="' + i + '">' + (i + 1) + '</a>');
}
}
$('.nivo-controlNav a:eq(' + vars.currentSlide + ')', slider).addClass('active');
$('.nivo-controlNav a', slider).live('click', function() {
if (vars.running)
return false;
if ($(this).hasClass('active'))
return false;
clearInterval(timer);
timer = '';
slider.css({
'background' : 'url("' + vars.currentImage.attr('src') + '") no-repeat',
'background-size' : settings.backgroundSize
});
vars.currentSlide = $(this).attr('rel') - 1;
nivoRun(slider, kids, settings, 'control');
});
}
if (settings.keyboardNav) {
$(window).keypress(function(event) {
if (event.keyCode == '37') {
if (vars.running)
return false;
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
nivoRun(slider, kids, settings, 'prev');
}
if (event.keyCode == '39') {
if (vars.running)
return false;
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
}
});
}
if (settings.pauseOnHover) {
slider.hover(function() {
vars.paused = true;
clearInterval(timer);
timer = '';
}, function() {
vars.paused = false;
if (timer == '' && !settings.manualAdvance) {
timer = setInterval(function() {
nivoRun(slider, kids, settings, false);
}, settings.pauseTime);
}
});
}
slider.bind('nivo:animFinished', function() {
vars.running = false;
$(kids).each(function() {
if ($(this).is('a')) {
$(this).css('display', 'none');
}
});
if ($(kids[vars.currentSlide]).is('a')) {
$(kids[vars.currentSlide]).css('display', 'block');
}
if (timer == '' && !vars.paused && !settings.manualAdvance) {
timer = setInterval(function() {
nivoRun(slider, kids, settings, false);
}, settings.pauseTime);
}
settings.afterChange.call(this);
});
var createSlices = function(slider, settings, vars) {
for (var i = 0; i < settings.slices; i++) {
var sliceWidth = Math.round(slider.width() / settings.slices);
if (i == settings.slices - 1) {
slider.append($('<div class="nivo-slice"></div>').css({
left : (sliceWidth * i) + 'px',
width : (slider.width() - (sliceWidth * i)) + 'px',
height : '0px',
opacity : '0',
background : 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((sliceWidth + (i * sliceWidth)) - sliceWidth) + 'px 0%',
'background-size': settings.backgroundSize
}));
} else {
slider.append($('<div class="nivo-slice"></div>').css({
left : (sliceWidth * i) + 'px',
width : sliceWidth + 'px',
height : '0px',
opacity : '0',
background : 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((sliceWidth + (i * sliceWidth)) - sliceWidth) + 'px 0%',
'background-size': settings.backgroundSize
}));
}
}
}
var createBoxes = function(slider, settings, vars) {
var boxWidth = Math.round(slider.width() / settings.boxCols);
var boxHeight = Math.round(slider.height() / settings.boxRows);
for (var rows = 0; rows < settings.boxRows; rows++) {
for (var cols = 0; cols < settings.boxCols; cols++) {
if (cols == settings.boxCols - 1) {
slider.append($('<div class="nivo-box"></div>').css({
opacity : 0,
left : (boxWidth * cols) + 'px',
top : (boxHeight * rows) + 'px',
width : (slider.width() - (boxWidth * cols)) + 'px',
height : boxHeight + 'px',
background : 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((boxWidth + (cols * boxWidth)) - boxWidth) + 'px -' + ((boxHeight + (rows * boxHeight)) - boxHeight) + 'px',
'background-size': settings.backgroundSize
}));
} else {
slider.append($('<div class="nivo-box"></div>').css({
opacity : 0,
left : (boxWidth * cols) + 'px',
top : (boxHeight * rows) + 'px',
width : boxWidth + 'px',
height : boxHeight + 'px',
background : 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((boxWidth + (cols * boxWidth)) - boxWidth) + 'px -' + ((boxHeight + (rows * boxHeight)) - boxHeight) + 'px',
'background-size': settings.backgroundSize
}));
}
}
}
}
var nivoRun = function(slider, kids, settings, nudge) {
var vars = slider.data('nivo:vars');
if (vars && (vars.currentSlide == vars.totalSlides - 1)) {
settings.lastSlide.call(this);
}
if ((!vars || vars.stop) && !nudge)
return false;
settings.beforeChange.call(this);
if (!nudge) {
slider.css({'background':'url("' + vars.currentImage.attr('src') + '") no-repeat','background-size': settings.backgroundSize });
} else {
if (nudge == 'prev') {
slider.css({'background':'url("' + vars.currentImage.attr('src') + '") no-repeat','background-size': settings.backgroundSize });
}
if (nudge == 'next') {
slider.css({'background':'url("' + vars.currentImage.attr('src') + '") no-repeat','background-size': settings.backgroundSize });
}
}
vars.currentSlide++;
if (vars.currentSlide == vars.totalSlides) {
vars.currentSlide = 0;
settings.slideshowEnd.call(this);
}
if (vars.currentSlide < 0)
vars.currentSlide = (vars.totalSlides - 1);
if ($(kids[vars.currentSlide]).is('img')) {
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
if (settings.controlNav) {
$('.nivo-controlNav a', slider).removeClass('active');
$('.nivo-controlNav a:eq(' + vars.currentSlide + ')', slider).addClass('active');
}
processCaption(settings);
$('.nivo-slice', slider).remove();
$('.nivo-box', slider).remove();
if (settings.effect == 'random') {
var anims = new Array('sliceDownRight', 'sliceDownLeft', 'sliceUpRight', 'sliceUpLeft', 'sliceUpDown', 'sliceUpDownLeft', 'fold', 'fade', 'boxRandom', 'boxRain', 'boxRainReverse', 'boxRainGrow', 'boxRainGrowReverse');
vars.randAnim = anims[Math.floor(Math.random() * (anims.length + 1))];
if (vars.randAnim == undefined)
vars.randAnim = 'fade';
}
if (settings.effect.indexOf(',') != -1) {
var anims = settings.effect.split(',');
vars.randAnim = anims[Math.floor(Math.random() * (anims.length))];
if (vars.randAnim == undefined)
vars.randAnim = 'fade';
}
vars.running = true;
if (settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' || settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') {
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var slices = $('.nivo-slice', slider);
if (settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft')
slices = $('.nivo-slice', slider)._reverse();
slices.each(function() {
var slice = $(this);
slice.css({
'top' : '0px'
});
if (i == settings.slices - 1) {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + timeBuff));
} else {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if (settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' || settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') {
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var slices = $('.nivo-slice', slider);
if (settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft')
slices = $('.nivo-slice', slider)._reverse();
slices.each(function() {
var slice = $(this);
slice.css({
'bottom' : '0px'
});
if (i == settings.slices - 1) {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + timeBuff));
} else {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if (settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' || settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') {
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var v = 0;
var slices = $('.nivo-slice', slider);
if (settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft')
slices = $('.nivo-slice', slider)._reverse();
slices.each(function() {
var slice = $(this);
if (i == 0) {
slice.css('top', '0px');
i++;
} else {
slice.css('bottom', '0px');
i = 0;
}
if (v == settings.slices - 1) {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + timeBuff));
} else {
setTimeout(function() {
slice.animate({
height : '100%',
opacity : '1.0'
}, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
v++;
});
} else if (settings.effect == 'fold' || vars.randAnim == 'fold') {
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
$('.nivo-slice', slider).each(function() {
var slice = $(this);
var origWidth = slice.width();
slice.css({
top : '0px',
height : '100%',
width : '0px'
});
if (i == settings.slices - 1) {
setTimeout(function() {
slice.animate({
width : origWidth,
opacity : '1.0'
}, settings.animSpeed, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + timeBuff));
} else {
setTimeout(function() {
slice.animate({
width : origWidth,
opacity : '1.0'
}, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if (settings.effect == 'fade' || vars.randAnim == 'fade') {
createSlices(slider, settings, vars);
var firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'height' : '100%',
'width' : slider.width() + 'px'
});
firstSlice.animate({
opacity : '1.0'
}, (settings.animSpeed * 2), '', function() {
slider.trigger('nivo:animFinished');
});
} else if (settings.effect == 'slideInRight' || vars.randAnim == 'slideInRight') {
createSlices(slider, settings, vars);
var firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'height' : '100%',
'width' : '0px',
'opacity' : '1'
});
firstSlice.animate({
width : slider.width() + 'px'
}, (settings.animSpeed * 2), '', function() {
slider.trigger('nivo:animFinished');
});
} else if (settings.effect == 'slideInLeft' || vars.randAnim == 'slideInLeft') {
createSlices(slider, settings, vars);
var firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'height' : '100%',
'width' : '0px',
'opacity' : '1',
'left' : '',
'right' : '0px'
});
firstSlice.animate({
width : slider.width() + 'px'
}, (settings.animSpeed * 2), '', function() {
firstSlice.css({
'left' : '0px',
'right' : ''
});
slider.trigger('nivo:animFinished');
});
} else if (settings.effect == 'boxRandom' || vars.randAnim == 'boxRandom') {
createBoxes(slider, settings, vars);
var totalBoxes = settings.boxCols * settings.boxRows;
var i = 0;
var timeBuff = 0;
var boxes = shuffle($('.nivo-box', slider));
boxes.each(function() {
var box = $(this);
if (i == totalBoxes - 1) {
setTimeout(function() {
box.animate({
opacity : '1'
}, settings.animSpeed, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + timeBuff));
} else {
setTimeout(function() {
box.animate({
opacity : '1'
}, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 20;
i++;
});
} else if (settings.effect == 'boxRain' || vars.randAnim == 'boxRain' || settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' || settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse') {
createBoxes(slider, settings, vars);
var totalBoxes = settings.boxCols * settings.boxRows;
var i = 0;
var timeBuff = 0;
var rowIndex = 0;
var colIndex = 0;
var box2Darr = new Array();
box2Darr[rowIndex] = new Array();
var boxes = $('.nivo-box', slider);
if (settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse') {
boxes = $('.nivo-box', slider)._reverse();
}
boxes.each(function() {
box2Darr[rowIndex][colIndex] = $(this);
colIndex++;
if (colIndex == settings.boxCols) {
rowIndex++;
colIndex = 0;
box2Darr[rowIndex] = new Array();
}
});
for (var cols = 0; cols < (settings.boxCols * 2); cols++) {
var prevCol = cols;
for (var rows = 0; rows < settings.boxRows; rows++) {
if (prevCol >= 0 && prevCol < settings.boxCols) {
(function(row, col, time, i, totalBoxes) {
var box = $(box2Darr[row][col]);
var w = box.width();
var h = box.height();
if (settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse') {
box.width(0).height(0);
}
if (i == totalBoxes - 1) {
setTimeout(function() {
box.animate({
opacity : '1',
width : w,
height : h
}, settings.animSpeed / 1.3, '', function() {
slider.trigger('nivo:animFinished');
});
}, (100 + time));
} else {
setTimeout(function() {
box.animate({
opacity : '1',
width : w,
height : h
}, settings.animSpeed / 1.3);
}, (100 + time));
}
})(rows, prevCol, timeBuff, i, totalBoxes);
i++;
}
prevCol--;
}
timeBuff += 100;
}
}
}
var shuffle = function(arr) {
for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
var trace = function(msg) {
if (this.console && typeof console.log != "undefined")
console.log(msg);
}
this.stop = function() {
if (!$(element).data('nivo:vars').stop) {
$(element).data('nivo:vars').stop = true;
trace('Stop Slider');
}
}
this.start = function() {
if ($(element).data('nivo:vars').stop) {
$(element).data('nivo:vars').stop = false;
trace('Start Slider');
}
}
settings.afterLoad.call(this);
return this;
};
$.fn.nivoSlider = function(options) {
return this.each(function(key, value) {
var element = $(this);
if (element.data('nivoslider'))
return element.data('nivoslider');
var nivoslider = new NivoSlider(this, options);
element.data('nivoslider', nivoslider);
});
};
$.fn.nivoSlider.defaults = {
backgroundSize:'',
effect : 'random',
slices : 15,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 3000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
controlNavThumbs : false,
controlNavThumbsFromRel : false,
controlNavThumbsSearch : '.jpg',
controlNavThumbsReplace : '_thumb.jpg',
keyboardNav : true,
pauseOnHover : true,
manualAdvance : false,
captionOpacity : 0.8,
prevText : 'Prev',
nextText : 'Next',
beforeChange : function() {
},
afterChange : function() {
},
slideshowEnd : function() {
},
lastSlide : function() {
},
afterLoad : function() {
}
};
$.fn._reverse = [].reverse;
})(jQuery);
When you initial nivoSlide pass my new parameter backgroundSize:'your width size px your height size px';
Example:
$('#slider').nivoSlider({
backgroundSize:'687px 400px',
effect: 'random',
animSpeed: 500,
pauseTime: 3000,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true});
});