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>
Related
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
i am trying to implement tooltips through javascript,
like when we click on an imageLlink, tooltip should be displayed and it should have closebutton/close image to hide that tooltip.
like the same way i will have multiple images on my page, whenever i click on the images the respective tooltip should be displayed on the page when ever i want to close that then only it should close through close button on tooltip.
can any one help me on this, i need a sample example to implement this.
can we do it through java script or will go for jquery ?
i am new for both.
Thanks in advance.
Kiran.
You may use jQuery UI tooltip and override the default open method (on mouse focus) and bind that to a click function for the images. Also you can add a close button inside the tooltip and bind the Close method to that. Ref: http://api.jqueryui.com/tooltip/#method-open
You can also check these jquery plugins.
http://tooltipsy.com/
HTML CODE:
<div>
<div class="tes_div">
<img class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_ft_xl.jpg" height="100px", width="100px"> </img>
<div class="close_button" >"teststts" </div>
</div>
<div class="tes_div">
<img class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_ft_xl.jpg" height="100px", width="100px"> </img>
<div class="close_button" >"teststts" </div>
</div>
<div class="tes_div">
<img class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_
ft_xl.jpg" height="100px", width="100px"> </img>
<div class="close_button"
>"teststts" </div>
</div>
<div class="tes_div">
<img class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_ft_xl.jpg" height="100px", width="100px"> </img>
<div class="close_button" >"teststts" </div>
</div>
<div class="tes_div">
<img class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_ft_xl.jpg" height="100px", width="100px"> </img>
<div class="close_button" >"teststts" </div>
</div>
<div class="tes_div">
<img class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_ft_xl.jpg" height="100px", width="100px"> </img>
<div class="close_button" >"teststts" </div>
</div>
</div>
Jquery code
$('.test_img').click(function(){
$(this).next().addClass('testts_div');
});
$('.close_button').click(function(){
$(this).removeClass('testts_div');
});
AND CSS
.testts_div{
background:#000;
color:#fff;
position:absolute;
display:block !important;
top:0px;
left:20px;
}
.tes_div{
position:relative;
}
.close_button{
display : none;
}
in the div( class= "close button") . you can write close button div and you can show and hide it
im trying to build a gallery that loads a div with images when a button i clicked.
the problem is that when i have 2 buttons only the last images are clickable, a little hard to explain but you can try it out on my page: http://www.bravitus.com/#gallery
is it wrong having two javascrips like that
script1:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingpriv").hide();
$(".show_priv").show();
$('.show_priv').click(function(){
$(".slidingpriv").slideToggle();
});
});
script2:
<script type="text/javascript">
$(document).ready(function(){
$(".slidinggf").hide();
$(".show_gf").show();
$('.show_gf').click(function(){
$(".slidinggf").slideToggle();
});
});
html:
<div class="row">
<div class="container">
<!---section--->
<div class="center">
Private projects
</div>
<div class="slidingpriv">
<a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image">
<img href="" src="img/inasecond.jpg" width="300" height="300" alt=""/></a>
</div>
<a href="pages/2012/2012.html"><div id="imgstyle" class="image">
<img src="img/2012.jpg" width="300" height="300" alt=""/> </div></a>
<a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
<img src="img/Cover-text.jpg" width="300" height="300" alt=""/> </div> </a>
</div>
<!---section--->
<div class="center">
Grundforløb
</div>
<div class="slidinggf">
<a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image">
<img href="" src="img/inasecond.jpg" width="300" height="300" alt=""/></a>
</div>
<a href="pages/2012/2012.html"><div id="imgstyle" class="image">
<img src="img/2012.jpg" width="300" height="300" alt=""/> </div></a>
<a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
<img src="img/Cover-text.jpg" width="300" height="300" alt=""/> </div> </a>
</div>
css:
.center{
position:relative;
width:100%;
height:100%;
margin:0 auto;
text-align:center;
/*background-color:#0C3;*/
}
.show_priv {
display:none;
position:relative;
height:100%;
/*background-color: #99CCFF;*/
}
.slidinggf {
height:100%;
/**background-color: #99CCFF;**/
width:100%;
position:relative;
}
.show_gf {
display:none;
position:relative;
height:100%;
/*background-color: #99CCFF;*/
}
.slidingpriv {
height:100%;
/**background-color: #99CCFF;**/
width:100%;
position:relative;
}
Thanks ;)
You should look at using your browser developer tools which has some very easy to use tools for debugging, such as the inspect element.
https://developer.chrome.com/devtools
https://developer.mozilla.org/en-US/docs/Tools
With this you can find what may be blocking your ability to click on some elements, even if you're sure they should work.
Also try to combine scripts into the same document ($(document).ready(function(){});)
I have two image div in HTML i want that onclik of one image other image should change
<div class="image_21"><img src="pagetwo_graph_two_4.png"/></div>
<div class="alignment"><img src="pagetwo_graph_one.png"/></div>
<div class="image_one"><img src="pagetwo_graph_two_1.png"/></div>
<div class="image_two"><img src="pagetwo_graph_two_2.png"/></div>
<div class="option_image"><img src="option1.png"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="option1.png"/></div>
<div class="option_image_label_one">Option 2</div>
I want that on click on option_image_one it should change image of image_one and imagetwo
UPDATE
<html>
<head>
<script type="text/javascript">
function changeImage(){
document.getElementById('toChange').src='3.jpg';
}
</script>
</head>
<body>
<div class="option_image_one"><img src="1.jpg" onclick="changeImage()"/></div>
<div class="image_two"><img src="2.jpg" id="toChange"/></div>
</body>
</html>
Here the code that works for me
onclick = "document.getElementById('option_image_one').getElementsByTagName('img')[0].src='pagetwo_graph_two_2.png' "
It would work.
Best option is to give images some id and then do something like document.getElementById('yourId').src='newimage' (this should be some js function that you assign to onClick event on your first div)
You can try the following:
<div class="option_image_one">
<img onclick="document.getElementById('image2').src='http://www.w3schools.com/images/compatible_firefox.gif'" src="http://www.w3schools.com/images/compatible_chrome.gif"/>
</div>
<div class="image_two">
<img id="image2" src="http://www.w3schools.com/images/compatible_safari.gif"/>
</div>
Note that I have added an ID to the second image.
See the live example on this interactive HTML/JS editor
div are useless
<img src="option1.png" id="img1" onclick="document.getElementById('img2').src='newImage.png'"/>
<img src="pagetwo_graph_two_2.png" id="img2"/>
If you could use jQuery it would be like this:
$(".option_image_one img").onclick(function(event) {
$(".image_two img").attr('href','different_image,jpg').hide().fadeIn("fast");
});
To use jQuery import the jQuery library by including the following in your header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
As per Thomas's and Filype's answers, I would suggest that use divs but put onClick for img tag and not div tag.
This is for future enhancement so that if you would like to add anything else to these divs.
complete code just copy it and paste
jQuery(document).ready(function(){
jQuery('.small').click(function(){
if(jQuery(this).hasClass('active')!=true);
{
jQuery('.small').removeClass('active');
jQuery(this).addClass('active');
var new_link=jQuery(this).children('img').attr('src');
jQuery(countainer).children('img').attr('src',img_link);
}
});
});
</script>
</head>
<body>
<div class="countainer">
<img src="image/slideme-jQuery-slider.jpg" width="400" heiht="200"/ alt="">
</div>
<div class="clear"></div>
<br/>
<div class="mini">
<div class="small active">
<img src="image/Galleria-JavaScript-Image-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Trip-Tracker-slideshow.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Visual-Lightbox-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/RoyalSlider_-_Touch-Enabled_Image_Gallery_and_Content_Slider_Plugin.jpg" alt="" height="50" width="50" />
</div>
<div class="small">
<img src="image/UnoSlider-jQuery-image-slider.jpg" height="50" width="50" />
</div>
</div>