I am setting up blueimp lightbox,the lighbox is starting but is not loading/displaying the images, am new what shall i add in the script to allow it to find the images..? i would like to just be able to have the lighbox display images from any thumbnail image clicked on...
thanks for your help.
here is my code:
<body>
.
.
.
<div class="container marketing">
<div class="row">
<div class="col-md-12">
<!--slideshowarea-->
<div class="col-md-offset-2 col-md-10">
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div><!-- blueimp-gallery -->
<!--links-->
<div id="links">
<div class="row">
<div class="col-md-12" id="links1row">
<a href="./imgs/ibiziriko/1.0.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/1.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/2.0.jpg" title="Apple" >
<img src="./imgs/thumbnails/ibiziriko/2.0.jpg" alt="Apple" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/4.jpg" title="Orange" >
<img src="./imgs/thumbnails/ibiziriko/4.jpg" alt="Orange" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/5.jpg" title="Orange" >
<img src="./imgs/thumbnails/ibiziriko/5.jpg" alt="Orange" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12" id="links2row">
<a href="./imgs/6.0.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/6.0.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/7.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/7.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/8.0.jpg" title="Banana">
<img src="./imgs/thumbnails/ibiziriko/8.0.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/8.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/8.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12" id="links1row">
<a href="./imgs/ibiziriko/9.jpg" title="Banana" >
<img src="imgs/thumbnails/ibiziriko/9.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/10.0.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/10.0.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/10.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/10.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/11.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/11.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/12.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/12.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/13.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/13.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/14.1.jpg" title="Banana" >
<img src="imgs/thumbnails/ibiziriko/14.1.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/14.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/14.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/16.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/16.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/18.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/18.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/21.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/21.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/22.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/22.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/23.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/23.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/24.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/24.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/25.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/25.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/26.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/26.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/27.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/27.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/28.jpg" title="Banana" >
<img src="imgs/thumbnails/ibiziriko/28.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/29.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/29.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/30.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/30.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
</div><!--/links-->
</div>
</div>
</div><!--/row-->
.
.
.
</div><!-- /.container -->
<script src="./dist/js/jquery-1.11.0/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>
<script src="./docs/assets/js/docs.min.js"></script>
<script src="./js/blueimp-gallery.min.js"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
I have it working fine here with your code: http://jsfiddle.net/3su8Y/
Wondering if you maybe don't have your href pointing to the right image. You do have to have a different file for both thumbnail and main image.
<a href="http://placehold.it/400x400&text=Photo" title="Banana">
<img src="http://placehold.it/100x100&text=Thumbnail" alt="Banana" class="img-thumbnail">
</a>
Related
This is not my script. I just copy scripts and learn something of them so I can advance in HTML knowledge. This code it works only in a part. It shows ok by part of design, but when I press arrows it won't slide to new images
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-630px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="2" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='fallout/'" href="fallout/">
<img src="ASSETS/img/fallout.png">
<div title="Hacking is now possible without vision!" class="caption">Fallout Version</div>
</a>
<a id="green" onclick="location.href='blue/'" href="blue/">
<img src="http://i.imgur.com/57C9mln.png">
<div class="caption">GeekTyper Blue</div>
</a>
<a onclick="location.href='writer/'" href="writer/">
<img src="ASSETS/img/writer.png">
<div title="Hacking is now possible without vision!" class="caption">Writer</div>
</a>
<br><br>
<a style="color:white;padding:20px;" href="mailto:geektyper#outlook.com">Suggest a theme</a>
</div>
</div>
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a id="green" style="background:#bd0101;" onclick="location.href='tegnio/'" href="tegnio/">
<img src="ASSETS/img/main.png" title="Remembers your settings">
<div class="caption">Tegnio (Customizable)</div>
</a>
<a onclick="location.href='shield/'" href="shield/">
<img src="ASSETS/img/shield.png">
<div title="" class="caption">SHIELD Version</div>
</a>
<a id="green" onclick="location.href='scp/'" href="scp/">
<img src="http://i.imgur.com/bF2tc2V.jpg">
<div class="caption">SCP</div>
</a>
<a onclick="location.href='umbrella/'" href="umbrella/">
<img src="ASSETS/img/umbrella_thumb.png">
<div class="caption">Umbrella Corp</div>
</a>
<a onclick="location.href='aperture/'" href="aperture/">
<img src="http://i.imgur.com/Kb4o0uI.jpg">
<div class="caption">Aperture Science</div>
</a>
<a onclick="location.href='combine/'" href="combine/">
<img src="http://i.imgur.com/sxaHAoi.jpg">
<div class="caption">Combine</div>
</a>
<a onclick="location.href='blackmesa/'" href="blackmesa/">
<img src="http://i.imgur.com/T1pL2ib.jpg">
<div class="caption">Black Mesa</div>
</a>
<a onclick="location.href='plain/'" href="plain/">
<img src="http://i.imgur.com/RZG9ghe.png">
<div class="caption">Plain Terminal</div>
</a>
<a onclick="location.href='matrix/'" href="matrix/">
<img src="http://i.imgur.com/lHjKmQT.png">
<div class="caption">Matrix</div>
</a>
</div>
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='dharma/'" href="dharma/">
<img src="http://i.imgur.com/QXMmQwN.png">
<div class="caption">Dharma</div>
</a>
<a onclick="location.href='tegnio/'" href="tegnio/">
<img src="http://i.imgur.com/DXB4jK7.png">
<div class="caption">Sliv</div>
</a>
<a onclick="location.href='pony/'" href="pony/">
<img src="http://i.imgur.com/bMwdWFF.png">
<div class="caption">MLP Typer</div>
</a>
<a onclick="location.href='word/'" href="word/">
<img src="http://i.imgur.com/8QWNpb4.png">
<div class="caption">Microsoft Word</div>
</a>
<a onclick="location.href='studio/'" href="studio/">
<img src="http://i.imgur.com/tTwtzQz.png">
<div class="caption">Visual Studio</div>
</a>
<a onclick="location.href='lolcode/'" href="lolcode/">
<img src="http://i.imgur.com/OzxnXFb.png">
<div class="caption">LOLCODE</div>
</a>
<a onclick="location.href='hey/'" href="hey/">
<img src="http://i.imgur.com/5Sqs6jO.png">
<div class="caption">HE-MAN</div>
</a>
<a onclick="location.href='braile/'" href="braile/">
<img src="http://i.imgur.com/vV4t9Jm.png">
<div title="" class="caption">Braile Version</div>
</a>
<a onclick="location.href='alien/'" href="alien/">
<img src="ASSETS/img/alien.png">
<div title="" class="caption">Alien Version</div>
</a>
</div>
</div>
<div class="swiper-slide" data-swiper-slide-index="2" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='fallout/'" href="fallout/">
<img src="ASSETS/img/fallout.png">
<div title="Hacking is now possible without vision!" class="caption">Fallout Version</div>
</a>
<a id="green" onclick="location.href='blue/'" href="blue/">
<img src="http://i.imgur.com/57C9mln.png">
<div class="caption">GeekTyper Blue</div>
</a>
<a onclick="location.href='writer/'" href="writer/">
<img src="ASSETS/img/writer.png">
<div title="Hacking is now possible without vision!" class="caption">Writer</div>
</a>
<br><br>
<a style="color:white;padding:20px;" href="mailto:geektyper#outlook.com">Suggest a theme</a>
</div>
</div>
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a id="green" style="background:#bd0101;" onclick="location.href='tegnio/'" href="tegnio/">
<img src="ASSETS/img/main.png" title="Remembers your settings">
<div class="caption">Tegnio (Customizable)</div>
</a>
<a onclick="location.href='shield/'" href="shield/">
<img src="ASSETS/img/shield.png">
<div title="" class="caption">SHIELD Version</div>
</a>
<a id="green" onclick="location.href='scp/'" href="scp/">
<img src="http://i.imgur.com/bF2tc2V.jpg">
<div class="caption">SCP</div>
</a>
<a onclick="location.href='umbrella/'" href="umbrella/">
<img src="ASSETS/img/umbrella_thumb.png">
<div class="caption">Umbrella Corp</div>
</a>
<a onclick="location.href='aperture/'" href="aperture/">
<img src="http://i.imgur.com/Kb4o0uI.jpg">
<div class="caption">Aperture Science</div>
</a>
<a onclick="location.href='combine/'" href="combine/">
<img src="http://i.imgur.com/sxaHAoi.jpg">
<div class="caption">Combine</div>
</a>
<a onclick="location.href='blackmesa/'" href="blackmesa/">
<img src="http://i.imgur.com/T1pL2ib.jpg">
<div class="caption">Black Mesa</div>
</a>
<a onclick="location.href='plain/'" href="plain/">
<img src="http://i.imgur.com/RZG9ghe.png">
<div class="caption">Plain Terminal</div>
</a>
<a onclick="location.href='matrix/'" href="matrix/">
<img src="http://i.imgur.com/lHjKmQT.png">
<div class="caption">Matrix</div>
</a>
</div>
</div></div>
<div class="swiper-pagination swiper-pagination-clickable"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
this is script
<script data-rocketsrc="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
spaceBetween: 30
});
</script>
Always check the console!
[F12] on the keyboard
When you have errors, look for 404 (Not Found) on .js files first.
Then, you'll probaly see errors like Swiper is not defined dissapear too.
About ERR_BLOCKED_BY_CLIENT, this is due to the use of Ad Block. It isn't due to your code.
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.
When I load the page first: Not display any of the pictures.
When I load the page second/third/etc...: All picture display.
What do I do wrong?
<br style="clear:left;">
<div style="padding-top:48px; padding-bottom:48px; background-color: #1D1626;">
<div id="gallery-container" style="width:828px; margin-left:auto; margin-right:auto;">
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/56-teszt-1.jpg">
<img src="/gallery/tgn/example/56-teszt-1.jpg" alt="" name="#capty-id-56" class="gallery-picture">
</a>
<div id="capty-id-56">Teszt1</div>
</div>
<div class="gallery-item row1">
<a rel="prettyPhoto[gallery]" href="/gallery/example/55-teszt-2.jpg">
<img src="/gallery/tgbs/example/55-teszt-2.jpg" alt="" name="#capty-id-55" class="gallery-picture">
</a>
<div id="capty-id-55">Teszt2</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="/gallery/tgn/example/54-teszt-3.jpg" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
</div>
</div>
<script>
$(function() {
var $container = $('#gallery-container');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector : '.gallery-item',
columnWidth : 276
});
});
});
</script>
http://masonry.desandro.com/demos/images.html#content
mansonry plugin
imagesloaded plugin
MyTest page: http://mansonry-imagesloaded-test.darkrpg.hu/
working for me see on jsfiddle http://jsfiddle.net/zYqht/
<div style="background-color:#ee6;">
<div id="gallery-container">
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/56-teszt-1.jpg">
<img src="http://lorempixel.com/226/188/?227" alt="" name="#capty-id-56" class="gallery-picture">
</a>
<div id="capty-id-56">Teszt1</div>
</div>
<div class="gallery-item row1">
<a rel="prettyPhoto[gallery]" href="/gallery/example/55-teszt-2.jpg">
<img src="http://lorempixel.com/400/188/?217" alt="" name="#capty-id-55" class="gallery-picture">
</a>
<div id="capty-id-55">Teszt2</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="http://lorempixel.com/226/188/?222" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="http://lorempixel.com/226/100/?222" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="http://lorempixel.com/123/188/?222" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="http://lorempixel.com/226/321/?222" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="http://lorempixel.com/226/188/?222" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
</div>
</div>
<script>
$(function() {
var $container = $('#gallery-container');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector : '.gallery-item',
});
});
});
</script>
I would like to create a feature so when the user hovers over the LI, a div crawls down using jquery easing.
JsFiddle: http://jsfiddle.net/WZvPk/2/
This is what i have so far:
HTML
<div class="sectorWrapper">
<ul class="sectors">
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors/introtosectors/examplesectorpage.aspx" target="_self">
<div class="sectorTitle">
Sector 1
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" style="width: 193px; height: 88px;" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 2
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div></div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 3
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 4
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 5
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 6
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 7
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 8
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
<br />
</div>
</div>
</li>
</ul>
</div>
CSS:
/*force the image size to be set by css*/
div.sectorImage a img
{
width:193px;
height:88px;
}
div.showMe
{
display:block;
}
.sectorGrid
{
position:relative;
}
jquery
$("ul.sectors li").hover(
function () {
$("div.sectorImage div.showme").css("display", "block");
},
function () {
$("div.sectorImage div.showme").css("display", "none");
}
);
The idea is when the user hovers over the section it will slowely drop the hidden div at the bottom allowing them to click the "view project" link.
I am having problems making this work with just one LI, if you test the jsfiddle you can see display:block seems to work but for all the LI, which is wrong.
Could you help me now that ive explained better?
If you change this
$("div.sectorImage div.showme").css("display", "block");
to this
$(this).children(".sectorImage").children(".showme").css("display", "block");
you'll be showing only one div