I have a figure, which contain the image. Source of image can change. So I need to change the figcaption and make it equal the title of image. Is there any way how to do it?
<figure><img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" align="middle">
<figcaption>Image caption</figcaption>
</figure>
You can do like this
$('figcaption').text($('#largeImg').attr('title'))
DEMO
Related
I have the following lines of code in my website:
HTML:
<div class="the-post-thumbnail">
<p><img src="http://placehold.it/350x150/FF0000/FFFFFF?text=Automatic+Thumbnail" alt="" width="" height="" /></p>
</div>
<div class="post-body">
<p><img src="http://placehold.it/350x150/00FF00/FFFFFF?text=Manual+Thumbnail" alt="" width="" height="" /></p>
<p>Paragraph</p>
<p><img src="http://placehold.it/350x150/0000FF/FFFFFF?text=Body+Image" alt="" width="" height="" /></p>
</div>
JavaScript/jQuery:
var ele = $('.post-body p:has(img):first');
if ($('.the-post-thumbnail img').length) {
ele.hide();
}
else {
ele.show();
}
What I am trying to do is:
Check if there is an image within the the-post-thumbnail div and if so, hide the manual thumbnail image within the post-body
Check if there is not an image within the the-post-thumbnail div and if so, show the manual thumbnail image within the post-body
This is partially working, however, what I've noticed is that if I remove the manual thumbnail image from within the post-body div, it will remove the second body image after the paragraph tag as well.
How can I target just the manual thumbnail image which is directly within the post-body div correctly so that I can achieve the two list items above, without adding additional classes?
FYI:
This is due to swapping my website's theme for a different one. The older version required me to place in a thumbnail image for each post manually at the top of the article, and the new theme does this for me automatically. This resulted in duplicate images for older posts.
CodePen Example
Working fiddle.
Just changing the position of :first selector should do the work, because it will select always the first p and check if it has an image :
var ele = $('.post-body p:first:has(img)');
Hope this helps.
Without using any extra selectors, you could check for an image in the first paragraph.
var ele = $('.post-body p:eq(0):has(img)');
I am working on website (HTML+PHP).Here is Fiddle of what I have done so far(sharing one for example).
Each image should point to different URLs.
There are few images whose color matches the font color.I want to change font size/color as image changes. Also URL should also change automatically as image changes.
HTML:
<div class="grid">
<figure class="effect-lexi effect-chocolate">
<div id="cf3" class="shadow">
<img src="http://tympanus.net/Development/HoverEffectIdeas/img/22.jpg" alt="Image" class="bottom" />
<img src="http://tympanus.net/Development/HoverEffectIdeas/img/21.jpg" alt="Image" class="top" />
</div>
<figcaption>
<h2>Dark <span>Chocolate Smoothie</span></h2>
<p>Description</p> View more
</figcaption>
</figure>
</div>
Is it possible ? Can anyone help me with it.?
Thanks,
Using CSS3, you might be able to wield the blend mode to accomplish this.
https://css-tricks.com/basics-css-blend-modes/
Also, you would need to use the JavaScript History to change the URL.
https://developer.mozilla.org/en-US/docs/Web/API/History
Probably the simplest solution is to set the font color as an rgba. For example
color:rgba(0,0,0,.5);
As long as the images aren't black, this will adapt nicely to the color of the background. If you don't have any info from the back end, something along these lines is will probably be the way to go.
im trying to overlap to images. One of them is hidden and its show after picking in the right image in the "clipart library" section. And the other image i get is uploading it from your browser.
I have used posiotion:absolute before to overlap two images, but it doesnt work for me in this caes.
<div id="bgcolor">
<img id="thumbnil" style="width:100%; margin-top:10px;" src="" alt="" style="position:absolute;" />
<img id="tiger" src="https://openclipart.org/image/800px/svg_to_png/202300/Blue-surprised-cartoon-smiley.png" height="50" width="50" style="position:absolute;">
</div>
Here is the code in jsfiddle: http://jsfiddle.net/xq239ko9/
Make the containing div have a style position:relative;. Then make the images position:absolute; top:0; left: 0;. This makes both images appear on the same position within the parent div. Please note, that the parent div will lose it's size, as the images will be positioned outside the document flow.
Another remark:
- Try to use one style attribute per tag.
- Try to hide images by using display:none; instead of an empty src attribute
- Try to use the width and height style properties instead of tag attributes
This seems to be a Safari exclusive bug, and I can't seem to find any information on why it might even be happening.
It's only on Safari, and only using SVG.
I am using the Data Attribute rollover technique using jQuery.
$("img.rollover").hover (->
imgRolloverSwap($(#))
), ->
imgRolloverSwap($(#))
imgRolloverSwap = ($img)->
srcName = $img.attr('src')
$img.attr('src', $img.data('rollover'))
$img.data('rollover', srcName)
The SVG is embedded with the IMG tag, and basically all it does is switch out the rollover image for the one inside the data attribute.
My HTML is thus:
<div id="social-links">
<a href="https://www.facebook.com/pages/StackCommerce/220449001487225">
<img data-rollover="/assets/img/footer/facebook-rollover.svg" class="rollover" type='image/svg+xml' src="/assets/img/footer/facebook.svg" />
<!-- <img class="rollover" src="/assets/img/footer/facebook.svg" alt="facebook link" target="_blank"> -->
</a>
<a href="https://www.linkedin.com/company/stackcommerce">
<img class="rollover" src="/assets/img/footer/linkedin.svg" alt="linkedin link" target="_blank">
</a>
<a href="https://plus.google.com/u/0/b/104759401634432683234/104759401634432683234/aboute">
<img class="rollover" src="/assets/img/footer/google.svg" alt="google plus link" target="_blank">
</a>
<a href="https://twitter.com/stackcommerce">
<img class="rollover" src="/assets/img/footer/twitter.svg" alt="twitter link" target="_blank">
</a>
</div>
The CSS(Sass) is this:
#social-links {
#extend .col-xs-12, .col-sm-3, .col-md-2;
a {
#extend .col-xs-3, .col-sm-6;
margin-bottom: 15px;
}
img {
#extend .img-responsive;
}
}
However, on first hover the image works, but when you roll off, the image gets smaller.
This happens if you use the jQuery technique or if you use vanilla JS to change out the src name with a regular expression.
This doesn't happen to other image formats, and I have tried setting different 100% widths on nearly every element of the cascade.
Fixes from these threads don't seem to be fixes:
SVG resizes on hover in safari only
Scaling/Resizing SVG in an HTML
Rollover SVG images resizing in Safari and IE
Perhaps someone can shed some light on why this is happening, or a technique to help in Safari?
You can see it here on this page, and at the bottom of it in the footer.
http://beta.stackcommerce.com.s3-website-us-east-1.amazonaws.com/publishers/
Thanks in advance!
I've got an image which I want to use inline with some text, but I need it to match the text height. I know it's possible to something like <img src="img.jpg" height=16> or even <img src="img.jpg" height="100%">, but the former does not scale with text size and the latter seems to make it the size of the div, not the text height. Can anyone help?
Example HTML:
<body>
This is a test <img src="img.jpg">
</body>
Did you try this giving the image height as 1em?
img {height: 1em;}
Check out the fiddle here: http://jsfiddle.net/yAr7z/