How to add description text in FeatherLight Image Gallery? - javascript

Trying to figure out how to add a text description to featherlight.js lightbox image gallery. Does anybody know or have any experience?
Here's an example of how the html is laid out:
<div class="mix digital" data-myorder="12" style="display: inline-block;">
<a class="gallery2" href="gallery_images/design/woodcut.jpg">
<div class="thumbnail" style="background-image:url(gallery_images/design/woodcut_th.jpg);"></div></a>
</div>
<div class="mix digital" data-myorder="11" style="display: inline-block;">
<a class="gallery2" href="gallery_images/design/script.jpg">
<div class="thumbnail" style="background-image:url(gallery_images/design/script_th.jpg);"></div></a>
</div>
...plus many more images
I would just like to be able to add a little bit of text as a description of the images in the light box when they open up and I can't find this in the documentation.
If not, does anybody know of a good/light lightbox that could achieve this?

featherlight aims to be light and doesn't have a builtin option for this, but it's easy to do with the afterContent callback.
For example, imagine that your text is in the 'alt' attribute of the a tag, you could specify:
afterContent: function() {
// Add a div for the legend if needed:
this.$legend = this.$legend || $('<div class="legend"/>').insertAfter(this.$content);
// Set the content:
this.$legend.text(this.$currentTarget.attr('alt'));
}
Here's a working example.

Related

Selecting first image in div and replacing image src

I am trying to find a way to select the first image found within a div and replace the image source. It specifically must be this method as the image doesn't have an ID (complicated to explain).
$('.promo-unit-site-logo-3').find('img:first').attr'('src', 'blank')')';
I have tried using the above code from googling around and clipping something together however I am by way of javascript a novice.
Any help appreciated!
Thanks,
John
see its working. you mistake in code.
var image = $('.promo-unit-site-logo-3').find('img:first').attr('src', 'blank');
console.log(image.attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="promo-unit-site-logo-3">
<img src="http://placehold.it/280x210" title="first image">
<img src="http://placehold.it/30x20" title="Second image">
</div>

Save a canvas with border

I've been writing a mini image editor. Upon uploading the to-be-edited image, I draw it into a canvas. One of the editing tools is to add a picture frame, which is taken from several sample images
This is the relating part of my HTML code
<div id="canvas-frame">
<canvas id="edit-canvas" width="500"></canvas>
</div>
<div id="border-tool" class="tab-pane fade">
<div class="border-selection active">
<img src="img/hien/no-border.jpg" id="no-border">
</div>
<div class="border-selection">
<img src="img/hien/border1.png">
</div>
<div class="border-selection">
<img src="img/hien/border2.png">
</div>
</div>
And this is the JavaScript code implementing it
$('#canvas-frame').width($('#edit-canvas').width());
$('#canvas-frame').height($('#edit-canvas').height());
function placeBorder(src){
$('#canvas-frame').css('border-image','url('+src+') 30 round');
$('#canvas-frame').css('border-width','20px');
}
$('#border-tool .border-selection img').click(function(){
$('#border-tool .border-selection.active').removeClass('active');
$(this).parent().addClass('active');
if ($(this).attr('id')=='no-border'){
$('#canvas-frame').css('border','none');
} else{
placeBorder(this.src);
}
});
As you can see, my idea is to use the canvas-frame div to wrap around the canvas, then try changing css of it. But now I encounter another problem, how to implement a Save button to download the canvas with the bordering frame around it. Could you please give me any suggestions or tutorials to do it? Thanks a lot

How to keep text on image slider?

Does anyone know how to keep the text on the image slider?
If the plugins is the solution they should not be heavy it should be easy to understand and implement.
You can add captions under each image using data-captionor in a span after the image.
You can add larger text using the title tag, for example:
<div class="MagicSlideshow">
<img src="example1.jpg" data-caption="Descriptive text can go here." title="Title here"/>
<img src="example2.jpg" data-caption="You can have one or two sets of text, or none at all." title="Another title"/>
<img src="example3.jpg" data-caption="You can also use HTML such as<b>bold</b>,<i>italic</i> and<a href='/magicslideshow/'>links</a>."/>
</div>
Plz refer this one.
Demo

javascript examples display content boxes

I am trying to locate javascript code that, when I rollover an image, will make a box appear below the image and expand down (much like how a movie screen in a theater would roll from the ceiling to the floor). In that box, content would also appear, that I have previously added, that describes the image above. Already existing underneath the image I have a div with content in it...I would also like this div to be pushed down as the box described above expands down.
Any suggestions?
Thank you very much in advance!
C*
Forgot the code that I am using...so what is happening here is that I have a picture, and below it, a small box, that when I rollover that small box it changes color. So, I want to add, when I scroll over that small box, not only does it still change color, but the new vertical expanding box appears below it. I have javascript in a *.js file that handles the already existing rollover effect but it's quite long and I wasn't sure if I should add that (it was create by Dreamweaver when I created a rollover image).
<div class="images">
<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>
<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>
</div>
You don't give much information in your question about your current setup, but assuming that you have your HTML set out something like this:
<div>
<img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
<div id="tux_desc" class="imgDesc" style="display: none">
<p>A cute penguin!</p>
</div>
</div>
<div>
<p>This text is part of the normal document flow</p>
</div>
Then you can use the following JavaScript (which makes use of jQuery):
$('#tux').hover(
function() {
$('#tux_desc').slideDown();
},
function() {
$('#tux_desc').slideUp();
});
You can see it working here: http://jsfiddle.net/wbAxm/1
something like this ought to to do it as long as the div to expand is directly after the image in the mark-up:
$(".class_for_images").on("mouseenter mouseleave", function() {
var content = $(this).next();
if (content.is(":visible")) {
content.slideUp();
} else {
content.slideDown();
}
});
If you want more than this, or it doesn't work, you'll need to post some code so that we can provide more detailed answers...

JQuery larger image in dialog

I have a thumbnail image declared dynamically like this :
<img id="productThumbnail" src="" style="float: left; width:100%"/>
I want to open a larger image in a JQuery dialog when a user clicks the thumbnail.
How can I accomplish this ?
Considering in my array, the thumbnail is "productThumbnail" and the larger image is "srcImg"
Something like :
<a href="#" data-rel="dialog" id="dialog1">
<img id="productThumbnail" src="" style="float: left; width:100%"/>
</a>
Thanks !!
This is almost exactly what jquery lightbox can do for you...is there a reason you can't or don't want to use it or other smiliar plugin?
http://leandrovieira.com/projects/jquery/lightbox/
Maybe some of this Jquery Pluggins can help you.
(See the number 4).

Categories