I'm working on an html site with a lot of images, to reduce loading time I'm going to load hidden images when user click on the cover image with javascript, then insert it into bootstrap carousel.
I tried to make it, but unsuccessful. Images aren't load. Any help?
Here is my last code:
HTML
<li>
<a href="#" onclick="imgFilter('.ar-img')">
<img src="images/AR/01.jpg" alt="">
</a>
<div class="accordion carousel-inner">
<div class="item active">
<img src="images/AR/01.jpg" alt="slide">
</div>
<div class="item">
<img class="ar-img" src="" data-src="images/AR/02.jpg" alt="slide">
</div>
<div class="item">
<img class="ar-img" src="" data-src="images/AR/03.jpg" alt="slide">
</div>
</div>
</li>
<li>
<a href="#" onclick="imgFilter('.br-img')">
<img src="images/BR/01.jpg" alt="">
</a>
<div class="accordion carousel-inner">
<div class="item active">
<img src="images/BR/01.jpg" alt="slide">
</div>
<div class="item">
<img class="br-img" src="" data-src="images/BR/02.jpg" alt="slide">
</div>
<div class="item">
<img class="br-img" src="" data-src="images/BR/03.jpg" alt="slide">
</div>
</div>
</li>
JS
function imgFilter(id) {
var imgId = $(id);
$("imgId").each(function(i) {
$("this").setAttribute('src', $("this").getAttribute('data-src'));
});
};
Something in the lines of:
$(".item img").each(function(i) {
$("this").setAttribute('src', $("this").getAttribute('data-src'));
}
however i would use jQuery plugin lazyload instead (http://www.appelsiini.net/projects/lazyload).
Assumed you have css like:
.item{
width:200px;
height:auto;
}
.item img{
width:100%;
height:auto;
}
Related
I have a gallery and images contains other images. So After click on image thubnail I want to see full size of thubnail image and other images which are not represent on gallery because they are just part of that main image. This images will be reached trough scrolling and will be shown in same window with main image.
Now i Have code like this(with one image after click on thubnail) :
<div class="col-3 thumb">
<a data-fancybox="gallery" href="1.jpg" class="fancybox" data-caption="Description 1">
<div class="hovereffect">
<img class="img-fluid" src="1.jpg" alt="">
<div class="overlay">
<h2>Tittle 1</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="2.jpg" class="fancybox" data-caption="Description 2">
<div class="hovereffect">
<img class="img-fluid" src="2.jpg" alt="">
<div class="overlay">
<h2>Tittle 2</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="3.jpg" data-caption="Description 3">
<div class="hovereffect">
<img class="img-fluid" src="3.jpg" alt="">
<div class="overlay">
<h2>Tittle 3</h2>
</div>
</div>
</a>
</div>
Update
Solve this with id:
<a data-fancybox="gallery" href="#img_1" class="fancybox">
<div style="display:none">
<div id="img_1"">
<div class="container">
<div class="row">
<div class="col-7" >
<a data-fancybox="gallery1" href="1.jpg" class="fancybox">
<img class="img-fluid" src="1.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
So, basically, you are asking for two way navigation (e.g., two dimensional), but I have never stumbled upon such script that would fully support that.
You can display additional images under the main image, but they will not have the same functionality (e.g., zooming/dragging/etc) or you can display them as inline elements (obviously, there would be no image-related functionality).
I have this footer of a fixed nav-bar in Div.
<div id="footer">
<div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
<div class="row" id="bottomNav">
<div class="col-xs-4 text-center">
<a id="id1" href="#">
<img id="image1" src='img/feature1.png' alt='missing'>
<div class="caption">Act-1</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id2" href="#">
<img id="image2" src='img/feature2.png' alt='missing'>
<div class="caption">Act-2</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id3" href="#">
<img id="image3" src='img/feature3.png' alt='missing'>
<div class="caption">Act-3</div>
</a>
</div>
</div>
</div>
</div>
On click of image1, I want to do some stuff. I am using alert to test it. The jquery function is in a separate js file which is added in the html. This is the only function js file has in it. I tried to use #id1 and #image1 both in the ebelow function, but it just would not get called.
$("#image1").click(function() {
alert("you are in Act-1 window");
});
what's wrong in such a simple code, i just can't get it.
Your code works fine. It seems to be working for me. The alert gets called if that is what you are looking for
$("#image1").click(function() {
alert("you are in Act-1 window");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="footer">
<div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
<div class="row" id="bottomNav">
<div class="col-xs-4 text-center">
<a id="id1" href="#">
<img id="image1" src='img/feature1.png' alt='missing'>
<div class="caption">Act-1</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id2" href="#">
<img id="image2" src='img/feature2.png' alt='missing'>
<div class="caption">Act-2</div>
</a>
</div>
<div class="col-xs-4 text-center">
<a id="id3" href="#">
<img id="image3" src='img/feature3.png' alt='missing'>
<div class="caption">Act-3</div>
</a>
</div>
</div>
</div>
</div>
Why you put the image inside a href="#" if you are not going to use it? here you have the error
You can also avoid jQuery by vanila js.
var img = document.querySelector('#YourID');
img.addEventListener('click', handler function);
It's better to use separated function for handling ( in this case you can remove the handler).
I have using images src
<li class="col-xs-6 col-sm-4 col-md-3 disp" data-src="uploads/slider_img/negy.jpg">
<img class="img-responsive" src="uploads/slider_img/negy.jpg">
<div class="content"><img class="imageclass" src="img/hotspot.png" width="30px" height="30px" data-toggle="modal" data-target="#myModal1" style="top:243px; left:1024px; z-index: 1; position: absolute;">
<div class="child" style="top:234px; left:1074px;">
<h4>dfgh</h4>
<p>fghdg</p>
<div class="triangle-down"></div>
</div>
</div>
</li>
how to I call content child class depend image src
<li class="col-xs-6 col-sm-4 col-md-3 disp" data-src="uploads/slider_img/negx.jpg">
<img class="img-responsive" src="uploads/slider_img/negx.jpg">
<div lass="content"><img class="imageclass" src="img/hotspot.png" width="30px" height="30px" data-toggle="modal" data-target="#myModal1" style="top:490px; left:1188px; z-index: 1; position: absolute;">
<div class="child" style="top:481px; left:1238px;">
<h4>sa</h4>
<p>sas</p>
<div class="triangle-down"></div>
</div>
</div>
</li>
In order to select the next div.content you can use Javascript or jQuery.
Here is an example, using your code:
$(document).ready(function() {
$('img').each(function() {
if ($(this).attr('src') === 'uploads/slider_img/negx.jpg') {
$(this).parent().next().css("background-color", "red");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="col-xs-6 col-sm-4 col-md-3 disp" data-src="uploads/slider_img/negx.jpg">
<a href="">
<img class="img-responsive" src="uploads/slider_img/negx.jpg">
</a>
<div class="content">
<img class="imageclass" src="img/hotspot.png" width="30px" height="30px" data-toggle="modal" data-target="#myModal1" style="top:490px; left:1188px; z-index: 1; position: absolute;">
<div class="child" style="top:481px; left:1238px;">
<h4>sa</h4>
<p>sas</p>
<div class="triangle-down"></div>
</div>
</div>
</li>
Notes:
I'm selecting each image in the document, and iterating through them using each()
If the image src attribute match the path that I'm looking for, then go up in the hierarchy with parent() and select the next sibling with next()
Finally, apply the css styling with css()
I have a number of links with various data attributes assigned to them, and am trying to grab the content of data-short-description attribute when the link is clicked. The content of data-short-description would then be set into the .description div. This process would be repeated each time a different link is clicked, replacing the content inside .description.
I am able to hack JS but not fluent enough to write from scratch, so if somebody could help me using a mixture of (I assume) .data(),.onclick() etc that would be great.
A simplified version of my code:
HTML
<div id="container">
<div class="thumbnails">
<figure class="thumbnail">
<a href="#" data-short-description="DESCRIPTION 1 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a href="#" data-short-description="DESCRIPTION 2 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a href="#" data-short-description="DESCRIPTION 3 HERE!">
<img src="#">
</a>
</figure>
</div>
</div>
<div class="description">
data-short-description to go here upon clicking link.
</div>
Since you tagged your question with jQuery, I guess it's fine for me to use it.
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('.thumbnail a').click(function() {
$('.description').html($(this).attr('data-short-description'));
});
});
</script>
But, as alou mentioned, you could provide a class for the links and give the target div an own id. I used class="description-link" and id="description", so the whole thing looks like this:
<div id="container">
<div class="thumbnails">
<figure class="thumbnail">
<a class="description-link" id="default-description" href="#" data-short-description="DESCRIPTION 1 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
<img src="#">
</a>
</figure>
</div>
</div>
<div id="description">
data-short-description to go here upon clicking link.
</div>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
// fill in default description on page load
$('.description').html($('#default-description').attr('data-short-description'));
// change description when a link is clicked
$('.description-link').click(function() {
$('#description').html($(this).attr('data-short-description'));
});
});
</script>
This should do it
$('.thumbnail a').on('click', function(evt){
evt.preventDefault(); //dont do default anchor stuff
var description = $(this).data('short-description'); //get the text
$('.description').html(description);
});
However it would be better to use a generic class for the specific set of links, like descriptionlink or something and use this to trigger the event $('.descriptionlink').on('click'... and an id for the target (maybe the same as the class, #description )
Other than that should be fine.
A huge thank you to #hexaholic for the following answer. Brilliant!
HTML
<div class="container">
<div class="thumbnails">
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 1 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
<img src="#">
</a>
</figure>
</div>
</div>
<div class="description">
data-short-description to go here upon clicking link.
</div>
<div class="container">
<div class="thumbnails">
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 1 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
<img src="#">
</a>
</figure>
</div>
</div>
<div class="description">
data-short-description to go here upon clicking link.
</div>
JS
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
// updates a description box with the value of the given link
function updateDescription(link) {
// find the parent container
var parentContainer = link.closest('.container');
// the description box comes right after the container
var targetDiv = parentContainer.next();
//finally, update the content
targetDiv.html(link.attr('data-short-description'));
};
// fill in default description for each container
$('.container').each(function() {
var firstLink = $(this).find('.description-link').first();
updateDescription(firstLink);
});
// change description when a link is clicked
$('.description-link').click(function() {
// call the update function
updateDescription($(this));
});
});
</script>
I am trying to build an image grid with Isotope where a "Load More"-Button is positioned within that grid, at the end after all elements.
Placing the button was not a problem, and the insert of new elements neither, however I have strictly no idea how I can ensure that button always stays after the elements. In my current code, if the "Load More" button is clicked and more elements are inserted after the button.
Any idea how I could change that? Here what I've got some far: http://goo.gl/JbXkzC
Thanks!
First, your button can't be an isotope item if you don't want it part of the isotope layout so it is incorporated into the layout. You could use isotope's stamp option but the easiest way is to move it out of the col-xs-12 and into the row-fluid and change your button css slightly:
codepen
html:
<div class="container">
<div class="row">
<h1>Isotope Image Grid</h1>
<!--<button class="" id="button">Load More</button>-->
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12">
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
</div><button id="button">Load More</button>
</div>
</div>
css:
#button {
display:inline-block;
width: 25%;
height: 180px;
color: #fff;
font-size: 18px;
background-color: #C0392B;
border: 0px;
}
Looks like the only solution to this is to remove the "Load More" button and re-add it once the new elements have been appended.
$('#portfolioGrid').on("click", ".loadMore", function(addIsotopeItems){
addIsotopeItems.preventDefault();
var OElem = document.getElementById("button");
OElem.parentNode.removeChild(OElem);
var di="<div class=\'item item-new\'><img src=\'\'></img></div><button class=\'item loadMore\' id=\'button\'>Load More</button>";
newItems = $(di).appendTo('#portfolioGrid');
$("#portfolioGrid").isotope('insert', newItems );
});
Full code here on CodePen.