I'm using wheelnav.js plugin of javascript to draw some circular menu as in the image below:
The problem is that I can't put an image inside the menu parts and I don't know how to do it.
If anyone knows how to put some custom images inside each of this menu parts please help me...
Thanks!!!
UPDATE May 3, 2016:
To insert images into the menu slices, use imgsrc:path/filename. So the code above can be changed to:
var imgWheel = new wheelnav("divId");
imgWheel.createWheel(["imgsrc:img/menu1.png","imgsrc:img/menu2.png","imgsrc:img/menu3.png"]);
The current version (v1.5.5) doesn't support image, so you must modify the source code.
Change this line: https://github.com/softwaretailoring/wheelnav/blob/v1.5.5/js/dist/wheelnav.js#L841
to this one:
this.navTitle = this.wheelnav.raphael.image(currentTitle.title, sliceInitPath.titlePosX, sliceInitPath.titlePosY, *width*, *height*);
Raphael reference: http://raphaeljs.com/reference.html#Paper.image
After this modification you can use images:
var imgWheel = new wheelnav("divId");
imgWheel.createWheel(["img/menu1.png","img/menu2.png","img/menu3.png"]);
There is an issue about it (https://github.com/softwaretailoring/wheelnav/issues/22), so later wheelnav.js will be able to handle image.
UPDATE: wheelnav.js supports image from v1.6.0
Related
As stated above, I have problems with implementing a specific code on my website.
This is how it should look: https://codepen.io/smalinux/pen/VjXokA.
var d1_li = MorphSVGPlugin.convertToPath("#d1_li"),
d2_li = MorphSVGPlugin.convertToPath("#d2_li"),
d3_li = MorphSVGPlugin.convertToPath("#d3_li"),
d4_li = MorphSVGPlugin.convertToPath("#d4_li"),
d5_li = MorphSVGPlugin.convertToPath("#d5_li"),
d6_li = MorphSVGPlugin.convertToPath("#d6_li"),
d7_li = MorphSVGPlugin.convertToPath("#d7_li"),
d8_li = MorphSVGPlugin.convertToPath("#d8_li"),
d9_li = MorphSVGPlugin.convertToPath("#d9_li");
(I don't know how I show the rest of the JS code, but you can see it in the provided link)
Now, I have a Wordpress website and I am not good in HTML/JS/CSS at all. I am using the Avada theme and when I try to implement this, I either get a white box with nothing happening at all when I use the code generator. When I try to implement the codes seperately I see all the animations overlapping eachother and not moving (meaning JS is wrong?).
Now, I hope I explained my problem. If somebody could help me I would be forever grateful!
Exactly how are you implementing the css and js? Screenshots would help. Are you using a child theme?
I am using tooltipster to generate tool tips. All works fine except in the situation where I need to set the contents of a div based on user input using a simple JavaScript function. The div contents consists of images, when hovering over each image, a tool tip should display. However, the tip displays as the default browser behaves for displaying title= with an image. The JavaScript I use is simple:
function setAwards() {
var awardsdiv=document.getElementById("awards"); awardsdiv.innerHTML="";
if (document.setvalues.superstar.checked == true) awardsdiv.innerHTML=awardsdiv.innerHTML + "<img class=\"tooltip\" title=\"Description of award\" width=\"16\" src=\"/pix/superstar.png\" alt=\"[ Super Star ]\" />";
[... stuff removed ...]
}
Is there a way to make this work? Tool tips do display elsewhere on this web page, so the resources needed appear to be set up correctly.
Thank you!
You must initialize the tooltip ($(...).tooltipster({...})) after you have inserted your new HTML content or use delegation.
For "automatic" initialization, you might want to use delegated event listeners for that, see https://github.com/iamceege/tooltipster/issues/499
I understand that there are similar questions out there, but none of them seem to work properly for me. I have a slider and an image. When I change the value of the slider, I want the image to change as well. Here are the relevant pieces of javascript:
var imageArray = ['face0.png',
'face1.png',
'face1.png',
'face2.png',
'face2.png',
'face3.png',
'face3.png',
'face4.png',
'face4.png',
'face5.png',
'face5.png'];
function sliderValueChange(value) {
//$('#painScaleImage').attr('src', '~/Content/' + imageArray[value]); ***gets wrong path
//$('#painScaleImage').src('~/Content/' + imageArray[value]); ***jQuery has no method called .src()
//document.getElementById('painScaleImage').src = '~/Content/' + imageArray[value]; ***gets wrong path
//these are commented out because they all failed to work
}
My images are located in my project under Content/face0.png, Content/face1.png, etc. My Views are located in Views/Home/view.cshtml. The problem is that when I called the $(...).attr() and document.getElementById(...).src functions, the browser looked for the images under /Home/~/Content/face0.png instead of looking under Content/face0.png. The reason I assumed I could use ~/Content/face0.png is because if I were to declare the images in html, this would get the image in the right place <img src="~/Content/face0.png" />. How can I properly achieve what I am trying to do? What is going wrong?
Got it, root relative paths were the correct answer for my solution.
(start the path with a /).
So what i want to do is add a description to the lightbox gallery.
I am using jquery plugin blueimp image gallery and also the bootstrap image gallery plugin over the top. I've searched everywhere but there were only a few posts about it other than what is mentioned within the instructions of the documentation, so figured i'd ask.
i'm sure that's probably whats causing the problem but first i'd like to know if there is a way to add a description preferably underneath the image, it can be under the title too though.
this is the furthest i have got with it using the code below from the blueimp documentation and an additional extra i found from another user demonstrated in the jsfiddle.
blueimp.Gallery(
document.getElementById('links'), {
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
});
http://jsfiddle.net/2B3bN/37/
this shows how it looks on my webpage, i did manage to implement this but you will however notice that it only works for the first image.
Surely this can be amended with some js? I'm pretty new to js i can read and amend basic js but i'm guessing the same way they change the title can be used to change the description?
Thanks for all the help guys!
In case you still need this:
$('#blueimp-gallery').on('slide', function (event, index, slide) {
$(this).children('.description')
.text($('#links a').eq(index).data('description'));
});
I want to do a image slider in my dotnet nuke project. Ie want to display image one after other. Is there is any free module for that? or
Is there is any way to display(one after another like slide show) all the images from a folder using java script or jquery?
Thanks in advance
use dnn's inbuild widgets to do so: take a look at this page and find RotatorWidget
var divs = $("div.Image").get().sort(function(){
return Math.round(Math.random())-0.5; //so we get the right +/- combo
}).slice(0,4);
$(divs).show();
If you want to also randomize the order (not just which are shown), you already have them sorted so just append them to the same parent in their new order by changing this:
$(divs).show();
//to this:
$(divs).appendTo(divs[0].parentNode).show();