We Keep Coding

Slider - How would you make a simple slider?

EDIT: I WANT MY SLIDER TO BE EASY TO YOU AND ONCE A LINK IS CLICKED THE IMAGE THAT CORRELATES WITH LINK SHOWS.
I'm looking to make a really simple "slider" that if you click a link, the img shows that correlates with it. I've been trying to find something for a bit now and things are either too flash or don't suit my needs. This came close: http://jsfiddle.net/bretmorris/ULNa2/7/
I would something a little simpler that can be applied easily to multiple images for different divs.
This is what my code looks like with just a plain img tag to it:
<div id="adobe_content" class="hdiv"><button class="x">X</button>
<img src="images/adobefront.png"><br>
<img src="images/adobeinside.png"><br>
<img src="images/adobeback.png"><br>
<h5>Adobe Brochure</h5>
<p>
I wanted to make something functional and out the box that Adobe might consider giving out. It's clean like their work and sparks interest in opening the brochure with the cut out in the center. The front flap is able to slide into a slot on the right side for a neat logo. They're now more interested in their cloud, but the information is inside is still relevant!
</p>
<b>Programs used: Adobe Illustrator, InDesign and Photoshop.</b>
</div>
The code doesn't work for me because, well I partially don't understand it, and I'm not sure how to make it suit my needs (especially if I got up to multiple images) like correlating with an image.

Perhaps understanding what is going on would maybe get you on the right track, so here is an explanation:
$('a.prev').click(function() {
prevSlide($(this).parents('.slideshow').find('.slides'));
});
//clicking image goes to next slide
$('a.next, .slideshow img').click(function() {
nextSlide($(this).parents('.slideshow').find('.slides'));
});
This part is relatively straightforward, when you click on the previous or next links, call the prevSlide or nextSlide function, passing the collection of slides as an argument.
//initialize show
iniShow();
function iniShow() {
//show first image
$('.slideshow').each(function() {
$(this).find('img:first').fadeIn(500);
})
}
Initialize the slideshow by finding each slideshow on the page and fading in the first image. $(this) refers to the <div class="slideshow"> parent, find all child image tags and take the first, fade that element in (and do it in 500 milliseconds).
function prevSlide($slides) {
$slides.find('img:last').prependTo($slides);
showSlide($slides);
}
function nextSlide($slides) {
$slides.find('img:first').appendTo($slides);
showSlide($slides);
}
The prevSlide and nextSlide functions both rearrange the order of images, this line in particular:
$slides.find('img:first').appendTo($slides);
Is moving the first image to the end of the images, so:
<img src="http://placekitten.com/300/500" width="300" height="500" />
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
becomes:
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
<img src="http://placekitten.com/300/500" width="300" height="500" />
$slides.find('img:last').prependTo($slides); does the inverse and moves the last image to the beginning.
function showSlide($slides) {
//hide (reset) all slides
$slides.find('img').hide();
//fade in next slide
$slides.find('img:first').fadeIn(500);
}
Finally, showSlide accepts the collection of images, hides all of them and then fades in the first image (since the collection is reordered each time, the first is a different image).
Now, if you want a link for each image that will display a corresponding image, you could do something as simple as:
<a class="image" data-src="http://placekitten.com/300/500">Kitten 1</a>
<a class="image" data-src="http://placekitten.com/200/400">Kitten 2</a>
<a class="image" data-src="http://placekitten.com/400/500">Kitten 3</a>
<div id="image-container">
<img src="http://placekitten.com/300/500" />
</div>
and something like the following:
$('.image').on('click', function() {
var imageSrc = $(this).data('src');
$('#image-container img').prop('src', imageSrc);
});
Which will update the child image tag of <div id="image-container"> with the data-src attribute value in the clicked link.
http://jsfiddle.net/9sxt6n0t/
Hope this helps.

just a quick function to slide
function slideIt(images , prev , next){
$('.slideshow img:nth-child(1)').show();
var imagesLength = $(images).length;
var i = 1;
$(prev).click(function() {
$(images).hide();
if(i !== 1){
$(images + ':nth-child('+ (i - 1) +')').show();
i--;
}else{
$(images +':nth-child('+imagesLength +')').show();
i = imagesLength;
}
});
//clicking image goes to next slide
$(''+next+','+images+'').on('click',function() {
$(images).hide();
if(i !== imagesLength){
$(images + ':nth-child('+ (i + 1) +')').show();
i++;
}else{
$(images + ':nth-child(1)').show();
i = 1;
}
});
}
and use like that slideIt(Images , prevArrow , nextArrow)
slideIt('.slideshow img','a.prev' , 'a.next');
DEMO HERE

How to create span content on mouse hover?

I want a slider with content. but the content should appear only when mouse hover. This is the code I'm using:
<div id="slideshow" style="width:560px; background:#999;">
<div id="slidesContainer">
<div class="slide">
<img src="js/1.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/2.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/3.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/4.jpg" />
<div> some text </div>
</div>
</div>
</div>
and the jquery 1.8.3 lib and this code
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Hide left arrow control on first load
manageControls(currentPosition);
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
if(position >= 4)
{
position=0;
currentPosition=0;
}
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
function Aplay(){
// Determine new position
currentPosition = currentPosition+1 ;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
setTimeout(function(){Aplay();},2000);
}
setTimeout(Aplay(),20000);
});
now the <div> some text </div> should appear only when mouse hover, example: http://www.backslash.gr/demos/contenthover-jquery-plugin/#demo4

CSS
<style type="text/css">
.title {visibility:hidden;}
</style>
HTML add a class title to all needed DIV elements
<div class="title"> some text </div>
Add this to your script
$('#slideInner').mouseover(function() {
$('#slideInner .title').css('visibility', 'visible');
});
$('#slideInner').mouseout(function() {
$('#slideInner .title').css('visibility', 'hidden');
});
Working jsBin

A simple solution would be to set up your 'slide' divs like this:
<div class="slide" onMouseOver="$('#TEXT1').css('display','block')" onMouseOut="$('#TEXT1').css('display','none')">
<img src="js/1.jpg" />
<div id="TEXT1" style="display:none;"> some text </div>
</div>

It's easy and i think this is the fastest solution, because require less jquery than the others (= keep your code clean)
Add the following class to every div which contain the description: class="slide-desc" to your HTML
Add var slideDesc = $('.slide-desc'); to your JS, which is just to fit your way of write jQuery, and slideDesc.hide(); (or $('.slide-desc').hide;, to use a faster way instead). This statement (it's better to call the .hide() method in first line of your JS, to avoid the description flashing while page is loading. Put it just after your declaration of variables.
Add somewhere in the JS these lines: $('#slidesContainer').hover(function(){
slideDesc.show();
});
You've done! :D

Html in-page hidden text that isn't shown until link is clicked

sort of new to html. I'm looking to create animation that when am image is clicked, it plays an animation that splits open a half page of text and in stuff. Something like this: http://sketchtoy.com/62368639

If you want to do things like that, you should really have a look at a javascript framework like jquery (www.jquery.com)
I find this one particularly easy to learn.
For what you want to do:
<div style="display: none;" id="mytext">Your text</div>
<a onclick="$('#mytext').show()"></a>

The basic process is
Add the click handler for the images
Find the last image in the row that the clicked image is in
set the contents of the expanding element
insert the expanding element after the image from step 2
show the expanding element (in this case a slideDown animation)
This is using jQuery library, which you did not tag, but it makes doing this a lot easier. If you need a vanilla javascript approach one can be added.
HTML
<div id="container">
<img src="http://placehold.it/128x128" />
<img src="http://placehold.it/128x128" />
<img src="http://placehold.it/128x128" />
<img src="http://placehold.it/128x64" />
<img src="http://placehold.it/128x64" />
<img src="http://placehold.it/128x64" />
<div id="expander">
<img src="" />
<div id="info">
some info
</div>
</div>
</div>
JS
//Just making the expander half the height of the viewport
var winheight = $(window).height();
$("#expander").css("height",winheight/2);
$("img").click(function(){
var img = $(this);
var src = img.attr("src");
var afterImg = findLastImgInRow(img);
var expander = $("#expander");
//Hide the expander if previously open
expander.hide(0);
//just setting the insides
expander.find("img").attr("src",src);
expander.find("#info").html("This is a test");
//Put the expander after the last image in the row
//so it will appear between its row and the next
expander.insertAfter(afterImg);
expander.slideDown(600);
//This scrolls the page so that it will make the
//expander appear in the middle of the page
$('html, body').animate({
scrollTop: expander.offset().top-(winheight/4)
}, 600);
});
//Function to find the last image
//in a row by comparing their offset top values
function findLastImgInRow(img){
var imgTop = img.offset().top;
var img2 = img;
do{
if( img2.offset().top != imgTop ){
img2 = img2.prev();
break;
}
}while(img2=img2.next());
return img2;
}
JSFiddle Demo

JavaScript Fade In/Out issues

I am having some difficulty trying to get my Fade In and out effect working properly. I think I am over complicating it.
I have 4 images, however only the first 2 need to be faded out and in on hover of the image (The other 2 images come into play with some other feature on the page).
My HTML is:
<div class="square">
<div class="imageHolder">
<!--Comment out and uncomment BG image to show transitions on BG images-->
<img class="one" src="image_01.jpg" />
<img class="two" src="image_02.jpg" />
<img class="three" src="image_03.jpg" />
<img class="four" src="image_04.jpg" />
</div>
</div>
Images, two, three, four are displayed none
JS:
$('.square').mouseover(function () {
$(this).find('img').each(function () {
if ($(this).attr('class') === 'two') {
$(this).fadeIn('slow');
}
if ($(this).attr('class') === 'one') {
$(this).fadeOut('slow');
}
});
});
Any help would be much appreciated.
Thanks for the responses.
I was trying to be too clever and it didn't need it. Is there a way for the the fadein and out to happen simultaneously without the use for a plugin?

Why do the each and not just selected them?
var imgs = $(this).find("img");
imgs.filter(".one").fadeOut('slow');
imgs.filter(".two").fadeIn('slow');
or
var imgs = $(this);
imgs.find(".one").fadeOut('slow');
imgs.find(".two").fadeIn('slow');

Try to do it like this:
$(".one").fadeIn("slow", function() { $(this).fadeOut("slow") });
$(".two").fadeIn("slow", function() { $(this).fadeOut("slow") });
Update:
I misread you question and thought you want both to fade in and out. To make the first one fade in and the second fade out use something like this:
$(".one").fadeIn("slow");
$(".two").fadeOut("slow");
If you have other elements with one and two classes and don't want to affect them, you can type $(".imageHolder .one") and $(".imageHolder .two") instead of $(".one") and $(".two").
If you have multiple imageHolder elements on your page, use find() function as suggested by epascarello or sushanth reddy.

You do not need a .each loop .. Just find the img inside the div and do your operations on it
Try this instead..
$('.square').mouseover(function() {
$(this).find('.two').fadeIn('slow');
$(this).find('.one').fadeOut('slow');
});​
Check FIDDLE

I think this is what you're looking for:
$('.square img')
.mouseover(function () {
$(this).fadeIn('slow');
})
.mouseout(function () {
$(this).fadeOut('slow');
});

I think you will better use jquery.hoverIntent.js. It will create a little delay time when you will move your cursor rapidly over the different images.
an example
$(document).ready(function(){
var config = {
interval: 230,
over: zoomIn,
out: zoomOut
};
$("div#clients_wrap div").hoverIntent(config);
});
zoomIn en zoomOut are functions, you could declare them with an fadein, fadeout respectively. This is just an improvement.

Basically assign a class to the group of images that need to fade in/out on hover in/out respectively
<div class="square">
<div class="imageHolder">
<!--Comment out and uncomment BG image to show transitions on BG images-->
<img class="one fadeeffect" src="image_01.jpg" />
<img class="two fadeeffect" src="image_02.jpg" />
<img class="three" src="image_03.jpg" />
<img class="four" src="image_04.jpg" />
</div>
</div>
javascript:
$('.fadeeffect')..hover(function(){
// write your code here
}

Hide Content Loading Gif

I have two large image files in a div on a page that take several seconds to load. How can I hide the loading content while a "loading gif" appears and then have the content appear once it has fully loaded?
I don't really know anything about javascript but I tried using this code. It did half of what I wanted it to do. The "loading gif" worked but the problem was that the content was visible as it was loading.
http://aaron-graham.com/test2.html
<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;">
<img src="img/parallax/ajax-loader.gif" border=0>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
Any help would be greatly appreciated!

Use jquery, with code like:
$(document).ready(function(){
$('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});
With the html like:
<img id="pic1" />
It works by running when document's ready function is called (which is called after the DOM and other resources have been constructed), then it will assign the img's src attribute with the image's url you want.
Change the nyquil.org url to the image you want, and add as many as needed (just don't go overboard ;). Tested Firefox 3/chrome 10.
Here is the demo: http://jsfiddle.net/mazzzzz/Rs8Y9/1/

Working off your HTML structure I added a notifyLoaded class for the two images so you can watch for when both have loaded via an onload event. Since css background images don't get that event I've created a hidden img using the background's path so we can test when that image is loaded
HTML:
<div id="loading">
<img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" />
</div>
<div id="vertical">
<div>
<div class="panel">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" />
</div>
</div>
</div>
<div id="imgLoader">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" />
</div>
You have reference to jQuery in your page already so I've replaced your script to the following.
jQuery:
$(document).ready(function() {
var $vertical = $('#vertical');
var $imgs = $('.notifyLoaded');
var imgCount = $imgs.length;
var imgLoadedCount = 0;
$vertical.backgroundparallax(); // Activate BG Parallax plugin
$imgs.load(function() {
console.log(this);
imgLoadedCount++;
if (imgCount == imgLoadedCount) {
// images are loaded and ready to display
$vertical.show();
// hide loading animation
$('#loading').hide();
}
});
});
I've also set #Vertical to a default display:none; which gets changed when images have loaded
CSS:
body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}