This is my HTML code:
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>
Jquery code:
$('.vid').mouseenter(function() {
$('.text').css("visibility","visible");
});
Now, what if I want to add another image but with the same code and class? Obviously when I do this, both images will show their overlay text while my mouse is only on 1 image.
So is there anyway to do this without giving every image a different class/id?
You can use the this keyword to reference the .vid element that raised the event. From there you can traverse the DOM to find the child .text element, like this:
$('.vid').mouseenter(function() {
$(this).find('.text').css("visibility", "visible");
});
.vid {
position: relative;
}
.vid p {
position: absolute;
width: 100%;
top: 10%;
visibility: hidden;
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>
Yes, because .text is a selector which needs to be scoped. Try this instead:
$('.vid').mouseenter(function() {
$(this).find('.text').css("visibility","visible");
});
This will add the attribute to the underlying .text element only.
This can help you with multiple divs:
$(function() {
$('.vid').on('mouseenter', function() {
$(this).find('.text').css("visibility","visible");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid2">
<p class="text">Text that comes over the image</p>
</div>
<div class="col-lg-3 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>
Hope this helps!
Related
So I have my codes here and what I want to do is center it but can't figure out how.
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
Here is what my code is JS fiddle looks like as is...
https://jsfiddle.net/4fc07vL7/
Maybe you want to something like this :
<div style="text-align:center">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
Try this
.container{
position:relative;
float:left;
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%);
left:50%;
}
<div class="container">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
The align attribute is not supported in HTML5. So, Use CSS instead.
CSS syntax: <div style="text-align:center">
So, you can do this.
<div id="links" style="text-align:center">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/twitter.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
This is my code which is getting dynamically appended by a plugin
<div class="emoji-menu" style="top: 913px; left: 1211.5px; display: block;">
<div class="emoji-items-wrap1">
<div class="emoji-items-wrap nano mobile_scrollable_wrap has-scrollbar">
<div class="emoji-items nano-content" tabindex="-1" style="right: -17px;">
<a href="javascript:void(0)" title=":unamused:">
<img src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -360px 0px no-repeat;background-size:540px 140px;" alt=":unamused:">
<span class="label">:unamused:</span>
</a>
<a href="javascript:void(0)" title=":joy:">
<img src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -440px 0px no-repeat;background-size:540px 140px;" alt=":joy:">
<span class="label">:joy:</span>
</a>
</div>
</div>
</div>
</div>
The problem is that i need to change .emoji-menu's div property to display:none whenever the img tag inside it gets clicked(please refer the code), I have tried with different selectors but it didn't work.
I think <a href="javascript:void(0)" is causing problem. Please help me on this.
With angular you can use ngClick and ngShow for these things:
<div ng-show="thisEmoji" class="emoji-menu" style="top: 913px; left: 1211.5px; display: block;">
<div class="emoji-items-wrap1">
<div class="emoji-items-wrap nano mobile_scrollable_wrap has-scrollbar">
<div class="emoji-items nano-content" tabindex="-1" style="right: -17px;">
<img ng-click="thisEmoji = true" src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -360px 0px no-repeat;background-size:540px 140px;" alt=":unamused:">
<span class="label">:unamused:</span>
<img ng-click="thisEmoji = true" src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -440px 0px no-repeat;background-size:540px 140px;" alt=":joy:">
<span class="label">:joy:</span>
</div>
</div>
</div>
</div>
The a tag could be replaced with removed as it only ads a title to the element. I seem to rememeber the alt attribute on img does the same.
If your html snippet appends the document dynamically, you should bind the click events of images . Hope this helps
$("body").on("click",".emoji-items img",function(){
$(".emoji-menu").fadeOut();
})
I have link with image in it. This all construction is wraped in some divs. Problem : except image, also is clickable area of div-wrapper. I don't know why it is possible. So i want to prevent this behaviour. Now i can just do this with javascript (return false on div click) and with css (change curson type on div hover).
Can i somehow done this just with css?
Thanks.
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
JsFiddle Example
For those who don't know what i'm asking : I want to make clickable area that are limited by sides of image. Now i can click on div that are wrapper of image to be redirected by link.
Since you're using Bootstrap and the img-responsive class makes an image a block element, you need to change that behavior. Block elements take up the full width of their parent container. You can fix that by making the image an inline element:
img.img-responsive {
display:inline;
}
jsFiddle example
Or just don't use the img-responsive class.
pointer-event:none;
Ya, you can do this using CSS :)
pointer-event:none;
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap" class='no-link'>
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/>
</a><br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
<style>
.no-link{
}
</style>
Based on your jsFiddle example, simply change yor code to:
<div style="white-space: nowrap; width:200px; margin: auto;">
The cause of the "side effect" is because your A TAG is taking all the parent DIV area, thus the DIV itself is taking the whole space of its own Parent, making it appears as if the clickable area is stretching beyond of the A TAG (which is not true).
To prevent such behavior it is always a good practice to limit the size of the container to the size of the clickable element inside it (width AND height, whenever necessary).
Have a good coding day! :)
You should use display: inline-block; and set the width of the containing div.
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center" style="width: 100%; margin-left:auto; margin-right: auto;">
<div style="white-space: nowrap; display: inline-block; width: 200px;">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0" />
</a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
just Add same margin and width in div also
--example
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap;margin: 0 auto; width: 200px;">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
I'm working on a website, http://atlantaartmap.com, which uses leaflet/mapbox to plot street art around Atlanta. The image details are read from a geojson file. While leaflet is reading the geojson, I append thumbnails to a nav bar at the bottom that also link to the corresponding map marker. Appending the images instead of hard coding them allows me to update a single file to change all aspects of the page.
I am attempting to use lazy load on these images, but it doesn't seem to work with items that are appended using java script. Any tips?
Here is the lazy version of the page I am testing: http://atlantaartmap.com/lazy.html
Here is the normal version of the site: http://atlantaartmap.com
Thanks in advance.
edit: For clarification, I would like the lazy loading script to avoid loading images until they are within the window.
I would just throw out the plugin and do that yourself, it's actually very simple to do. You create one image element with your loading image as source, append that as a child to your a (link) element:
var image = new Image();
image.src = 'images/loading.gif';
link.appendChild(image);
Next up you create another image element with your actual image as a source, but you don't need to append it to anything. Just listen for the onload event to fire, then swap the sources:
var original = new Image();
original.src = feature.properties.image;
original.onload = function () {
image.src = original.src;
}
That should work like a charm. Now you can leave out jQuery and the plugin so that's two dependency assets less to load, so your page is loading faster also. Win/win situation if you ask me ;)
Here's a example of the concept on JSFiddle: http://jsfiddle.net/waud32ta/
I really would suggest that you try lazySizes. Different to other lazyloaders it is a self-initializing script, which automatically detects new elements and their visibility. So you don't need to call or configure anything here. Simply append an image with the class lazyload and add your source to the data-src attribute. That's it:
<img src="spinner.gif" data-src="image.jpg" class="lazyload" />
Here is a simple demo.
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.expand = 40;
window.lazySizesConfig.addClasses = true;
document.querySelector('.add').onclick = function(){
document.querySelector('.scroll-doc').innerHTML = document.querySelector('.template').innerHTML;
};
.scroll-area {
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 80%;
margin: auto;
padding: 2px 2px 10px;
}
.scroll-doc {
display: table;
position: relative;
text-align: left;
}
.scroll-item {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
.intrinsic {
position: relative;
padding-bottom: 75%;
height: 0px;
}
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
.add {
font-size: large;
font-weight: bold;
}
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<button type="button" class="add">add to scroll area</button>
<div class="scroll-area">
<div class="scroll-doc"></div>
</div>
<script type="text/html" class="template">
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/1"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/2"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/3"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/4"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/5"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/6"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/7"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/8"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/9"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/1"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/2"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/3"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/4"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/5"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/6"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/7"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/8"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/9"
alt="" />
</div>
</div>
</script>
Try calling
$("img.navthumb").lazyload();
after the thumbnail code has been dynamically injected using JavaScript method appendChild().
Also, i would be able to help you better if you post a JSFiddle.
Hope it helps!!!
Okay, so far you have highlighted that jQuery should be avoided. But I think it's possible to use micro-plugins which contains only the logic you really need. One of them is justlazy. It's a lazy loading library which has no external dependencies and provides compact image loading code.
First, you have to define your placeholders:
<span data-src="path/to/image" data-alt="some alt text"
data-title="some title"
class="justlazy-placeholder">
</span>
It's also possible to define the placeholder as img-tag to be more SEO friendly. One other feature is the loading of responsive images with srcset attribute.
The second step is to initialize the lazy loading via javascript:
Justlazy.registerLazyLoadByClass("justlazy-placeholder"{
// defines that the image will be loaded
// 200 pixels before it gets visible
threshold: 200
});
i'm new to jquery.I tried to load gallery when click image in script. I want to replace images src links when click the top images.
like this-->
image1 image2 image3
if image1 click load gallery1, if image2 click load gallery2 lick vice.
this is the my html code
<div>
<img id="book1" src="image1.jpg">
<img id="book2" src="image2.jpg">
</div>
<div id="pages">
<div style="background: url(1.jpg); width:100%;"></div>
<div style="background: url(2.jpg); width:100%;"></div>
<div style="background: url(3.jpg); width:100%;"></div>
<div>
i want to replace this
<div id="pages">
<div style="background: url(1.jpg); width:100%;"></div>
<div style="background: url(2.jpg); width:100%;"></div>
<div style="background: url(3.jpg); width:100%;"></div>
<div>
into
<div id="pages">
<div style="background: url(new1.jpg); width:100%;"></div>
<div style="background: url(new2.jpg); width:100%;"></div>
<div style="background: url(new3.jpg); width:100%;"></div>
<div>
i just want to replace the html
Can anyone help me to write this jquery?
You can try this:-
<div id="demo">
<img id="book1" src="image1.jpg" class="image1">
<img id="book2" src="image2.jpg" class="image2">
<img id="book3" src="image3.jpg" class="image3">
</div>
<div id="pages">
<div id="image1" style="background: url(1.jpg); width:100%;"></div>
<div id="image2" style="background: url(2.jpg); width:100%;"></div>
<div id="image3" style="background: url(3.jpg); width:100%;"></div>
<div>
javascript ->
$(document).on("click","#demo img",function(){
var $self= $(this);
selfId = '#' + $self.attr('class'),
$("#pages").replaceWith($("#"+selfId) );
});
example:http://api.jquery.com/replacewith/
You can try below code, where you can add data attribute data-gallary to images and its value equal to id of the page div. Add id to the page div as shown below.
Now you need to hide and show pages on the basis of clicked image.
NOTE - please make sure that all ids should be unique through out the HTML.
HTML:
<div>
<img id="book1" src="image1.jpg" data-gallary="page1">
<img id="book2" src="image2.jpg" data-gallary="page2">
</div>
<div id="pages">
<div id="page1" style="background: url(1.jpg); width:100%;"></div>
<div id="page2" style="background: url(2.jpg); width:100%;"></div>
<div id="page3" style="background: url(3.jpg); width:100%;"></div>
<div>
JQuery:
$(function(){
$('img[id^=book]').click(function(){
//hide all pages
$('div[id^=page]').hide();
//show corresponding page
var pageId= $(this).data('gallary');
$('#'+pageId).show();
});
});
Check this fiddle
Simple jQuery code
$("#book1").click(function(){
$('#page1').attr('src','http://placehold.it/350x150.gif');
$('#page2').attr('src','http://placehold.it/150x150.gif');
$('#page3').attr('src','http://placehold.it/100x100.gif');
});
$("#book2").click(function(){
$('#page1').attr('src','http://placehold.it/300x300.gif');
$('#page2').attr('src','http://placehold.it/150x150.gif');
$('#page3').attr('src','http://placehold.it/100x100.gif');
});
If you are simply trying to alter the img src, you can use this.
You can try $("#book1").attr("src",[your new src]);
If you want to do it on click...
$("#book1").click(function(){
$("#book1").attr("src",[your new src]);
});
Hope that helps