jquery image slider

+2
<3 Sanjay
Hellrose
6 posters

Go down

Solved jquery image slider

Post by Hellrose August 11th 2010, 9:17 am

can somebody help me how can i add this one to my forum??
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by <3 Sanjay August 11th 2010, 9:24 am

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.
<3 Sanjay
<3 Sanjay
New Member

Posts : 22
Reputation : 0
Language : English;Hindi

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by Hellrose August 11th 2010, 9:26 am

how about adding this one on portal?
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by <3 Sanjay August 11th 2010, 9:35 am

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.
<3 Sanjay
<3 Sanjay
New Member

Posts : 22
Reputation : 0
Language : English;Hindi

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by Hellrose August 11th 2010, 9:50 am

it wont work. can somebody tell me what exactly to do? or can somebody tell me the steps?
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by Hellrose August 11th 2010, 10:26 am

Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by MrMario August 11th 2010, 5:48 pm

May I remind you that double/triple posting isn't tolerated unless separated by 24 hours (Use the edit button) Wink This is your 3rd reminder which turns into a warning.
MrMario
MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1839
Language : test

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by Hellrose August 12th 2010, 4:51 am

yeah, sory..

BUMP!
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by RoNo August 12th 2010, 9:42 am

Where do you want to place the slider?
On an Html page, the homepage or a widget?
RoNo
RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

View user profile http://bf2mercenaries.forumotion.com/

Back to top Go down

Solved Re: jquery image slider

Post by Hellrose August 12th 2010, 4:45 pm

on the portal page widget sir RoNo
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by Guest August 13th 2010, 4:21 pm

then just make a new widget and add the code in it Smile
avatar
Guest
Guest


Back to top Go down

Solved Re: jquery image slider

Post by Hellrose August 13th 2010, 4:30 pm

well, i dont know how actually, i added al the codes but it shows nothing.
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by Guest August 13th 2010, 4:40 pm

I tried too :/ but its hard, there is many codes Smile
avatar
Guest
Guest


Back to top Go down

Solved Re: jquery image slider

Post by ankillien August 13th 2010, 4:59 pm

Hello,

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 &amp; 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
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by Hellrose August 14th 2010, 12:06 am

nothing shows sir ANKILLIEN
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by RoNo August 14th 2010, 3:33 am

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
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>
Add the entire linked script code to your widget.


jquery image slider Break_gray1


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>

jquery image slider Break_gray1


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>

jquery image slider Break_gray1


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.


jquery image slider Break_gray1


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)
RoNo
RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

View user profile http://bf2mercenaries.forumotion.com/

Back to top Go down

Solved Re: jquery image slider

Post by ankillien August 14th 2010, 3:51 am

As per my experience, Forumotion will filter the '$' alias in jQuery Razz
Either you can skip it with noconflict function or host the file somewhere else.
ankillien
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by Hellrose August 17th 2010, 3:50 pm

Hello sir rono, when i copy your last file which is this

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
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by RoNo August 17th 2010, 8:10 pm

notice the second script in the code you've copied

Please read my entire post jquery image slider Rolling1

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>
RoNo
RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

View user profile http://bf2mercenaries.forumotion.com/

Back to top Go down

Solved Re: jquery image slider

Post by kalb August 18th 2010, 8:34 am

Spam Removed
avatar
kalb
New Member

Posts : 1
Reputation : 0
Language : english

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by Hellrose August 19th 2010, 5:25 am

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
Hellrose
Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

View user profile

Back to top Go down

Solved Re: jquery image slider

Post by RoNo August 19th 2010, 7:59 am

RoNo
RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

View user profile http://bf2mercenaries.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum