I have found one of very good Jquery image gallery or horizontal scroll animation for contents.
its a Jquery plugin use to scroll content horizontally on mouse over it shows its left and right when you have content to be showed.
I am presenting here its filtered HTML and CSS code for SmoothDIVScroll gallery.
you can find complete Detail for SmoothDivScroll by visting its website.
Smooth DIV Scroll
HTML Source
CSS Source
JavaScript Script files
its a Jquery plugin use to scroll content horizontally on mouse over it shows its left and right when you have content to be showed.
I am presenting here its filtered HTML and CSS code for SmoothDIVScroll gallery.
you can find complete Detail for SmoothDivScroll by visting its website.
Smooth DIV Scroll
HTML Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic demo - jQuery Smooth Div Scroll</title>
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
<!-- jQuery library - I get it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<link href="css/smoothDivScroll.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>
<script type="text/javascript">
// Initialize the plugin with no custom options
$(window).load(function() {
$("div#makeMeScrollable").smoothDivScroll({});
});
</script>
<!-- Styles for my specific scrolling content -->
<style type="text/css">
#makeMeScrollable
{
width: 100%;
height: 330px;
position: relative;
}
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="makeMeScrollable">
<div class="scrollingHotSpotLeft">
</div>
<div class="scrollingHotSpotRight">
</div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="images/field.jpg" alt="Demo image" />
<img src="images/gnome.jpg" alt="Demo image" />
<img src="images/pencils.jpg" alt="Demo image" />
<img src="images/golf.jpg" alt="Demo image" />
<img src="images/river.jpg" alt="Demo image" />
<img src="images/train.jpg" alt="Demo image" />
<img src="images/leaf.jpg" alt="Demo image" />
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic demo - jQuery Smooth Div Scroll</title>
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
<!-- jQuery library - I get it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<link href="css/smoothDivScroll.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>
<script type="text/javascript">
// Initialize the plugin with no custom options
$(window).load(function() {
$("div#makeMeScrollable").smoothDivScroll({});
});
</script>
<!-- Styles for my specific scrolling content -->
<style type="text/css">
#makeMeScrollable
{
width: 100%;
height: 330px;
position: relative;
}
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="makeMeScrollable">
<div class="scrollingHotSpotLeft">
</div>
<div class="scrollingHotSpotRight">
</div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="images/field.jpg" alt="Demo image" />
<img src="images/gnome.jpg" alt="Demo image" />
<img src="images/pencils.jpg" alt="Demo image" />
<img src="images/golf.jpg" alt="Demo image" />
<img src="images/river.jpg" alt="Demo image" />
<img src="images/train.jpg" alt="Demo image" />
<img src="images/leaf.jpg" alt="Demo image" />
</div>
</div>
</div>
</body>
</html>
CSS Source
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */
/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
min-width: 75px;
width: 10%;
height: 100%;
/* There is a big background image and it's used to solve some problems I experienced
in Internet Explorer 6. */
background-image: url(../images/arrow_left.png);
background-position:center center;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
display:none;
}
/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
background-image: url(../images/arrow_left.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35; /* Standard CSS3 opacity setting */
-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}
/* Invisible right hotspot */
div.scrollingHotSpotRight
{
min-width: 75px;
width: 10%;
height: 100%;
background-image: url(../images/arrow_right.png);
background-position:center center;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-image: url(../images/arrow_right.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
}
/* The scroll wrapper is always the same width and height as the containing element (div).
Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
}
/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
min-width: 75px;
width: 10%;
height: 100%;
/* There is a big background image and it's used to solve some problems I experienced
in Internet Explorer 6. */
background-image: url(../images/arrow_left.png);
background-position:center center;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
display:none;
}
/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
background-image: url(../images/arrow_left.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35; /* Standard CSS3 opacity setting */
-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}
/* Invisible right hotspot */
div.scrollingHotSpotRight
{
min-width: 75px;
width: 10%;
height: 100%;
background-image: url(../images/arrow_right.png);
background-position:center center;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-image: url(../images/arrow_right.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
}
/* The scroll wrapper is always the same width and height as the containing element (div).
Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
}
JavaScript Script files
jquery.smoothDivScroll-1.1-min.js
js/jquery.ui.widget.js
jquery.min.js
No comments:
Post a Comment