make background image to link - javascript

i am using this jquery iviewer
i want to link these image thumble to another link.
can i use image map for this or any other way to make image thumble to link. these are really add with full image.

you can add this in between your script tag:
var objects = [{x: 0, y: 800, r: 800, isInObject: isInCircle, title: 'whole image', getCenter: getRectCenter }]
note: set y and r to cover your image.
And this when you set defaults for iviewer:
onClick: function(coords) {
var object = whereIam(coords.x, coords.y);
if (object)
window.location="cart.html";
}
whereIam is a default function available with iviewer.

Related

How to style images in highcharts flags?

In my chart, I show the user pictures for their comment date, so the users can read the comments in a tooltip using these icons. It seems like soundcloud charts. I did it using flags type and I set the shape variables as user picture url for each data item.
But I want to add also colorized border for each icons. I know, there is lineWidth and lineColor config in flags type but it doesn't work with images, it works only with default shapes flag, circlepin or squarepin.
I tried to use shape as flag and to add user images as background image, but It doesn't work.
In SVG you can not set border for the images, you need to create rect around the image: http://jsfiddle.net/xuL76rkL/1/
For example you can use load and redraw events to manage those rects, code:
var H = Highcharts;
function drawBorder() {
var chart = this;
H.each(chart.series[1].points, function(p) {
var bbox,
rect,
fontSize = 13, // it's used as default font size offet, even for the images
dim = 32; //width and height for the image
if(p.graphic) {
if(p.rectangle) {
p.rectangle.destroy();
}
bbox = p.graphic.getBBox();
rect = chart.renderer.rect(p.plotX - dim/2, p.plotY - dim/2 - fontSize, dim, dim).attr({
"stroke": "black",
"stroke-width": 2,
"fill": "transparent"
}).add(chart.series[1].markerGroup);
p.rectangle = rect;
}
});
}
$('#container').highcharts('StockChart', {
chart: {
events: {
load: drawBorder,
redraw: drawBorder
}
},
...
});
You can set an image with the shape option:
Example: shape: "url(/assets/my_image.svg)"
Documentation available here: https://api.highcharts.com/highstock/series.flags.shape

d3.js find the path of a given object

I'm looking to see if there's a utility way to take a given svg element and find the corresponding path. The intent is to be able to trace an outline of the object similar to http://jsfiddle.net/Lqmzztw1/. I'd like to use a technique illustrated http://bl.ocks.org/duopixel/4063326 here since it seems to be close to what I want. I'm looking for this to be able to trace the outline of any polygon/shape/circle, etc. Is there a way to convert a given SVG element to its corresponding path in d3?
fiddle code
var svg = d3.selectAll('div').append('svg').attr({
height:500,
width: 500
});
var box = svg.append('rect').attr({
x: 20,
y: 20,
height:50,
width:50,
fill: 'blue'
});
box.on('click',function(){
var cornerBox = svg.append('rect').attr({
x:15,
y:15,
width:10,
height:10,
fill:'orange'
});
cornerBox.transition().attr({
x: 50+15
}).duration(150).transition().attr({
y: 50+15
}).transition().attr({
x:15
}).duration(150).transition().attr({
y:15
}).duration(150);
});

How to setup interactive and non-interactive objects in PhysicsJS?

I am trying to setup a seesaw with userdragable objects. After world creation in PhysicsJS, mouse drag interaction is added by
world.add( Physics.behavior('interactive', { el: renderer.el }) );
which works fine. Subsequently, I want some added objects to be draggable (the box objects). But the lever should not be draggable, but it should interact with the boxes. So the lever should rotate according to a replaced box. The fulcurm is placed in a noninteractive way by setting its treatment property to static:
world.add( Physics.body('convex-polygon', {
name: 'fulcrum',
x: 250,
y: 490,
treatment: 'static',
restitution: 0.0,
vertices: [
{x: 0, y: 0},
{x: 30, y: -40},
{x: 60, y: 0},
]
}) );
How can objects be interacting with each other, but only some are userdragable?
A fiddle is available at: http://jsfiddle.net/YM8K8/
At the moment this is not supported... but it should be. I've added it as a bug on github. https://github.com/wellcaffeinated/PhysicsJS/issues/101
In the meantime, if you want, you can create a new "interactive" behavior by copying and pasting and just change the name.
Physics.behavior('interactive-custom', function( parent ){ ...
Then in the grab function just make this small addition:
body = self._world.findOne({ $at: new Physics.vector( pos.x, pos.y ) });
Change to:
body = self._world.findOne({ $at: new Physics.vector( pos.x, pos.y ), $in: self.getTargets() });
What that does is when it's searching for the body at the mouse coordinates, it will also check to see if that body is in the set that you've applied this behavior to.
Then instead of adding the behavior before the bodies in your fiddle, add it at the end, and do this:
world.add(
Physics.behavior('interactive-custom', { el: renderer.el })
.applyTo(world.find({ name: 'box' }))
);
This will use world.find to find the bodies currently in the world that have the "box" name. Then it sends that array of bodies to the behavior and tells the behavior to only apply itself to those bodies.
Here's the modified fiddle:
http://jsfiddle.net/wellcaffeinated/YM8K8/1/

Applying style for YouTube Popup Player's popup Window

I had used Youtube Popup player for video player in my webapplication, iam trying to change the styles of popup window..but iam not able to do it..i had found cssClass property for applying styles.. here is the link for youtube popup player..http://lab.abhinayrathore.com/jquery_youtube/
How can i resolve it..
You can follow Arunkumar answer if you want to change the defaults of the plugin, so that you don't have to set the options everytime you want to initialize the plugin.
Or, you can set specific properties to each element with the plugin assigned, like this:
$(function () {
var options = {
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};
$("a.youtube").YouTubePopup(options);
});
DEMO
Or, instead of creating a variable options, you could just do something like this:
$(function () {
$("a.youtube").YouTubePopup({
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};);
});
Hope I could make it more understandable to you!
customize Popup using script
like
$(function () {
$.fn.YouTubePopup.defaults.fullscreen = 0;
$.fn.YouTubePopup.defaults.color1 = 'CCCCCC';
$.fn.YouTubePopup.defaults.width='500';
$.fn.YouTubePopup.defaults.height='300';
$.fn.YouTubePopup.defaults.overlayOpacity='0.5';
});
You can able to change popup defaults above way.
Hope it helps:);

Saving a jqPlot graph to an image file

I am using jqPlot to display many graphs on some webpages. I am wanting to be able to save these graphs to an image file.
What is the best way to do this? Is it possible to have a right click menu option on the graph that enables the graph to be saved to an image file?
Here is some code for one of my graphs:
var plotCogsLineGraph = $.jqplot('FinancialsLineGraph', [[30,31,34,40,45], [34,38,31,42,38]],
{
axes:
{
xaxis:
{
ticks: ['5','4','3','2','1']
},
yaxis:
{
label:'%',
pad: 1.05,
ticks: ['0','15','30','45','60']
}
},
width: 480, height: 270,
legend:{show:true, location: 's', placement: 'insideGrid', renderer: $.jqplot.EnhancedLegendRenderer},
seriesDefaults:
{
rendererOptions: {smooth: true}
},
series:[
{
lineWidth:1,
label:'COGS',
markerOptions: { size:1, style:'dimaond' }
},
{
lineWidth:1,
label:'Wages',
markerOptions: { size: 1, style:"dimaond" }
}
]
}
);
What needs to be added to this above code to enable saving the graph to an image file?
Try this:
$('#FinancialsLineGraph').jqplotSaveImage()
Let's say your plot is drawing in a div with 'plot' id.
You have to apply native jqplotToImageStr({}) function in order to convert the plot to an image.
Then you can fill an other div (with id = 'graphicImage' for example) in order to display this freshly generated image :
var graphicImage = $('#graphicImage');
if(graphicImage.html() == ""){ //If the image was even generated, don't generate it again
var divGraph = $('#plot').jqplotToImageStr({});
var divElem = $('<img/>').attr('src', divGraph);
graphicImage.html(divElem);
}
In order to download the image, you can do something like :
open(divGraph.toDataURL("image/png"));
In my case it doesn't work great as the image downloaded on my computer is corrupted.
If you find a way to save it I'll be great to hear about it.
Anyway, once you have done the first part on this answer (fill the '#graphicImage' div with the image corresponding to jqplot), you can save it thanks to a right click on it...
$('#GraphName').jqplotSaveImage() but aware that if you have applied some custom styles on ticks this won't be saved to image

Categories