jquery image slider
+2
<3 Sanjay
Hellrose
6 posters
Page 1 of 1
jquery image slider
can somebody help me how can i add this one to my forum??
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: jquery image slider
Search Google for this widget and get the embedded code
now follow these steps
If you want that to appear above, follow these steps
Admin Panel -> Display -> General "in templates section" -> Edit Overall_Header -> Put that Code anywhere -> Save
If you want that to appear below, follow these steps
Admin Panel -> Display -> General "in templates section" -> Edit Overall_Footer -> Put the code anywhere -> Save.
now follow these steps
If you want that to appear above, follow these steps
Admin Panel -> Display -> General "in templates section" -> Edit Overall_Header -> Put that Code anywhere -> Save
If you want that to appear below, follow these steps
Admin Panel -> Display -> General "in templates section" -> Edit Overall_Footer -> Put the code anywhere -> Save.
<3 Sanjay- New Member
- Posts : 22
Reputation : 0
Language : English;Hindi
Re: jquery image slider
how about adding this one on portal?
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: jquery image slider
If you want that on Portal then
Admin Panel -> Modules -> Portal Management -> Edit Portal Structure -> Create a New Widget -> Put the Code in -> Save -> Drag the Widget to the Portal Structure -> Save.
Admin Panel -> Modules -> Portal Management -> Edit Portal Structure -> Create a New Widget -> Put the Code in -> Save -> Drag the Widget to the Portal Structure -> Save.
<3 Sanjay- New Member
- Posts : 22
Reputation : 0
Language : English;Hindi
Re: jquery image slider
it wont work. can somebody tell me what exactly to do? or can somebody tell me the steps?
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: jquery image slider
i found this
https://www.youtube.com/watch?v=gZ9Km3bPte0 PART 1
https://www.youtube.com/watch?v=MhNhElcG-JY&feature=related PART 2
Another one is this
http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/
Can somebody help me out?
https://www.youtube.com/watch?v=gZ9Km3bPte0 PART 1
https://www.youtube.com/watch?v=MhNhElcG-JY&feature=related PART 2
Another one is this
http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/
Can somebody help me out?
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: jquery image slider
May I remind you that double/triple posting isn't tolerated unless separated by 24 hours (Use the edit button) This is your 3rd reminder which turns into a warning.
MrMario- Helper
- Posts : 22186
Reputation : 1839
Language : test
Re: jquery image slider
yeah, sory..
BUMP!
BUMP!
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: jquery image slider
Where do you want to place the slider?
On an Html page, the homepage or a widget?
On an Html page, the homepage or a widget?
Re: jquery image slider
on the portal page widget sir RoNo
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: jquery image slider
well, i dont know how actually, i added al the codes but it shows nothing.
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: jquery image slider
Hello,
Try adding this code to the widget...
Try adding this code to the widget...
- Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio Image Rotator by Soh Tanaka</title>
<style type="text/css">
body {
background: #222;
margin: 0; padding: 0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
*{outline: none;}
img {border: 0;}
.container {
width: 790px;
padding: 0;
margin: 0 auto;
}
.folio_block {
position: absolute;
left: 50%; top: 50%;
margin: -140px 0 0 -395px;
}
/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:286px; width: 790px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>
</head>
<body>
<div class="container">
<div class="folio_block">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://www.designbombs.com/tag/slider/"><img src="reel_1.jpg" alt="" /></a>
<a href="http://www.designbombs.com/tag/slider/"><img src="reel_2.jpg" alt="" /></a>
<a href="http://www.designbombs.com/tag/slider/"><img src="reel_3.jpg" alt="" /></a>
<a href="http://www.designbombs.com/tag/slider/"><img src="reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
<p style="color: #fff; margin: 10px 0; float: left; width: 100%;"><a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/" style="color: #fff; padding: 10px 0;">Automatic Image Slider with CSS & jQuery</a> by Soh Tanaka</p>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
</body>
</html>
ankillien- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: jquery image slider
nothing shows sir ANKILLIEN
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: jquery image slider
Hi guys...
[ this method of getting jQuery content to work in widgets
can be used for other javascript content as well ]
Most scripts don't work in forumotion widgets
so we have to link them...
Save this section of the slider code as a javascript file
title it: show.js
Upload the file to a site such as yourjavascript.com
They will email you a script link after uploading...
It will look like this
Use this version of jQuery
Place it at the top of your widget (before your "show" script)
There's a background image in the style code that's easy to miss
[ number box red background ]
http://www.sohtanaka.com/web-design/examples/image-slider/paging_bg2.png
Add this style code to your widget (after the scripts)
And finally... here is the slider content
Add it to your widget (after the style code)
Sorry, I can't provide ongoing support for this.
Edit the image links and style elements in the code.
Refer to the author's site for more customizing information.
Your widget code should look like this
(host the "show.js" javascript file)
This code has been tested and is working: Demo (scroll down)
[ this method of getting jQuery content to work in widgets
can be used for other javascript content as well ]
Most scripts don't work in forumotion widgets
so we have to link them...
Save this section of the slider code as a javascript file
title it: show.js
- Code:
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
Upload the file to a site such as yourjavascript.com
They will email you a script link after uploading...
It will look like this
- Code:
<script type="text/javascript" src="http://www.yourjavascript.com/ YOUR SCRIPT FILE/NUMBER WILL BE HERE show.js"></script>
Use this version of jQuery
Place it at the top of your widget (before your "show" script)
- Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
There's a background image in the style code that's easy to miss
[ number box red background ]
http://www.sohtanaka.com/web-design/examples/image-slider/paging_bg2.png
Add this style code to your widget (after the scripts)
- Code:
<style type="text/css">
*{outline: none;}
img {border: 0;}
.container {
width: 790px;
padding: 0;
margin: 0 auto;
}
/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:286px; width: 790px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(http://www.sohtanaka.com/web-design/examples/image-slider/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>
And finally... here is the slider content
Add it to your widget (after the style code)
- Code:
<center>
<div class="container">
<div class="folio_block">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_1.jpg" alt="" /></a>
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_2.jpg" alt="" /></a>
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_3.jpg" alt="" /></a>
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
</div>
</center>
Sorry, I can't provide ongoing support for this.
Edit the image links and style elements in the code.
Refer to the author's site for more customizing information.
Your widget code should look like this
(host the "show.js" javascript file)
- Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.yourjavascript.com/ YOUR SCRIPT FILE/NUMBER WILL BE HERE"></script>
<style type="text/css">
*{outline: none;}
img {border: 0;}
.container {
width: 790px;
padding: 0;
margin: 0 auto;
}
/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:286px; width: 790px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(http://www.sohtanaka.com/web-design/examples/image-slider/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>
<center>
<div class="container">
<div class="folio_block">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_1.jpg" alt="" /></a>
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_2.jpg" alt="" /></a>
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_3.jpg" alt="" /></a>
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
</div></center>
This code has been tested and is working: Demo (scroll down)
Re: jquery image slider
As per my experience, Forumotion will filter the '$' alias in jQuery
Either you can skip it with noconflict function or host the file somewhere else.
Either you can skip it with noconflict function or host the file somewhere else.
ankillien- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: jquery image slider
Hello sir rono, when i copy your last file which is this
it only shows the first image, and i cannot see the numbers to choose
- Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.yourjavascript.com/ YOUR SCRIPT FILE/NUMBER WILL BE HERE"></script>
<style type="text/css">
*{outline: none;}
img {border: 0;}
.container {
width: 790px;
padding: 0;
margin: 0 auto;
}
/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:286px; width: 790px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(http://www.sohtanaka.com/web-design/examples/image-slider/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>
<center>
<div class="container">
<div class="folio_block">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_1.jpg" alt="" /></a>
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_2.jpg" alt="" /></a>
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_3.jpg" alt="" /></a>
<a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img src="http://www.sohtanaka.com/web-design/examples/image-slider/reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
</div></center>
it only shows the first image, and i cannot see the numbers to choose
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: jquery image slider
notice the second script in the code you've copied
Please read my entire post
You must do the very first step...
Create a script file, title it: show.js, upload/host the file.
Add your uploaded script Url to this section
Please read my entire post
You must do the very first step...
Create a script file, title it: show.js, upload/host the file.
Add your uploaded script Url to this section
- Code:
<script type="text/javascript" src="http://www.yourjavascript.com/ YOUR SCRIPT FILE/NUMBER WILL BE HERE"></script>
Re: jquery image slider
ops, sorry. my bad. but i didn't receive any mail from them. is there another hosting site?
[Edited] Problem Solved, i upload it to another hosting site. thank you sir RoNo. Mod, close this thread now and marked as SOLVED. thanks guys
[Edited] Problem Solved, i upload it to another hosting site. thank you sir RoNo. Mod, close this thread now and marked as SOLVED. thanks guys
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: jquery image slider
This topic is closed. Glad I could help. LockedRoNo |
General rules Tricks & Tips FAQ listing | For founders who lost their passwords About support requests by PM Announcements & Updates |
Similar topics
» Jquery Image Slider
» jQuery image slider
» Jquery slider help
» jQuery slider on my forum
» jQuery slider on Forumotion
» jQuery image slider
» Jquery slider help
» jQuery slider on my forum
» jQuery slider on Forumotion
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum