How to keep text on image slider? - javascript

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

Related

how to change the color of a div element when an image is dragged onto it?

I am uploading an image using an input tag and fileReader.
I have made the image draggable using drag and drop API of angular material. Also, there are 2 divs.
The following code shows it.
<input type="file" (change)="fileChange($event)" placeholder="Upload file" >
<img id="blah" [src]="url" alt="your image" cdkDrag/>
<div class="box1">
hi
</div>
<div class="box2">
hi
</div>
<div class="box3">
hi
</div>
My requirement is that, when I drag the image into one of the div boxes, the color of the div should change. Right now I am able to drag the image into the div boxes but how do I change the color of the div when the image is dragged on to it.
From the code provided, I have the following idea.
Steps:
check which parent node is the related div by using document.querySelector('#blah').parentNode
assign the related DOM to a variable as follow:const divNeeded = document.querySelector('#blah').parentNode
Suppose you have some color defined in your css file, let say it is called relatedStyle, you can add it to divNeeded by using .classList.add('relatedStyle').
Example for the style in CSS file:
.relatedStyle{
background-color: blue
}

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>

How to insert image through textarea or html editor?

i have textarea where user can input some text, and this works but the problem arises when he wants to insert the image...
if he put this for example in textarea (Thumbnail image (linked) code)
<img src="http://ultraimg.com/images/2016/08/11/1V6n.md.jpg" alt="1V6n.jpg" border="0" />
when he clicks save button, after that it show the same img code, but there is no image...
so i started to use ckeditor but the situation is the same....
so please tell what i need to ?
Thank you
Instead of textarea, you may use contentEditable.
For limitations and usage take a look to the reported links.
This is an example:
<div contenteditable="true">
<img src="http://ultraimg.com/images/2016/08/11/1V6n.md.jpg" alt="1V6n.jpg" border="0" />
</div>

Display img only when it has a title?

Basically in my ASP.NET MVC4 project I'm trying to have my validationmessages as tooltips (which gets displayed when hovered over a certain image).
Right now the error message is inserted into the image title - however I'd like to ONLY display the image when it has a title (when it doesn't have a title there is no error message).
How can I do this?
I don't suppose it is possible through CSS so a js/jquery solution would work too.
To clarify I need to check update the display as the title changes during runtime.
An initial check is not gonna do it.
Here is the pure CSS solution.
The CSS Code:
img{display:none;}
img[title]{display:block;}
Here is a WORKING DEMO
The HTML:
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" title="" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
The CSS:
img{display:none;}
img[title]{display:block;}
Hope this is what you are looking for.
Only display images with a title?
$('img').filter(function(i, el){
return !$(el).prop('title');
// (empty/undefined titles evaluates as false)
}).hide();
Is this what you're asking for?
Perhaps this css selector is enough (will only work in modern browsers):
img:not([title])
{
display: none;
}

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...

Categories