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'));
});
Related
I am trying to copy text to clipboard on click of button.
I am using below library for this but the only things lacking with that library is that it is not shown how to display tooltip when content is copied:
https://www.npmjs.com/package/angular-clipboard
I have tried answers from below questions but those answer doesn't seems to work so i ended up using this above library:
AngularJS copy to clipboard
how to get clipboard data in angular JS
I want to show my tooltip exactly the way as shown on this below question answer:
Tooltips + Highlight Animation With Clipboard.js Click
So I kinda got it working.
Unfortunately we have to use some js to do it if you resort to using bootstrap tooltips.
Here is a plunkr that solves the problm.
Basically, boils down to these few lines of code:
var myEl = angular.element( document.querySelector( '#copyButton' ) );
myEl.attr('title', 'Copied!')
.tooltip('fixTitle')
.tooltip('show');
myEl.attr('title',"Copied");
myEl.on('hidden.bs.tooltip', function () {
// do something…
myEl.attr('title', $scope.copyButtonToolTip)
.tooltip('fixTitle');
});
Also, you should be using bootstrap version 3 instead of v4.
Updated Plunkr
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
I am running a bg slider..."Supersized - Fullscreen Slideshow jQuery Plugin"
what i need is when a background changes some contents in a specific div must also change...
here i found a code line from script
if (options.slide_captions)
$('#slidecaption').html(options.slides[currentSlide].title);
this one pulls the image title to a specific div, but i want to load unique div for each background change...
or is there any other ways to do??
i have very little knowledge in jquery...
please help
advance thanks...
you can write this:
if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title, function(){
//write the code that load the unique div
});
tell me if it works
http://buildinternet.com/project/supersized/docs.html#theme-after
Check-out the theme.afterAnimation( ) documentation. You can set it to a function that changes the content after the slide changes.
Im trying to build a simple, lightweight product viewer using jquery.
I have a default image that I want to dissapear when a thumb is clicked and replace the image in 'X' div.
Ive attached a fiddle if anybody can explain how this is done?
http://jsfiddle.net/BYuxR/3/
http://jsfiddle.net/sabri/gQyC4/
Try this
$('.thumbs a').click(function(e){
e.preventDefault();
$('.product-image').html( $('<img>').attr('src',$(this).attr('href')));
});
Answer.
http://jsfiddle.net/BYuxR/6/
I need this page: http://winteradagency.com/mrw/index.php
so that when you mouseover the different small images (actually a set of them) the text below changes from text into an image (which is a larger image of the smaller one) I used to use Fireworks for that sort of thing but I'm thinking that there must be an easier way using a combination of a div tage and javascript.
Any ideas for something simple?
thanks!
http://fancybox.net/
lightbox, etc...
The jQuery CYCLE plugin might suit your needs. It transforms a list of elements into a scrolling pane. You could simply disable automatic scrolling on initialization, and set the time between slides to 0. Then you can call the "slide number" in the callback for the mouseover event on the smaller thumbnails.
Cycle is here: http://malsup.com/jquery/cycle/
Your application is very similar to this example: link text
This question has a similiar situation (replacing an input with an image) with an answer that might work for you. Note: it uses jQuery.
Edit:
For your situation you could do something like this for each image:
$('img#id').hover(
function() {
('div#id').hide().after('<img src="image.jpg" />');
},
function() {
('div#id').show();
}
);
changing the 'img#id' to the id of the image and 'image.jpg' to the corresponding big image.