Develop Reference

How to count the Number of click

I am using tooltip in my blog which is coded using CSS and HTML below is its code. I want to track the number of clicks made on tooltip box. Is there any way by which I can see the number of clicks made on it. If possible views should engrave in the box(corner) itself. This is the code of tooltip
body{margin-top:50px}
.tooltip {
display:inline-block;
position:relative;
border-bottom:2px solid #ff5733;
text-align:left;
}
.tooltip {
display:inline-block;
position:relative;
border-bottom:2px solid #ff5733;
text-align:left;
}
.tooltip .right {
min-width:80px;
top:50%;
left:100%;
margin-left:20px;
transform:translate(0, -50%);
padding:10px 20px;
color:#444444;
background-color:#EEEEEE;
font-weight:normal;
font-size:13px;
border-radius:8px;
position:absolute;
z-index:99999999;
box-sizing:border-box;
border:3px solid #ff5733;box-shadow:0 1px 8px rgba(0,0,0,0.5);
box-shadow:0 1px 8px rgba(0,0,0,0.5);
visibility:hidden; opacity:0; transition:opacity 0.8s;
}
.tooltip:hover .right {
visibility:visible; opacity:1;
}
.tooltip .right i {
position:absolute;
top:50%;
right:100%;
margin-top:-12px;
width:12px;
height:24px;
overflow:hidden;
}
.tooltip .right i::after {
content:'';
position:absolute;
width:12px;
height:22px;
left:0;
top:50%;
transform:translate(50%,-50%) rotate(-45deg);
background-color:#EEEEEE;
border:3px solid #ff5733;box-shadow:0 1px 8px rgba(0,0,0,0.5);
box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
<span class=" tooltip">trial view
<span class="right toolTipWrap">
<img alt="Lazy Loader" border="0" data-original-height="86" data-original-width="86" src="https://onlinejpgtools.com/images/examples-onlinejpgtools/coffee-resized.jpg"/>
Read Now!
<i></i>
</span>
</span>

Add id="tooltip" to the tag and use this script. The count variable will hold the number of clicks and you can process it however you want.
window.onload=function(){
var count = 0
var el = document.getElementById('tooltip').addEventListener("click",
function() {
count++
console.log(count)
});
}

I can’t write the code because I’m on my phone, but you should create a variable that’s stores the value for clicks, then you should add an event listener on the tooltip, then using the on click function you should increase the variable by 1. Then you can use the data from that variable that you made to display the number. Good luck, hope I helped.

Use below code
var count=0;
$('#trialView').click(function(){
count++;
alert(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<span class=" tooltip">trial view
<span class="right toolTipWrap" Id="trialView">
<img alt="Lazy Loader" border="0" data-original-height="86" data-original-width="86" src="https://onlinejpgtools.com/images/examples-onlinejpgtools/coffee-resized.jpg"/>
Read Now!
<i></i>
</span>
</span>

add a onclick attribute to your span
<span id="clickme" onclick="clickme()" class=" tooltip">trial view
<span class="right toolTipWrap">
<a href="https://factsbyteinjournal.blogspot.com/2019/04/ho
w-to-add-lazy-loader-for-images-in.html"><img alt="Lazy
Loader" border="0" data-original-height="86" data-
original-
width="86"
src="https://onlinejpgtools.com/images/examples-
onlinejpgtools/coffee-resized.jpg"/></a>
Read Now!
<i></i>
</span>
</span>
<script>
var click = 0;
function clickme(){
click++;
alert(click);
}
</script>

Border or dotted line to connect 2 divs

I have a problem connecting 2 divs with dotted line, and I was trying to do this with ::after and ::before but without success. You can check my structure at:
JS fiddle code
and image of what I want to achieve:
Is this possible? If yes, then what should I add or change in my code?
Thanks.
Best regards,

Using :before/:after and border-radius you can achieve this (strictly with css). I included an example below.
https://jsfiddle.net/m3zoz34f/8/
.box-top-right{
position: relative;
}
.box-top-right:after{
content: ' ';
border-bottom-right-radius: 175px;
width: 106%;
position: absolute;
border-bottom: 2px solid red;
right: 0;
bottom: -175px;
height: 185px;
border-bottom-style: dashed
}
.box-bottom:before{
content: ' ';
width: 66%;
border-top: 2px solid red;
height: 135px;
position: absolute;
top: -125px;
border-top-left-radius: 150px;
border-top-style: dashed;
}
.box-top, .box-bottom{
position:relative;
width:100%;
min-height:400px;
}
.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
float:left;
}
.box-top-left, .box-bt-right{
width:65%;
background-color:red;
color:white;
min-height:190px;
text-align:center;
padding-top:10px;
}
.box-top-right, .box-bt-left{
width:30%;
border:2px solid black;
margin-left:2%;
min-height:90px;
text-align:center;
padding-top:10px;
}
.box-bt-left{
margin-left:0;
margin-right:2%;
}
.box-bt-right{
background-color:gray;
}
<div class="box-top">
<div class="box-top-left">
This is top left box
</div>
<div class="box-top-right">
This is top right box
</div>
</div>
<div class="box-bottom">
<div class="box-bt-left">
This is bottom left box
</div>
<div class="box-bt-right">
This is bottom right box
</div>
</div>

Please check below:
P.S.: No Js, Just Css
.container{
position:relative;
}
.line{
position:absolute;
left:65px;
top:250px;
right:0;
width:420px;
border-bottom: 1px solid #000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(-45deg);z-index:1;
}
.box-top, .box-bottom{
position:relative;
width:100%;
min-height:400px;
}
.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
float:left;
}
.box-top-left, .box-bt-right{
width:65%;
background-color:red;
color:white;
min-height:190px;
text-align:center;
padding-top:10px;
}
.box-top-right, .box-bt-left{
width:30%;
border:2px solid black;
margin-left:2%;
min-height:90px;
text-align:center;
padding-top:10px;
}
.box-bt-left{
margin-left:0;
margin-right:2%;
}
.box-bt-right{
background-color:gray;
}
<div class="container">
<div class="box-top">
<div class="box-top-left">
This is top left box
</div>
<div class="box-top-right">
This is top right box
</div>
</div>
<div class="line">
</div>
<div class="box-bottom">
<div class="box-bt-left">
This is bottom left box
</div>
<div class="box-bt-right">
This is bottom right box
</div>
</div>
</div>

please fiddle I work on for you ... its little advance JS
but you can reuse it every where .
https://jsfiddle.net/m3zoz34f/6/
if you want to add new lines over here in html add
<div id="svgContainer" style="margin: 50px 50px;">
<svg id="svg1" width="0" height="0">
<path id="myNewPath" d="M0 0" stroke-width="0.3em" style="stroke:#555; fill:none; " />
##### over here add new <path like the one up and put special name ID
</svg>
</div>
then in the JS
function connectAll() {
// connect all the paths you want!
connectElements($("#svg1"), $("#myNewPath"), $("#fromLine"), $("#toLine"));
}
see this
connectElements($("#svg1"), $("#myNewPath"), $("#fromLine"), $("#toLine"));
#myNewPath : path name you put in html
#fromLine : ID or class of the first block
#toLine : ID or class of second block ....
and you can link as much blocks as you want
its responsive BTW .

Maintaining an animated div present on scene

I've been trying constantly to maintain the div that animates still on the scene whenever the user draws his mouse on top of it.
HTML
<table>
<tr>
<td id="portrait">
<div id="photo"></div>
</td>
<td id="slide">
<div id="slider">
<a id="something" class="thisthing">some link here</a>
</div>
</td>
</tr>
</table>
CSS
#portrait{
width:120px;
height:100px;
top:20px;
border: solid black 1px;
margin: 0px;
padding: 0px;
}
#slide{
height:100px;
border: none;
padding-left:30px;
}
#slider{
border: none;
padding-left:30px;
background-color:green;
position:relative;
height:100%;
opacity:0;
width:0px;
overflow:hidden;
}
.thisthing{
cursor:pointer;
font-size: 15px;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
color: green;
white-space: nowrap;
}
#something{
position:relative;
left: -25px;
}
JS
$('#portrait').mouseover(function(){
$('#slider').animate({
opacity: 1,
width: "300px"
}, 1500, $.noop);
});
$('#slider').mouseout(function(){
$('#slider').animate({
opacity: 0,
width: "0px"
}, 1000, $.noop);
});
My solution doesn't work well at all, fades badly and lags a lot because as soon as the user leaves the black square the div fades immediately. What I want is to hover the black square, the green div appears and then make the div dissapear only IF $(/*.mouseout() of the black square OR the green div*/).fadeOut(thegreendiv).
AKA When you hover the link "some link here" or any other part of the green div I want it to stay there, otherwise fadeout.
http://jsfiddle.net/SVFge/

JSFIDDLE
Use the methods mouseenter and mouseleave instead of the over and out and have a bigger zone to mouseleave
HTML
<table id="hoverOutZone">
<tr>
<td id="portrait">
<div id="photo"></div>
</td>
<td id="slide">
<div id="slider">
<a id="something" class="thisthing">some link here</a>
</div>
</td>
</tr>
</table>
NEW JS
$('#portrait').mouseenter(function () {
$('#slider').animate({
opacity: 1,
width: "300px"
}, 1500);
});
$('#hoverOutZone').mouseleave(function () {
$('#slider').animate({
opacity: 0,
width: "0px"
}, 1000);
});

jQuery 'Slides' not functioning

I am using the script at slidesjs.com (http://slidesjs.com/examples/simple/), trying to put it into my webpage. I decided to use a script and not just attempt to write it in jQuery myself as I could not get it to work, and I suspect the same problem is occurring here..whatever it may be. Here is the page source code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>John Smith</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#sections').slides({
preload: true,
generateNextPrev: true
container: 'sections_container'
});
});
Web Developer
John Smith
This text is purely to fill space until I add real content.
</p>
<p id="contact">If you'd like to contact me about anything, don't hesitate to email me at j.smith#example.com</p>
<div id="social_media"><img src="images/social_media/facebook.png" /><img src="images/social_media/twitter.png" /><img src="images/social_media/flickr.png" /><img src="images/social_media/youtube.png" /></div>
<div class="clear"></div>
</div>
<div>
<h3 class='heading'>Information</h3>
<p>
<ul>
<li><strong>Name:</strong> John Smith</li>
<li><strong>Location:</strong> Sydney, Australia</li>
</ul>
</p>
<br />
<h3 class='heading'>Achievements & Experience</h3>
<p>
<ul>
<li>Worked at Google</li>
<li>Worked at McDonalds</li>
</ul>
</p>
</div>
</div>
</div>
</body>
The CSS if anyone is interested.
* {
padding:0;
margin:0;
}
a {
color:white;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
body {
background: url('images/background.png');
font-size:12px;
font-family:arial;
color:#E5E5E5;
}
.sections_container {
width:768px;
display:none;
}
li {
margin-left:20px;
}
.sections_container div {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
display:block;
}
.pagination {
list-style:none;
margin:0;
padding:0;
}
/*
Optional:
Show the current slide in the pagination
*/
.pagination .current a {
color:red;
}
.top {
margin: 15px auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}
.section {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}
h1,h2,h3,h4,h5,h6 {
}
#subtitle {
color:#919191;
text-align:right;
}
#title {
text-align:right;
}
#profile {
float:left;
height:52px;
width:52px;
}
#youtube_video {
float:right;
padding-left:10px;
}
#contact {
margin-top:8px;
font-weight:bold;
font-style:italic;
}
#social_media {
margin-top:40px;
text-align:center;
}
.heading {
text-align:center;
}
.demphasis {
color:#9E9E9E;
}
.clear {
clear:both;
}
Thanks!

OK. I can see a couple of wee issues.
Firstly, in your CSS you reference .section_container, whereas in the HTML it's <div class="sections_container"> - note the 's' in the middle. Same for section/s.
Secondly, it looks like SlideJS defaults to "slides_container". Either rename your divs, or set the container name when you're initializing it:
$('#sections').slides({
preload: true,
generateNextPrev: true,
container: 'sections_container'
});
I've created a little jsFiddle at http://jsfiddle.net/jCFeQ/ - it still has some issues, but is closer to working than when we started. Change those two things and see how you go.

It appears you have a typo in your CSS that refers to a missing HTML element:
.section_container div {
...
}
Instead of .section_container, your CSS should be .sections_container (note the plural) which matches your HTML:
<div class="sections_container">
<div></div>
...
<div></div>
</div>
Additionally, the Slides jQuery Plugin expects an HTML element with a class of .slides_container as the parent of the slides.
Since you've deviated from the default markup, you'll need to supply the plugin's container option in your jQuery function:
<script>
$(function(){
$('.sections_container').slides({
preload: true,
generateNextPrev: true,
container: 'sections_container'
});
});
</script>

Silly question, but given you've copied the code letter-for-letter from that example: Is the file you reference in <script src="js/slides.min.jquery.js"></script> actually there - do you have a js folder with that file inside it?
Also version 1.5.1 of jQuery is quite out-of-date. It shouldn't make any difference, but you might as well change that to 1.7.1

Having trouble making this product slider

So,i want to make a product viewer kind of a thing having thumbnails which can slide back or front by clicking on the back/front buttons. I dont know why my code isn't working.Heres the code. Please help me out finding issues in it.Thanks!
Html code
<div id="wrapper">
<div id="main-image">
</div>
<div class='main-slider'>
<div class="window">
<div class='slider-large-image'>
<img src='img3.png' height="500" width="960"> </img>
<img src='img2.png' height="500" width="960"> </img>
<img src='img3.png' height="500" width="960"> </img>
<img src='img4.png' height="500" width="960"> </img>
</div>
</div>
<div class='slider-pager'>
‹
›
</div>
</div>
Javascript code
$(document).ready(function() {
var imagewidth = /*$(".window").width()*/960;
var imagesum = /*$(".slider-large-image img").size()*/5;
var imagereelwidth = imagewidth * imagesum;
$(".slider-large-image").css({'width' : imagereelwidth});
rotatef = function() {
$(".slider-large-image").animate({
left : -imagewidth
},500 );
};
rotateb = function() {
$(".slider-large-image").animate({
left : imagewidth
},500 );
};
$(".slider-pager a#b").click(function() {
rotateb(); //Trigger rotation immediately
//return false; //Prevent browser jump to link anchor
});
$(".slider-pager a#f").click(function() {
rotatef(); //Trigger rotation immediately
//return false; //Prevent browser jump to link anchor
});
});
CSS
#wrapper
{
margin:0 auto;
}
.main-slider
{
float:left;
position:relative;
margin-bottom:10px;
/*background-color:#CCC;*/
border: 0px solid #000;
top:25px;
left:0px;
z-index:1004;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 0px 0px 30px 1px #999;
-webkit-box-shadow: 0px 0px 30px 1px #999;
box-shadow: 0px 0px 30px 1px #999;
}
.window
{
width: 960px;
height: 500px;
overflow:hidden;
position:relative;
}
.slider-large-image
{
position:absolute;
top:0px;
left:0px;
}
.slider-large-image img {float:left;}
.slider-pager
{
position:absolute;
float:left;
width: 100px;
height: 10px;
background-color:#333;
top:0%;
left:89.5%;
padding-bottom:10px;
padding-right:0;
}
.slider-pager a
{
padding:1px;
text-align:center;
text-decoration:none;
font-size:20px;
font-weight:700;
color:#ccc;
margin-right:5px;
width:1px;
height:1px;
position:relative;
top:-10px;
}
.main-slider
{
padding:0px;
color:#FFF;
text-align: center;
line-height: 40px;
font:"Comic Sans MS", cursive;
font-size:20px;
text-decoration:none;
}
.main-slider .slider-pager a:hover
{
background-color:#999;
-moz-border-radius:10px;
border-radius:10px;
color:black;
}
.main-slider .slider-pager a.active
{
background-color:#999;
-moz-border-radius:10px;
border-radius:10px;
}
.main-slider .info-page
{
background-color:#000;
width:600px;
height:50px;
text-align:center;
text-shadow:#666;
font:"28 Days Later";
color:#FFF;
line-height: 40px;
font-size:40px
}
.main-slider .info-page #d:hover
{
color:#FF0;
}

Lets start off with your formatting (that I fixed, btw):
Your first <div id="wrapper"> doesn't get closed!
IMG-tag is self ending! WRONG: <img src=""></img> CORRECT: <img src="" />
Some of your css3-variables are for future browsers and -moz-, but is missing -webkit-!! Example: -moz-border-radius: 10px; border-radius: 10px;
Also, at one point you're using ='' and another ="". Its basically okay, but gets annoying to maintain later and doesn't look very clean! Example: <img src='img3.png' height="200" width="300" />
I did not find any function for <div id="main-image"></div> in your provided code. Next time remove these type of elements when your putting together a question here, as this element is 100% irrelevant to the problem at hand. (Same goes for
and .main-slider .info-page #d:hover {} in your css)
Didn't see any reason, why .main-slider {} should be declared twice in the css (so I merged them, if you do have special purpose, then put it back like it was)
If you are not building some fallback version for some other browser version (like mobile version for example.) Then there is no need to put width="" and height="" variables to your IMG-tag direct. You already had a correct place in css for that: .slider-large-image img {float: left; width:; height:;}
In your css, you have .slider-pager a and .main-slider .slider-pager a:hover. Why add .main-slider in front of .slider-pager a:hover anyway?
If you have same parameters for same variable in css, then use comma to merge them: .slider-pager a:hover, .slider-pager a:active {background-color: #999; -moz-border-radius: 10px; border-radius: 10px;}
Your using position: absolute; too much. I strongly believe, you were meaning to use position: relative;
There was an extra }); at the end of it all. Was the code originally in some function or a plugin?
No such parameter as font, in css!
NOTES:
You didn't provide the images. Next time please google some images, so it would be quicker to help you.
Use sites like jsfiddle.net, to make good examples of your problem. You might be asking: Why should I waste my time on that? We will ask the same question from you, when we are looking at your examples. This will REALLY make things faster for you are for us, on finding quick and valuable solutions.
Your code was so messy, that I cant figure out where the element <div class="slider-pager"></div> must sit? Its obviously inside the general container (on top of the image,) but at the top, bottom or maybe bottom center? I put it bottom center, as it looked the best there )
Removed $(".slider-large-image").css({'width' : imagereelwidth}); and added .slider-large-image, to make it rotate endless times.
I edited so much, that I forgot to update every single step. Anyways, it works. And also its endless now, meaning that there is no end for the carousel.
I wasted about 2 hours on this answer. So basically I was too lazy to compose it in the form of a plugin. Read this and follow those steps, if you want to put it in a plugin form.
If you want to add a function that automatically switches the slides, then use the jQuery doTimeout: Like setTimeout, but better!
I hope you are not taking my answer in a negative form. The community guidelines actually say, that we have to point the newbies to the correct path etc etch. I actually love you man :)
Live demo
http://jsfiddle.net/hobobne/PmXr2/
Full version code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Having trouble making this product slider. Please help? - Kalle H. Väravas answer</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
html, body {margin: 0px; padding: 0px;}
html, body, div, th, td, p, a {font-family: "Comic Sans MS", cursive; font-size: 12px; color: #000000;}
.cb {clear: both;}
#wrapper {width: 400px; margin: 0px auto;}
.main-slider {float: left; position: relative; margin-bottom: 10px; border: 0px solid #000; top: 25px; left: 0px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 30px 1px #999; -webkit-box-shadow: 0px 0px 30px 1px #999; box-shadow: 0px 0px 30px 1px #999; padding: 0px; color: #FFF; text-align: center; text-decoration: none; /*background-color: #CCC;*/}
.window {width: 300px; height: 200px; overflow: hidden; position: relative;}
.slider-large-image {position: relative; overflow: hidden; float: left; list-style-type: none; margin: 0px; padding: 0px;}
.slider-large-image li {margin: 0px; padding: 0px; float: left; display: inline-block;}
.slider-large-image li img {float: left; width: 300px; height: 200px;}
.slider-pager {position: relative; z-index: 2; margin: -40px auto 0px;}
.slider-pager a {margin: 0px 2px; padding: 2px; text-align: center; text-decoration: none; font-size: 20px; font-weight: bold; color: #ccc;}
.slider-pager a:hover,
.slider-pager a:active {background-color: #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.slider-pager a:hover {color: black;}
.slider-pager a.active {/* background-color and border-radius used to be here.. */}
</style>
</head>
<body>
<div id="wrapper">
<div class="main-slider">
<div class="window">
<ul class="slider-large-image">
<li><img src="http://images.sneakhype.com/wp-content/uploads/2010/12/Miley-Cyrus-300x200.jpg" /></li>
<li><img src="http://wa2.www.3news.co.nz/Portals/0-Articles/185340/miley-cyrus_reuters_420.jpg?width=300" /></li>
<li><img src="http://cdn.buzznet.com/media/jjr/headlines/2009/03/miley-cyrus-ryan-seacrest.jpg" /></li>
<li><img src="http://images.smh.com.au/2010/12/29/2112265/miley_cyrus_400-300x200.jpg" /></li>
</ul>
</div>
<div class="slider-pager">‹›</div>
</div>
<br class="cb" />
</div>
<script>
var imagewidth = $('.slider-large-image li').outerWidth();
var imagesum = $('.slider-large-image li img').size();
var imagereelwidth = imagewidth * imagesum;
$(".slider-large-image").css({'width' : imagereelwidth});
$('.slider-large-image li:first').before($('.slider-large-image li:last'));
$('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
rotatef = function (imagewidth) {
var left_indent = parseInt($('.slider-large-image').css('left')) - imagewidth;
$('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function() {
$('.slider-large-image li:last').after($('.slider-large-image li:first'));
$('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
});
};
rotateb = function (imagewidth) {
var left_indent = parseInt($('.slider-large-image').css('left')) + imagewidth;
$('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function(){
$('.slider-large-image li:first').before($('.slider-large-image li:last'));
$('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
});
};
$(".slider-pager a#b").click(function () {
rotateb(imagewidth);
return false;
});
$(".slider-pager a#f").click(function () {
rotatef(imagewidth);
return false;
});
</script>
</body>
</html>

Try this:
rotatef = function() {
$(".slider-large-image").animate({
"left" : "-="+imagewidth
},500 );
};
rotateb = function() {
$(".slider-large-image").animate({
"left": "+="+imagewidth
},500 );
};