The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

jquery image slider

View previous topic View next topic Go down

Solved jquery image slider

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

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

Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Solved Re: jquery image slider

Post by <3 Sanjay on 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
New Member

Posts : 22
Reputation : 0
Language : English;Hindi

Back to top Go down

Solved Re: jquery image slider

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

how about adding this one on portal?

Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Solved Re: jquery image slider

Post by <3 Sanjay on 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
New Member

Posts : 22
Reputation : 0
Language : English;Hindi

Back to top Go down

Solved Re: jquery image slider

Post by Hellrose on 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
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Solved Re: jquery image slider

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


Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Solved Re: jquery image slider

Post by MrMario on 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
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

Solved Re: jquery image slider

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

yeah, sory..

BUMP!

Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Solved Re: jquery image slider

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

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

RoNo
Active Poster

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

http://bf2mercenaries.forumotion.com/

Back to top Go down

Solved Re: jquery image slider

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

on the portal page widget sir RoNo

Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Solved Re: jquery image slider

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

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

Guest
Guest


Back to top Go down

Solved Re: jquery image slider

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

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

Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Solved Re: jquery image slider

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

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

Guest
Guest


Back to top Go down

Solved Re: jquery image slider

Post by ankillien on 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
Energetic

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

http://www.webartzforum.com/

Back to top Go down

Solved Re: jquery image slider

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

nothing shows sir ANKILLIEN

Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Solved Re: jquery image slider

Post by RoNo on 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.





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)

RoNo
Active Poster

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

http://bf2mercenaries.forumotion.com/

Back to top Go down

Solved Re: jquery image slider

Post by ankillien on 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
Energetic

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

http://www.webartzforum.com/

Back to top Go down

Solved Re: jquery image slider

Post by Hellrose on 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
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Solved Re: jquery image slider

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

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
Code:
 <script type="text/javascript" src="http://www.yourjavascript.com/ YOUR SCRIPT FILE/NUMBER WILL BE HERE"></script>

RoNo
Active Poster

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

http://bf2mercenaries.forumotion.com/

Back to top Go down

Solved Re: jquery image slider

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

Spam Removed

kalb
New Member

Posts : 1
Reputation : 0
Language : english

Back to top Go down

Solved Re: jquery image slider

Post by Hellrose on 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
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Solved Re: jquery image slider

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


RoNo
Active Poster

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

http://bf2mercenaries.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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