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>
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 am using the fancybox to show six pictures in a slide show.But the first image appears twice, and I can't find the reason why. if i click the first image, the image will be appear twise when click previous twise.
$(document).ready(function() {
$(".fancybox").fancybox()
});
<div class="cbp-item item photography lifting">
<center><h3>Before</h3></center><hr><br>
<a rel="gallery" class="fancybox" href="img/slider/reve/Before1.jpg" title="Reverse Engineering">
<div class="cbp-caption-defaultWrap">
<img src="img/slider/reve/Before1.jpg" alt="Crexis">
<a rel="gallery" class="fancybox" href="img/slider/reve/Before2.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="img/slider/reve/Before3.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="img/slider/reve/Before4.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="img/slider/reve/Before5.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="img/slider/reve/Before6.jpg" title="Before"></a>
<div class="item_icon">
<p><i class="fa fa-camera-retro"></i></p>
<p>Reverse Engineering</p>
</div> <!-- End of .item_icon -->
</div> <!-- End of .cbp-caption-defaultWrap -->
</a> <!-- End of .fancybox -->
<div class="cbp-caption-activeWrap">
<div class="center-details">
<div class="details">
<h2 class="name">Reverse Engineering</h2>
<p class="tags">Before</p>
</div> <!-- End of .details -->
</div> <!-- End of .center-details -->
</div> <!-- End of .cbp-caption-activeWrap -->
</div> <!-- End of .cbp-item.item.photography.lifting -->
I changed the html, the first a tag was closed in a wrong way so edit your html to be like this.
<div class="cbp-item item photography lifting">
<center> <h3>Before</h3></center><hr><br>
<a rel="gallery" class="fancybox" href="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia18351-1041.jpg?itok=TyivXWrM" title="Reverse Engineering"><img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia18351-1041.jpg?itok=TyivXWrM" alt="Crexis"></a>
<div class="cbp-caption-defaultWrap">
<a rel="gallery" class="fancybox" href="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="https://images.contentful.com/256tjdsmm689/2T0QeKcvR6MSsckuKoYIwS/b57d12107fc5eb635e294ed1c76cbbac/feature-gettyimages.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="http://sabiaunite.com/uploads/gallery/12112013-080739AM-2.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="https://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" title="Before"></a>
<div class="item_icon">
<p><i class="fa fa-camera-retro"></i></p>
<p>Reverse Engineering</p>
</div>
</div>
<div class="cbp-caption-activeWrap">
<div class="center-details">
<div class="details">
<h2 class="name">
Reverse Engineering
</h2>
<p class="tags">
Before
</p>
</div>
</div>
</div>
</div>
https://jsfiddle.net/IA7medd/zrxL3unp/
I am trying to use owl carousel and echo.js for image carousel and and lazy loading.
Now the problem is only some of the images are loaded in the carousel. say 7 out of 10 is loading remaining 3 the echo js is not loading the image.
Why is this happening?
here is my code
<div id="brand-slider" class="owl-carousel brand-slider custom-carousel owl-theme">
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/univers.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/kelloggs.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/pampers.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/pepsico.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/p-g.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/vini.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/itc.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/nestle.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/cadbury.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/coco.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/kraft.jpg" src="assets/images/blank.jpg" alt="">
</a>
</div><!--/.item-->
</div><!-- /.owl-carousel #logo-slider -->
according to the docs here the default max of items is 5. So you need to set it to what you want. Like this
$(document).ready(function() {
$("#brand-slider").owlCarousel({
items : 10
});
});
Other examples of how to do this can be found here
I found the answer.
echo.init({
offset: 1000,
throttle: 250,
unload: false
});
we can use the offset parameter of the echo js to target the the images off the viewport.
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;
}
I have a jQuery slider that I am trying to repeat on the page nearly 20 times. If I have just one of the sliders, it works great! However, I need help figuring out what is wrong with it that makes it break if there are more more the initial set of sliders. If I can create solve this problem dynamically that would be optimal, so that an indefinite number of sliders can be added to the page. Code below:
jQuery:
<script type="text/javascript">
// Call plugin if you put in head if not not require DOMContentLoaded
document.addEventListener('DOMContentLoaded',function(){
new boxSlider(document.querySelector('#slide-one'),{
delay: '1000', // ms
effect: 'ease-in-out'
});
new boxSlider(document.querySelector('#slide-two'),{
delay: '2000', // ms
effect: 'ease'
});
new boxSlider(document.querySelector('#slide-three'),{
delay: '500', // ms
effect: 'linear'
});
});
</script>
HTML:
<div id="row1mini">
<section id="slide-one" class="slide">
<article class="slide-inner">
<figure>
<img src="http://ep.yimg.com/ay/stylinonline/superman-vintage-logo-3-4-raglan-t-shirt-sheer-4.jpg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="https://s7.jcrew.com/is/image/jcrew/78151_WW0699?$pdp_fs418$" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.royalrobbins.co.uk/images/coolmesh-baja-l-s-shirt-soapstone-p130-119_zoom.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
<section id="slide-two" class="slide">
<article class="slide-inner">
<figure>
<img src="http://www.patagonia.com/tsimages/55005_579.fpx?wid=1000&hei=1000&ftr=8&effect=dropshadow,0x000000,10,8,120,8&cvt=jpeg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="http://www.peterglenn.com/sites/default/files/imagecache/product_1000x1000/product_images_new/70288_13_BRT_BLUE_LG.jpg" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.oldnavy.com/products/res/thumbimg/fleece-pants-for-baby-tangelo.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
<section id="slide-three" class="slide">
<article class="slide-inner">
<figure>
<img src="http://www.photo-dictionary.com/photofiles/list/2517/3301gym_shoes.jpg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Mens'_ballroom_shoes,_Eurodance_CZ.jpg" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.dunklowbox.com/images/dunks/Reebok-Hello-Kitty-Travel-PT-20-INT-White-Red-RBK-Brass.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
</div>
HERE I DUPLICATE THE ABOVE HTML, CAUSING THE SLIDER TO BREAK
<div id="row1mini">
<section id="slide-one" class="slide">
<article class="slide-inner">
<figure>
<img src="http://ep.yimg.com/ay/stylinonline/superman-vintage-logo-3-4-raglan-t-shirt-sheer-4.jpg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="https://s7.jcrew.com/is/image/jcrew/78151_WW0699?$pdp_fs418$" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.royalrobbins.co.uk/images/coolmesh-baja-l-s-shirt-soapstone-p130-119_zoom.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
<section id="slide-two" class="slide">
<article class="slide-inner">
<figure>
<img src="http://www.patagonia.com/tsimages/55005_579.fpx?wid=1000&hei=1000&ftr=8&effect=dropshadow,0x000000,10,8,120,8&cvt=jpeg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="http://www.peterglenn.com/sites/default/files/imagecache/product_1000x1000/product_images_new/70288_13_BRT_BLUE_LG.jpg" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.oldnavy.com/products/res/thumbimg/fleece-pants-for-baby-tangelo.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
<section id="slide-three" class="slide">
<article class="slide-inner">
<figure>
<img src="http://www.photo-dictionary.com/photofiles/list/2517/3301gym_shoes.jpg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Mens'_ballroom_shoes,_Eurodance_CZ.jpg" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.dunklowbox.com/images/dunks/Reebok-Hello-Kitty-Travel-PT-20-INT-White-Red-RBK-Brass.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
</div>
You can repeat the HTML but need to change the id's of the added sliders... id's need to be unique.. you'll need to add more slider instances for each set of unique id's