We Keep Coding

show an element after clicking two or more different elements

I have different elements and want to connect them with lines after clicking on them. The problem is that each element can be connected with several other elements, so there are more than one possibilities to combine each element, which means I have to click all of the elements I want to be connected to show the lines between.
For example: when you click #button1 and #button2 a line appears between them. When you click now #button3 a line between #button2 and #button3 would show up in addition to the first line. (The lines are images which should be shown after clicking the buttons).
I couldn't find any solutions where you can trigger an event after clicking two or more elements. Hope somebody can help me!
#button1 {
border: #000000 solid;
width: 100px;
float: left;
}
#button2 {
border: #000000 solid;
width: 100px;
margin-left: 300px;
}
#button3 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 0px;
float: left;
}
#button4 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 300px;
}
#line12 {
margin-left: 55px;
margin-top: 17.5px;
position: absolute;
visibility: hidden;
}
#line24 {
margin-left: 350px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line14 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line13 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line32 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
<div id="line12">
<img src="img/line12.png">
</div>
<div id="line14">
<img src="img/line14.png">
</div>
<div id="line24">
<img src="img/line24.png">
</div>
<div id="line13">
<img src="img/line13.png">
</div>
<div id="line32">
<img src="img/line32.png">
</div>
<div id="button1">show lines 1</div>
<div id="button2">show lines 2</div>
<div id="button3">show lines 3</div>
<div id="button4">show lines 4</div>

Try something like this. Remember that you should incluse your js
var firstEl = -1;
$("#button1").on("click",function(){
if (firstEl == -1){
firstEl = 1;
} else {
$("line" + firstEl + "1").show();
console.log("show " + "line" + firstEl + "1");
firstEl = -1;
}
});
$("#button2").on("click",function(){
if (firstEl == -1){
firstEl = 2;
} else {
$("line" + firstEl + "2").show();
console.log("show " + "line" + firstEl + "2");
firstEl = -1;
}
});
$("#button3").on("click",function(){
if (firstEl == -1){
firstEl = 3;
} else {
$("line" + firstEl + "3").show();
console.log("show " + "line" + firstEl + "3");
firstEl = -1;
}
});
$("#button4").on("click",function(){
if (firstEl == -1){
firstEl = 4;
} else {
$("line" + firstEl + "4").show();
console.log("show " + "line" + firstEl + "4");
firstEl = -1;
}
});
#button1{
border:#000000 solid;
width:100px;
float:left;
}
#button2{
border:#000000 solid;
width:100px;
margin-left:300px;}
#button3{
border:#000000 solid;
width:100px;
margin-top:175px;
margin-left:0px;
float:left;}
#button4{
border:#000000 solid;
width:100px;
margin-top:175px;
margin-left:300px;
}
#line12 {
margin-left:55px;
margin-top:17.5px;
position:absolute;
visibility:hidden;
}
#line24 {
margin-left: 350px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line14 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line13 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line32 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="line12"><img src="img/line12.png"></div>
<div id="line14"><img src="img/line14.png"></div>
<div id="line24"><img src="img/line24.png"></div>
<div id="line13"><img src="img/line13.png"></div>
<div id="line32"><img src="img/line32.png"></div>
<div id="button1">show lines 1</div>
<div id="button2">show lines 2</div>
<div id="button3">show lines 3</div>
<div id="button4">show lines 4</div>

Try using following code :
HTML :
<div id="line12" class="line-image-container">
<img src="img/line12.png">
</div>
<div id="line14" class="line-image-container">
<img src="img/line14.png">
</div>
<div id="line24" class="line-image-container">
<img src="img/line24.png">
</div>
<div id="line13" class="line-image-container">
<img src="img/line13.png">
</div>
<div id="line32" class="line-image-container">
<img src="img/line32.png">
</div>
<div id="button1" data-line-no="1">show lines 1</div>
<div id="button2" data-line-no="2">show lines 2</div>
<div id="button3" data-line-no="3">show lines 3</div>
<div id="button4" data-line-no="4">show lines 4</div>
jQuery :
var i=0;
var line_obj = array();
$('button').on('click', function() {
$('.line-image-container').css('visibility', 'hidden');
if(i<=2) {
var line = $(this).attr('data-line-no');
line_obj.push(line);
i++;
}
if(i == 2) {
$('#line'+line_obj[0]+line_obj[1]).css('visibility', 'visible');
i = 0;
}
});
It would be better if you add your code in jsfiddle.

You could try something like this:
$(function() {
var buttonClicks = [];
$(".test").click(function(e) {
var btnId = $(e.target).attr('id');
// make sure the same button wasnt clicked twice
if (buttonClicks[0] === btnId)
return;
buttonClicks.push(btnId);
if (buttonClicks.length === 2) { // 2 buttons clicked
// put your line drawing logic here
console.log("Show line between " + buttonClicks[0] + " and " + buttonClicks[1]);
buttonClicks = []; // reset button clicks
}
});
});
.test {
cursor: pointer;
}
#button1 {
border: #000000 solid;
width: 100px;
float: left;
}
#button2 {
border: #000000 solid;
width: 100px;
margin-left: 300px;
}
#button3 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 0px;
float: left;
}
#button4 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 300px;
}
#line12 {
margin-left: 55px;
margin-top: 17.5px;
position: absolute;
visibility: hidden;
}
#line24 {
margin-left: 350px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line14 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line13 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line32 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="line12">
<img src="img/line12.png">
</div>
<div id="line14">
<img src="img/line14.png">
</div>
<div id="line24">
<img src="img/line24.png">
</div>
<div id="line13">
<img src="img/line13.png">
</div>
<div id="line32">
<img src="img/line32.png">
</div>
<div class="test" id="button1">show lines 1</div>
<div class="test" id="button2">show lines 2</div>
<div class="test" id="button3">show lines 3</div>
<div class="test" id="button4">show lines 4</div>

How to hide the image

Here is the JSfiddle http://jsfiddle.net/zfxrxzLg/ Look at this for full code
Why does the last picture collapses underneath, and isn't hidden as it should be? I'm trying to create a slider. I'm thinking that might be the issue why the slider isn't working.
HTML
<div class="gallery-wrap">
<div class="gallery clearfix">
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
CSS
.gallery-wrap {
margin: 0 auto;
overflow: hidden;
width: 432px;
}
.gallery {
position: relative;
left: 0;
top: 0;
}
.gallery__item {
float: left;
list-style: none;
margin-right: 20px;
}
.gallery__img {
display: block;
border: 4px solid #40331b;
height: 80px;
width: 80px; }
.gallery__controls { margin-top: 10px; }
.gallery__controls-prev { cursor: pointer; float: left; }
.gallery__controls-next { cursor: pointer; float: right; }
.clearfix:after{
content: '.';
clear: both;
display:block;
height: 0;
visibility: hidden;
}
JavaScript
$(window).load(function(){
$(".gallery__link").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
var totalWidth = 0;
$(".gallery__item").each(function(){
totalWidth = totalWidth + $(this).outerWidth(true);
});
var maxScrollPosition = totalWidth - $(".gallery-wrap").outerWidth();
function toGalleryItem($targetItem){
if($targetItem.length){
var newPosition = $targetItem.position().left;
if(newPosition <= maxScrollPosition){
$targetItem.addClass("gallery__item--active");
$targetItem.siblings().removeClass("gallery__item--active");
$(".gallery").animate({
left : - newPosition
});
} else {
$(".gallery").animate({
left : - maxScrollPosition
});
};
};
};
$(".gallery").width(totalWidth);
$(".gallery__item:first").addClass("gallery__item--active");
$(".gallery__controls-prev").click(function(){
var $targetItem = $(".gallery__item--active").prev();
toGalleryItem($targetItem);
});
$(".gallery__controls-next").click(function(){
var $targetItem = $(".gallery__item--active").next();
toGalleryItem($targetItem);
});
});

few corrections and additions:
.gallery__item {
display: inline-block;
list-style: outside none none;
margin-right: 20px;
}
.gallery {
left: 0;
overflow: hidden;
position: relative;
top: 0;
white-space: nowrap;
}

Mobile safari ignoring z-index

Try clicking one of the thumbnails here: http://henrybuilt.com/questions/
On a computer it works as desired (the text overlay is displayed on top of the first image in the slide set and then goes away when next or previous is clicked). On iPad or iPhone in both safari and chrome, the text overlay appears for a second and then gets covered by my background image slide div once it loads and I cannot make my overlay (.slide_view .title) appear on top of the background div.
The specific css:
.slide_view .title{
display: none;
position: absolute;
top:0;
left:0;
background-color: white;
width: 100%;
height: 100%;
z-index: -3
}
#backstretch{
z-index: -3;
}
The full doc:
<?php
$slides = array(
array("Why talk with us", "whytalk", 6),
array("Who we are", "who", 1),
array("Notable projects", "notable", 0),
array("Products", "products", 0),
array("Unique options", "unique", 11),
array("Kitchens", "kitchens", 0),
array("Whole House", "whole", 0),
array("Furniture", "furniture", 4),
array("Opencase", "opencase", 0),
array("What is a system", "system", 5),
array("HB vs Custom", "vscustom", 0),
array("HB vs Euro system", "vseuro", 0),
array("Design Process", "design", 0),
array("Making it", "making", 0),
array("Installation", "installation", 0),
array("Pricing", "pricing", 0),
array("Materials", "materials", 0),
array("High functions", "highfunctions", 0),
array("Craft quality", "craft", 0),
array("Press kit", "press", 0),
array("Working remotely", "working", 0),
array("Client site", "client", 0)
);
?>
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 0;
padding: 0;
color: #000;
font-size: 62.5%;
}
body, input, textarea, select{
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.wrapper{
max-width: 1000px;
margin: auto;
padding: 2%;
}
.header{
font-size: 3em;
margin-bottom: 2%;
padding: 2% 0%;
}
.thumb_wrapper{
float: left;
width: 17%;
margin-right: 3%;
margin-bottom: 2%;
}
.thumb_wrapper:hover{
cursor: pointer;
opacity: 0.5;
}
.thumb_wrapper img{
width: 100%;
margin-bottom: 1%;
}
.thumb_wrapper .caption{
text-transform: uppercase;
opacity: 0.8;
font-size: 1em;
margin: 2% 2%;
}
.slide_view{
display: none;
}
.slide_view .nav_bar{
width: 100%;
height: 10%;
background-color: rgba(0, 0, 0, 1);
position: absolute;
bottom: 0;
left: 0;
}
.slide_view .title{
display: none;
position: absolute;
top:0;
left:0;
background-color: white;
width: 100%;
height: 100%;
z-index: -3
}
.slide_view .text{
position: absolute;
top:50%;
margin-top: -1em;
font-size: 4em;
color: black;
width: 100%;
text-align: center;
text-transform: uppercase;
}
#backstretch{
z-index: -3;
}
.caption{
}
.controls{
float: right;
margin-right: 3%;
display: block;
height: 100%;
width: 20%;
}
.prev, .next {
height: 8%;
padding: 10px;
border-radius: 5px;
background: rgba(0,0,0,.5);
position: absolute;
top: 50%;
margin-top: -50px;
cursor: pointer;
z-index: 3;
}
.prev:hover, .next:hover, .back:hover {
opacity: 0.5;
cursor: pointer;
}
.next{
right: 5%;
}
.prev{
left: 5%;
}
.back{
float: left;
display: block;
height: 100%;
}
.back img{
height: 90%;
margin-top: 5%;
margin-left: 50%;
margin-right: 50%;
display: block;
}
.overlay{
display: none;
position: absolute;
top:0;
left:0;
background-color: black;
width: 100%;
height: 100%;
}
.image_caption{
text-transform: uppercase;
margin-left: 10%;
padding-top: 1%;
float: left;
font-size: 1em;
color: #fff;
}
.relative{
width: 100%;
height: 100%;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
var showing_title = false;
var showing_title_for_first_time = false;
var slides = [
<?php
foreach($slides as $slide){
echo "
['".$slide[0]."', '".$slide[1]."', ".$slide[2]."],";
}
?>
["", "", 0]
];
var current_group;
var current_index;
var transition_length = 500; //in ms
$(document).ready(function(){
var image_width = $(".thumb_wrapper .image_wrapper").width();
$(".thumb_wrapper .image_wrapper").height(image_width*.75);
$(".thumb_wrapper").click(function(){
var t = this;
var group = $(t).attr("group");
slideView();
var prefix = slides[group][1];
var index = 0;
current_group = group;
current_index = index;
setSlide(prefix, index);
showing_title = true;
showTitleForGroup(group);
});
$(".next").click(function(){
next();
});
$(".prev").click(function(){
prev();
});
$(".exit").click(function(){
thumbView();
});
});
function slideView(){
setTimeout(function(){
$(".thumb_view").hide();
$(".slide_view").show();
}, transition_length);
showing_title_for_first_time = true;
}
function thumbView(){
setTimeout(function(){
$.backstretch("destroy");
$(".slide_view").hide();
$(".thumb_view").show();
}, transition_length);
transition();
}
function showTitleForGroup(group){
showing_title = true;
transition();
setTimeout(function(){
$(".title").show();
$(".title .text").html(slides[group][0]);
}, transition_length);
}
function hideTitle(){
showing_title = false;
transition();
setTimeout(function(){
$(".slide_view .title").hide();
}, transition_length);
}
function transition(){
$(".overlay").fadeIn(transition_length, function(){
$(".overlay").fadeOut(transition_length);
});
}
function setSlide(prefix, index){
transition();
setTimeout(function(){
$.backstretch("images/"+prefix+"_"+index+".jpg");
if(showing_title){
$("#backstretch").zIndex(-3);
}
}, transition_length);
}
function next(){
if(showing_title){
hideTitle();
}else{
var group_size = slides[current_group][2];
var groups = slides.length;
var index = current_index + 1;
var group = current_group;
if(index >= group_size){
index = 0;
group = parseInt(current_group) + 1;
if(slides[group][0] == ""){
group = 0;
}
showTitleForGroup(group);
}
var prefix = slides[group][1];
current_index = index;
current_group = group;
setSlide(prefix, index);
}
}
function prev(){
if(showing_title && !showing_title_for_first_time){
hideTitle();
}else{
var index = current_index - 1;
var group = current_group;
if(current_index == 0){
group = current_group - 1;
if(group == -1){
group = slides.length - 2;
}
index = slides[group][2] - 1;
if(!showing_title_for_first_time){
showTitleForGroup(current_group);
}
}
if(showing_title_for_first_time){
hideTitle();
showing_title_for_first_time = false;
}
var prefix = slides[group][1];
current_index = index;
current_group = group;
setSlide(prefix, index);
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="thumb_view">
<div class="header">
henrybuilt
</div>
<div class="content">
<?php
$i = 0;
foreach($slides as $slide){
?>
<div class="thumb_wrapper" group="<?php echo $i; ?>">
<div class="image_wrapper">
<img src="images/<?php echo $slide[1]; ?>_0.jpg" />
</div>
<div class="caption">
<?php echo $slide[0]; ?>
</div>
</div>
<?php
$i++;
}
?>
<div style="clear:both"></div>
</div>
<div class="footer">
</div>
</div>
<div class="slide_view">
<div class="nav_bar">
<div class="relative">
<div class="back">
<img class="exit" src="images/exit.png"/>
</div>
<div class="image_caption">
</div>
</div>
</div>
<img class="next" src="images/next.png"/>
<img class="prev" src="images/prev.png"/>
<div class="title">
<div class="text">
some text
</div>
</div>
</div>
</div>
<div class="overlay">
</div>
<div style="display:none">
<?php
foreach($slides as $slide){
for($i = 0; $i < $slide[2]; $i++){
echo '
<img src="images/'.$slide[1].'_'.$i.'.jpg"/>';
}
}
?>
</div>
</body>
</html>

Please update the below CSS code:
.prev, .next{z-index:999999}
.slide_view .title{z-index:999}
.slide_view .text{z-index:9999}

Moving image on click using Javascript?

I have an image at the side of my website, i want to hide most of the image until the user clicks on it (its for a newsletter signup), what would be the best way of going about this?
I just need a section of this image showing, then whenever the user clicks on it the whole image pops out. I know i can use CSS to move the image about, what would the best javascript function to use instead of using the change image function as im only moving the image not changing it?
Example site where this is demonstrated: http://www.plus.de/

Here's a Fiddle
HTML
<div class="slide">
<span class="text">OPEN</span>
</div>
CSS
#overflow {
background: rgba(50,50,50,0.5);
display: none;
width: 100%;
height: 100%;
}
.slide {
background: #0296cc;
position: absolute;
top: 200px;
left: -270px;
width: 300px;
height: 180px;
z-index: 9999;
}
.text {
display: block;
width: 180px;
margin: 80px 0 0 196px;
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
color: #fff;
cursor: pointer;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
jQuery
$(function() {
$('.slide').click(function() {
var overflow = ('<div id="overflow"><div>');
$(this).stop().animate({ left: '0' }, 650);
if($('#overflow').length < 1) {
$('body').append(overflow);
}
$('#overflow').fadeIn('slow');
$('#overflow').click(function() {
$(this).fadeOut('slow')
$('.slide').stop().animate({ left: '-270px' }, 650);
});
// Prevents window scroll when overflow is visible
$('#overflow').bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
});
});

BASIC DEMO
<div id="gallery">
<img src="images/img1.jpg" alt="" />
<img src="images/img2.jpg" alt="" />
<img src="images/img3.jpg" alt="" />
<img src="images/img4.jpg" alt="" />
<div id="tabs">
<div>Tab 1</div>
<div>Tab 2</div>
<div>Tab 3</div>
<div>Tab 4</div>
</div>
</div>
CSS:
#gallery{
position:relative;
margin:0 auto;
width:500px;
height:200px;
background:#eee;
}
#gallery > img{
position:absolute;
top:0;
margin:0;
vertical-align:middle;
}
#gallery > img + img{
display:none;
}
#tabs{
position:absolute;
top:0px;
right:0;
height:200px;
width:100px;
}
#tabs > div{
cursor:pointer;
height:49px;
border-bottom:1px solid #ddd;
}
jQuery
$('#tabs > div').click(function(){
var i = $(this).index();
$('#gallery > img').stop().fadeTo(300,0).eq(i).fadeTo(500,1);
});

Why does this jQuery slider work vertically but not horizontally?

I have a slider that has a main image area and small thumbs on the side. When you click on a thumb it loads that image in a larger size in the main image area. There are also next and previous links. If there are more thumbs then there is space for to show then only 13 are shown and the rest hidden. When you click on "next" all the thumbs move up one causing one more to be exposed. When you click "previous" all the thumbs move down one causing one more previous thumb to be exposed. That's how it works with vertical scrolling, and here's the code for it:
HTML:
<div class="gallery">
<div id="gallery_actions">
<div class="gallery_count"><span class="counter">3</span> / 17</div>
<div class="view_slideshow"><label><input class="slideshow_toggle" type="checkbox">Start slideshow</label></div>
</div>
<div class="carousel">
<div class="arrow arrow_previous"></div>
<div class="carousel_region">
<div class="carousel_subregion">
<ul class="carousel_slide">
<li class="thumb" id="carousel_thumb_5626316" data-json="{'id':'5626316'}">
<img src="shark_files/fb1490b2aa8dcf9a64861f9dcab86ca1.jpg" alt="Picture: 1920315" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_4034028" data-json="{'id':'4034028'}">
<img src="shark_files/fa41b5ff4a148ac68e65d1dcfd2c5f6a.jpg" alt="Picture: 1911579" height="30" width="40">
</li>
<li class="thumb selected" id="carousel_thumb_4063804" data-json="{'id':'4063804'}">
<img src="shark_files/b2850e2656bd41efe09f4df2cfadecc3.jpg" alt="Picture: 1914572" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3903274" data-json="{'id':'3903274'}">
<img src="shark_files/d2e254b960b5dbb854b905c67ff68e1b.jpg" alt="Picture: 1901129" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_99834" data-json="{'id':'99834'}">
<img src="shark_files/71389663b3c371be9ad953273a0894c4.jpg" alt="Picture: 1704362" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3119931" data-json="{'id':'3119931'}">
<img src="shark_files/eca402b67c9126340540aa1c62bc83c3.jpg" alt="Picture: 1792796" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3955105" data-json="{'id':'3955105'}">
<img src="shark_files/2244914dee3f7e23ca5a2a1103a29934.jpg" alt="Picture: 1905495" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_6254076" data-json="{'id':'6254076'}">
<img src="shark_files/39fa72602391c40bc3844d07d68e4e57.jpg" alt="Picture: 1942819" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_61197" data-json="{'id':'61197'}">
<img src="shark_files/e194fd0bcb8c652e56321d3850fb6ca0.jpg" alt="Picture: 3685" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_58516" data-json="{'id':'58516'}">
<img src="shark_files/143f53f536ae4b12b82b615f37de2313.jpg" alt="Picture: 16870" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_42148" data-json="{'id':'42148'}">
<img src="shark_files/6fdbf9d94d8c325c0fc2ccbbf0ef10b9.jpg" alt="Picture: 1608493" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_43248" data-json="{'id':'43248'}">
<img src="shark_files/296697046f7d5ade52b9c0c8330894a8.jpg" alt="Picture: 1596140" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_44795" data-json="{'id':'44795'}">
<img src="shark_files/4fcd7df720d497ddfca91e23c812dcc6.jpg" alt="Picture: 148030" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_47611" data-json="{'id':'47611'}">
<img src="shark_files/6a7fd11395364258f7ba78b40756c073.jpg" alt="Picture: 105834" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_56197" data-json="{'id':'56197'}">
<img src="shark_files/53469c1aca114944f1b380cd17dff886.jpg" alt="Picture: 39682" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_6564813" data-json="{'id':'6564813'}">
<img src="shark_files/2d2bc3ff87b089141f2cebc318d7e9c0.jpg" alt="Picture: 1955011" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_42795" data-json="{'id':'42795'}">
<img src="shark_files/1e2f946e9a0b4fd42399569761c0820b.jpg" alt="Picture: 1601015" height="30" width="40">
</li>
</ul>
</div>
</div>
<div class="arrow arrow_next"></div>
</div>
<div id="pic_main"><img style="position: relative; top: 131.5px;" src="shark_files/8d1ff92265c0e162dcc35fb49de19ae6.jpg" alt="Picture: 11896846" height="337" width="450"></div>
<div class="pic_info">
<div class="title">Title goes here</div>
<div id="description" class="description">Description goes here</div>
</div>
</div>
CSS FOR VERTICAL SLIDE:
.gallery {
background: #000;
color: #fff;
padding: 10px;
}
.gallery .gallery_count {
float: right;
font-size: 14px;
font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }
.carousel {
float: right;
width: 125px;
}
.carousel .arrow {
display: block;
height: 20px;
background: url(../sprite_slideshow_controls.png) no-repeat top left;
width: 46px;
height: 30px;
}
.carousel .arrow_previous {
background-position: 0 0;
}
.carousel .arrow_previous:hover {
background-position: 0 -30px;
cursor: pointer;
}
.carousel .arrow_previous:active {
background-position: 0 -60px;
}
.carousel .arrow_next {
background-position: -46px 0;
}
.carousel .arrow_next:hover {
background-position: -46px -30px;
cursor: pointer;
}
.carousel .arrow_next:active {
background-position: -46px -60px;
}
.carousel .carousel_region {
overflow: hidden;
width: 40px;
height: 450px;
}
.carousel .carousel_subregion {
overflow: hidden;
z-index: 1000;
position: relative;
width: 40px;
height: 450px;
}
.carousel ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 500;
}
.carousel ul li {
float: left;
overflow: hidden;
margin: 0 0 5px 0;
opacity: .5;
filter: alpha(opacity = 50);
background: #ccc;
width: 40px;
height: 30px;
}
.carousel ul li:hover {
opacity: .8;
filter: alpha(opacity = 80);
}
.carousel ul li.selected, .carousel ul li.selected:hover {
opacity: 1;
filter: alpha(opacity = 100);
}
.carousel .thumb img {
cursor: pointer;
}
#pic_main {
text-align: center;
background: #000;
border: 1px solid red;
width: 600px;
height: 450px;
}
#pic_main img {
margin: 0 auto;
display: block;
}
#pic_main img.loading {
display: block;
position: relative;
top: 280px;
}
#pic_main img:first {
display: block;
}
JQUERY PLUGIN CODE:
(function($) {
if(typeof($.fn.scrollTo) == 'function') {
$.fn.slideShow = function(options) {
var defaults = {
axis: 'y',
click: function() { },
counter: '.counter',
left: '.arrow_previous',
increment: 1,
mouseover: function() { },
mouseout: function() { },
next: function() { },
previous: function() { },
region: '.carousel_region',
right: '.arrow_next',
selected: '.thumb:first',
selected_class: 'selected',
slideshow_status: false,
slideshow_time: 6,
slideshow_toggle: '.slideshow_toggle',
speed: 400,
subregion: '.carousel_subregion',
thumb: '.thumb'
};
var options = $.extend(defaults, options);
return $(this).each(function() {
var region = $(options.region, $(this));
var subregion = $(options.subregion, $(this));
var left = $(options.left, $(this));
var right = $(options.right, $(this));
var slideshow = $(options.slideshow_toggle);
var timeout;
var dimension;
if(options.axis == 'x') {
dimension = region.find(options.thumb).eq(0).outerWidth();
} else if(options.axis == 'y') {
dimension = region.find(options.thumb).eq(0).outerHeight();
}
var update_counter = function() {
var index = $(region).find(options.thumb).index($(region).find(options.thumb + '.' + options.selected_class));
$(options.counter).text(index + 1);
};
$(this)
.bind('next', function(event) { region.trigger('next'); })
.bind('previous', function(event) { region.trigger('previous'); });
region
.bind('next', function(event) {
event.stopPropagation();
if(!$(options.thumb + ':last', region).hasClass(options.selected_class)) {
var next = region.find(options.thumb).index(region.find('.' + options.selected_class)) + options.increment;
if(next + options.increment > region.find(options.thumb).length) {
next = region.find(options.thumb).length - options.increment;
}
var next_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(next);
if(next_thumb.length == 0) {
next_thumb = region.find(options.thumb + ':last');
}
next_thumb.addClass(options.selected_class);
subregion.scrollTo(next_thumb, (options.speed * options.increment), { axis: options.axis });
update_counter();
return options.next(event);
}
})
.bind('previous', function(event) {
event.stopPropagation();
if(!$(options.thumb + ':first', region).hasClass(options.selected_class)) {
var prev = region.find(options.thumb).index(region.find('.' + options.selected_class)) - options.increment;
if(prev < 0) {
prev = 0;
}
var prev_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(prev);
if(prev_thumb.length == 0) {
prev_thumb = region.find(options.thumb + ':first');
}
prev_thumb.addClass(options.selected_class);
subregion.scrollTo(prev_thumb, (options.speed * options.increment), { axis: options.axis });
update_counter();
return options.previous(event);
}
})
.find(options.thumb)
.bind('click', function(event) {
// Move Selected Class
region.find('.' + options.selected_class).removeClass(options.selected_class);
$(this).addClass(options.selected_class);
// Update Counter
update_counter();
return options.click(event);
})
.bind('mouseover', function(event) {
return options.mouseover(event);
})
.bind('mouseout', function(event) {
return options.mouseout(event);
});
left.click(function() {
return region.trigger('previous');
});
right.click(function() {
return region.trigger('next');
});
slideshow
.attr('checked', options.slideshow_status)
.click(function() {
if($(this).is(':checked')) {
region.trigger('next');
timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
} else {
clearInterval(timeout);
}
});
if(options.selected !== false) {
$(region).find(options.selected).click();
subregion.scrollTo($(options.selected, region).eq(0), options.speed);
}
if(options.slideshow_status) {
timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
}
});
};
}
})(jQuery);
I want to change the behavior a bit and have the images scroll horizontally instead of vertically. I see that one of the plugin options is axis. I changed that value to "x" instead of "y". and changed the css to this:
.gallery {
background: #000;
color: #fff;
padding: 10px;
}
.gallery .gallery_count {
float: right;
font-size: 14px;
font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }
.carousel {
float: right;
width: 125px;
border: 1px solid green;
width: 490px;
}
.carousel .arrow {
display: block;
height: 20px;
background: url(../sprite_slideshow_controls.png) no-repeat top left;
width: 46px;
height: 30px;
}
.carousel .arrow_previous {
background-position: 0 0;
}
.carousel .arrow_previous:hover {
background-position: 0 -30px;
cursor: pointer;
}
.carousel .arrow_previous:active {
background-position: 0 -60px;
}
.carousel .arrow_next {
background-position: -46px 0;
}
.carousel .arrow_next:hover {
background-position: -46px -30px;
cursor: pointer;
}
.carousel .arrow_next:active {
background-position: -46px -60px;
}
.carousel .carousel_region {
overflow: hidden;
width: 490px;
height: 30px;
}
.carousel .carousel_subregion {
overflow: hidden;
z-index: 1000;
position: relative;
width: 490px;
height: 30px;
}
.carousel ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 500;
}
.carousel ul li {
float: left;
overflow: hidden;
margin: 0 0 5px 0;
opacity: .5;
filter: alpha(opacity = 50);
background: #ccc;
width: 40px;
height: 30px;
}
.carousel ul li:hover {
opacity: .8;
filter: alpha(opacity = 80);
}
.carousel ul li.selected, .carousel ul li.selected:hover {
opacity: 1;
filter: alpha(opacity = 100);
}
.carousel .thumb img {
cursor: pointer;
}
#pic_main {
text-align: center;
background: #000;
border: 1px solid red;
width: 600px;
height: 450px;
}
#pic_main img {
margin: 0 auto;
display: block;
}
#pic_main img.loading {
display: block;
position: relative;
top: 280px;
}
#pic_main img:first {
display: block;
}
Otherwise the HTML and rest of the jQuery is exactly the same. It's not working however. When you click "next" the images don't slide left one causing the next in the list to be exposed.
I'm not sure if this is a jQuery or a CSS issue but I spent all day yesterday trying to figure it out with no luck. Can anyone please help?