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.
Related
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 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>
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 got a page with video thumbs. I wonder how i can display video duration onmouseover (display the duration in a blackbox in lower left corner of image)the thumb image and hide it again onmouseout? currently as you see in demo the video duration is visiable at all time but i want to make it visiable only when user puts the mouse over the thumb image . I be happy if you guys help me do this task.Thanks in advance.
demo on fiddle :http://jsfiddle.net/shodaburp/k6yAQ/1/
<div class="ListSlideDown">
<div class="ListFadeIn">
<div class="CurrentPage">1</div>
<div class="IsLastPage">0</div>
<div class="SortColumn">latest</div>
<div class="Item ItemLeft">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid1" title="video1">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 1" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid1"><span class="Text">51:57</span>
</a>
</div>
<div class="Title">
video 1
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 604</div>
</div>
<div class="Item ItemMiddle">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid2" title="video2">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 2" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid2"><span class="Text">12:23</span>
</a>
</div>
<div class="Title">
video 2
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 7531</div>
</div>
<div class="Item ItemRight">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid3" title="video3">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video3" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid3"><span class="Text">17:36</span>
</a>
</div>
<div class="Title">
video 3
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 996</div>
</div>
<div class="LineSpacer3"></div>
<div class="Item ItemLeft">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid4" title="video4">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 4" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid4"><span class="Text">31:57</span>
</a>
</div>
<div class="Title">
video 4
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 604</div>
</div>
<div class="Item ItemMiddle">
<div class="Clipping">
<a class="ImageLink" href="/video/video5" title="video5">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 5" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid5"><span class="Text">2:23</span>
</a>
</div>
<div class="Title">
video 5
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 2531</div>
</div>
<div class="Item ItemRight">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid6" title="video6">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video6" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid6"><span class="Text">12:36</span>
</a>
</div>
<div class="Title">
video 6
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 196</div>
</div>
<div class="LineSpacer3"></div>
<div class="BottomFix"></div>
</div>
</div>
I don't see why would you need JavaScript in this case:
http://jsfiddle.net/DerekL/habb9/
Just use CSS:
.Clipping{ /*<--Change to .Clipping*/
position: relative;
}
.DurationInfo{
position: absolute;
bottom: 5px;
right: 5px;
display: none;
}
.Item:hover .DurationInfo{
display: block;
}
And you can even add a nice transition:
http://jsfiddle.net/DerekL/habb9/2/
.DurationInfo{
opacity: 0;
right: -5px;
transition: opacity .2s ease-in-out, /*Prefix not included*/
right .2s ease-in-out;
}
.Item:hover .DurationInfo{
right: -5px;
opacity: 1;
}
just in case you want to do with jquery you can use hover and mouseleave methods.
http://jsfiddle.net/btevfik/k6yAQ/4/
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