jquery gallery fade in/out - javascript

I am building a simple image gallery based on the following markup:
<div id="image-list">
<ul>
<li id="image-1">
<img src="myimage1.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-2">
<img src="myimage2.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-3">
<img src="myimage3.jpg" width="500" height="500" alt="My Image" />
</li>
</ul>
</div>
<ul id="thumb-list">
<li id="thumb-1"><img src="myimage1-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-2"><img src="myimage2-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-3"><img src="myimage3-thumb.jpg" width="50" height="50" alt="My Image" /></li>
</ul>
I have styled this using CSS so that only one of the larger images is visible at one time (using overflow: hidden with a fixed container height).
I am then using jquery to absolutely position the UL within the container to show each image, using the following markup:
$('#thumb-list li img').click(function() {
var image = $(this).parent().attr('id').substring(6);
var position = $('#image-' + image).position();
$("#image-list ul").css({'top' : '-' + position.top +'px'});
});
Basically I want to fade out the entire "#image-list ul" while it's position is changed and then fade it back in to show the new image.
Could someone suggest the most efficient way to do this? - any help is much appreciated!

Remove the height and width from you img tags, css can take care of that.
CSS
#image-list{
position:relative;
height:500px;
width:500px;
}
#image-list img{
height:500px;
width:500px;
}
#image-list li{
position:absolute;
top:0;
right:0;
}
JS
$('#thumb-list li img').click(function() {
var image = $(this).parent().attr('id').substring(6);
$('#image-' + image).fadeIn("slow").siblings().fadeOut("slow");
});
are you using prototype or jquery?
if your using jquery, instead of relying on the .css() function try the .hide() function as it does exactly the same thing as css({'display' : 'none'}). and .fadeIn() will animate the return of your div. on first load they'll all be visible so instead of hiding them with css tell jquery to hide all of them with this command.
$('#thumb-list il').hide();

Another solution might be to use a plug-in and then modify your styles so that your page doesn't look broken if someone has Javascript disabled.
Check out: http://medienfreunde.com/lab/innerfade/
It's quite easy to use and hard to mess up. Good luck! :)

Related

Manipulating Images in Array to fadein and out on hover via Jquery

I am trying to reference an array of images and everytime the user hovers over the image in the array, the image fades in. The image fades out when the user's mouse leaves the image.
the code that I have written is below but it does not seem to work. Help please
var imagearray=[document.getElementById("one"),document.getElementById("two"),document.getElementById("three")]
$.each(imagrarray,function(){
$.hover(function(){ $.fadeIn("slow");},function(){ $.fadeOut();
}); });
html below:
<div id="faces" style=" overflow-y:hidden; height:120px; display:inline-block; left: 20px ; position:relative; opacity:0.5" >
<div id="base" class="hidden" >
<li class=set1" style="display:inline;">
<img id="one" style="float:left" src="attachments/36508133/one.png?api=v2" height="100"width="52" />
<img id="two" style="float:left" src="attachments/36508133/two.png?api=v2" height="100"width="52"/>
<img id="three" style="float:left" src="attachments/36508133/three.png?api=v2" height="100" width="52"/>
</li></div></div>
Problem is that you're not applying the hover to anything.
The $.each callback has two arguments, the index of the iteration over the given array and then the array item at the given index. You need to pass this to hover. So...
$.each(imagrarray,function(index, item){
$(item).hover(function(){ $(this).fadeIn("slow");},function(){ $(this).fadeOut();
}); });
Also, you weren't applying the fadeIn/out to anything either. In this case, this refers to the element returned by $(item).
That said, the code could be refactored as you can see in Arun's jsfiddle.
I think what you are after is something like below, where you change the opacity of the elements
$('.hover-set').hover(function() {
$(this).fadeTo(500, 1);
}, function() {
$(this).fadeTo(500, .5);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faces" style=" overflow-y:hidden; height:120px; display:inline-block; left: 20px ; position:relative; opacity:0.5">
<div id="base" class="hidden">
<li class="set1" style="display:inline;">
<img id="one" class="hover-set" style="float:left" src="//placehold.it/64?text=1" height="100" width="52" />
<img id="two" class="hover-set" style="float:left" src="//placehold.it/64?text=2" height="100" width="52" />
<img id="three" class="hover-set" style="float:left" src="//placehold.it/64?text=3" height="100" width="52" />
</li>
</div>
</div>

Calculate element padding dynamically using JavaScript

I'm trying to calculate the padding-bottom property for multiple elements in an image gallery. Check out the following code for one element:
<div class="item-container fashion">
<a href="images/fashion/11-large.jpg"
data-size="600x900"
class="item"
style="padding-bottom: 150%">
<img class="lazyload"
alt="Description"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-sizes="auto"
data-src="images/fashion/11-small.jpg"/>
</a>
</div>
As you can see I define the size of the image in "data-size" attribute (600x900). In order to get the padding-bottom value which I need to prevent reflow, I simply divide calculate (height/width) x 100, which in this case yields 150 - my padding-bottom value.
Now I can easily calculate this manually and input it as I'm doing above and it works just fine. But since my gallery will contain hundreds of images all with different ratios, I'm gonna need a more automated way of calculating the padding value.
Is there anyway to achieve this by doing the calculation in JavaScript and then apply it to the respective element? If I were to include the dimensions in the filename for example and parse it maybe I could even avoid manually inputting the data-size value too...?
I would really like to avoid having to manually do hundreds of calculations, plus It'll be great to learn a new trick for the future. Thanks!
UPDATE
here's what I got so far, as you can see image1 and image2 have different dimensions and ratio. As you can see i'm doing something wrong the padding isn't working out just right. I'm setting "item" height to 0 because padding-bottom will end up taking care of the height. thoughts?
var tags = document.getElementsByClassName('item');
for (var i = 0; i < tags.length; ++i) {
/* This is the part I mentioned about, you may want to use one of the methods above depending on how your css and the rest of your code looks like*/
tags[i].style.paddingBottom = (100 * (tags[i].offsetHeight / tags[i].offsetWidth)) + 'px';
}
.item {
position: relative;
height: 0;
display: inline-block;
border: 1px solid red;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-size="600x900" class="item">
<img width="300" height="450" class="lazyload" alt="Image description" src="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-sizes="auto" />
</a>
</div>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-size="600x900" class="item">
<img width="300" height="200" class="lazyload" alt="Image description" src="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-sizes="auto" />
</a>
</div>
First of all why don't you have to define the dimension of the picture. You can use element.offsetWidth element.offsetHeight OR element.style.width, element.style.height (these two would have to be parsed because they return a string for instance 5px) OR element.getBoundingClientRect() (the lattest is an object containing top, left, right, bottom etc.)
Now, that being said using java you can do the following ...
var tags = document.getElementsByClassName('item');
for(var i = 0; i < tags.length; ++i){
/* This is the part I mentioned about, you may want to use one of the methods above depending on how your css and the rest of your code looks like*/
tags[i].style.paddingBottom = (100 * (tags[i].offsetHeight / tags[i].offsetWidth)) + 'px';
}
.item{
width: auto;
height: auto;
display: inline-block;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-size="600x900" class="item">
<img width="300" height="450" class="lazyload" alt="Image description" src="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-sizes="auto" />
</a>
</div>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-size="600x900" class="item">
<img width="300" height="200" class="lazyload" alt="Image description" src="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-sizes="auto" />
</a>
</div>

change css visibility state with inline javascript

I have a series of absolutely positioned images on a page that are all hidden using css: visibility. And a menu that corresponds with these images. Is there a way that I can change the visibility to visible onMouseover and back to hidden onMouseout?
<style type="text/css">
.class1 {visibility: hidden;}
.class2 {visibility: hidden;}
</style>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
<img src="image1.jpg" class="class1" />
<img src="image2.jpg" class="class2" />
Any help is much appreciated! I have to have this up by tomorrow :-\ Thanks in advance!
Use jQuery.. bind mouseover to your li.. set the css.. and bind mouseout.
$('#num1').mouseover(function() {
$('.class1').css('visibility', 'visible');
$('#num1').mouseout(function() {
$('.class1').css('visibility', 'hidden');
});
});
I only did the first li and I took the easy way of assuming it'd have an id, but you get the idea.
jsfiddle example
When you hide an image, the height and width of it will not be present and you won't be able to hover it. use div.
See my example
Fiddle - Click here
html:
<div class="holder">
<img src="http://dummy-images.com/abstract/dummy-160x120-Menu.jpg" class="img" />
</div>
<div class="holder">
<img src="http://dummy-images.com/abstract/dummy-160x120-Menu.jpg" class="img" />
</div>
css:
.holder{
width:160px;
height:120px;
background-color:blue;
}
.holder img{
visibility:hidden;
}
.holder:hover img{
visibility:visible;
}

How to change size of image in a active jQuery UI Tab?

I'm using jQuery UI tabs, and have an image inside the anchor of each tab list item (li). What I want to happen is for the image size to be a certain size for each inactive tab, and a larger size for the single active tab. I can't figure out how to do it. I'm not great with javascript and can't figure out how to get the script's if statement (see below) to be correct...all I was thinking I needed to do was to make it so that when there's a selected tab, the image inside that tab gets the larger dimensions.
Here's the script that I have:
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
if( $('#tabs .ui-tabs-active').attr('active') ) {
$('.theLogo').css({'width' : '120px' , 'height' : '60px'});
}
else {
$('.theLogo').css({'width' : '90px' , 'height' : '45px'});
};
});
</script>
Here's the HTML for the tabs:
<div id="tabs">
<ul>
<li><img src="picture1.png" alt="Picture 1" name="photo" id="photo" class="theLogo" /></li>
<li><img src="picture2.png" alt="Picture 2" name="photo2" id="photo2" class="theLogo" /></li>
<li><img src="picture3.png" alt="Picture 3" name="photo3" id="photo3" class="theLogo" /></li>
</ul>
<div id="tabs-1">
<iframe class="resultFrame" src="http://www.fakesite123.net"></iframe>
</div>
<div id="tabs-2">
<iframe class="resultFrame" src="http://www.fakesite1234.net"></iframe>
</div>
<div id="tabs-3">
<iframe class="resultFrame" src="http://www.fakesite1235.net"></iframe>
</div>
</div>
Thanks for any help!
Is there some reason you must do it with JS?
ul#tabs li a img {width: 90px; height: 45px;}
ul#tabs li.ui-tabs-active a img {width: 120px; height: 60px;}
Figured it out by using CSS instead of javascript. I put the following CSS:
.ui-state-default img {
width:90px;
height:45px;
}
.ui-state-active img {
width:120px;
height:60px;
}
I hope this helps someone who runs into the same problem.
Anyone that finds a javascript solution for this is more than welcome to post it!

CSS or Javascript href hover (or mouseover) showing additional clickable links

I have a need to present a user with various editing options when they hover over a link. I think I have seen it done somewhere, but I can't seem to find an example. I've built a quasi-example here, but it doesn't quite work right. Also, my example has me sort of cheating with margins of -45 just to get a working example.
Here is a snapshot of how my code functions (code below).
Here is a snapshot of how I would like it to function.
The mouseover (or something similar) would result in:
the bulleted item would change to a different image icon
a set of icons would appear to edit, delete, etc. and these would be selectable/clickable in the white space to the right of the href link.
the links would be of various lengths so I am trying not to use absolute positioning.
I realize the second requirement might not be possible if it's based on a real hover or mouseover because once the user is no longer mousing-over or hovering-over the active link, the icons should disappear and would become unselectable. Is there someway to make the whole row (maybe the link plus 45 pixels next to it) remain hoverable/mouseover-able? I do not want the user to have to click to see the options.
Is something like this possible with pure CSS? Or, is there a Javascript solution?
<head>
<style>
<!--
#NewsGroup1 {width:600px;}
a { text-decoration: none; } /* color: #006ab7; */
a:hover { text-decoration: none; }
#myoptions {
display: none; margin-left:-45px;
}
a:hover + #myoptions {
display: inline;
}
-->
</style>
</head>
<body>
<div id="NewsGroup1">
<ul>
<li>News</li>
<ul>
<li><a target="_blank" href="link1.htm">Link 1 </a><div id="myoptions"> A M E D</div></li>
<li><a target="_blank" href="link2.htm">Link 2 </a><div id="myoptions"> A M E D</div></li>
</ul>
</ul></div>
</body>
UPDATED CODE: 12/12/2011
<html>
<style>
#box1 {width:100px; background-color:yellow;}
li a img {display:none; margin-right:3px;}
li:hover img {display:inline-block;}
a {margin-right:20px;}
a.extras {margin-right:3px;}
</style>
<body>
<div id="box1">
<ul>
<li>Link1<a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li>
<li>Link1<a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li>
<li>Link1<a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li>
</ul>
</div>
</body>
</html>
I think it should work like that, just set the sources for the two image elements:
<html>
<body>
<style>
li > img{
display:none;
}
li:hover img {
display:inline-block;
}
a{
margin-right:20px;
}
</style>
<ul>
<li><a>Link1</a><img/><img/></li>
<li><a>Link2</a><img/><img/></li>
</ul>
</body>
</html>
You have the most part there, it seems to work. All i'd do is add the icon images you want between the #myoptions elements.
Update
I've created a JSFiddle with wht you want. Obviously change the images and stuff
http://jsfiddle.net/MaCqw/
There is no Javascript invloved here
I think you'd need Javascript, perhaps not. Check out jQuery show:
http://api.jquery.com/show/
This is my personal favorite, and it's pretty easy to implement.

Categories