8 Replies Latest reply on Aug 17, 2010 6:31 AM by bat-orgil khashbaatar

    how to integrating javascript slideshow in seam web project

    bat-orgil khashbaatar Newbie

      Hi guys...


      I'm developing seam project using Jboss AS 5.0 GA, seam 2.2 and eclipse.
      I've problem that is javascript slideshow in xhtml file...
      such as this's my web code



       xmlns:rich="http://richfaces.org/rich"
          
          template="layout/template.xhtml">
         
         <head> 
          <link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
          <link href="stylesheet/theme.css" rel="stylesheet" type="text/css" />
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <script type="text/javascript" src="javascript/compressed.js"></script>
      



      and this is javascript code



      <script type="text/javascript" src="javascript/compressed.js"></script>
      <script type="text/javascript">
           $('slideshow').style.display='none';
           $('wrapper').style.display='block';
           var slideshow=new TINY.slideshow("slideshow");
           window.onload=function(){
                slideshow.auto=true;
                slideshow.speed=5;
                slideshow.link="linkhover";
                slideshow.info="information";
                slideshow.thumbs="slider";
                slideshow.left="slideleft";
                slideshow.right="slideright";
                slideshow.scrollSpeed=4;
                slideshow.spacing=5;
                slideshow.active="#fff";
                slideshow.init("slideshow","image","imgprev","imgnext","imglink");
           }
      </script>



      And slide design body



      <div id="wrapper">
                <div id="fullsize">
                     <div id="imgprev" class="imgnav" title="Previous Image"></div>
                     <div id="imglink"></div>
                     <div id="imgnext" class="imgnav" title="Next Image"></div>
                     <div id="image"></div>
                     <div id="information">
                          <h3></h3>
                          <p></p>
                     </div>
                </div>
                <div id="thumbnails">
                     <div id="slideleft" title="Slide Left"></div>
                     <div id="slidearea">
                          <div id="slider"></div>
                     </div>
                     <div id="slideright" title="Slide Right"></div>
                </div>
           </div>



      this is my slide content



      <ul id="slideshow">
                            <li>
                     <h3>TinySlideshow v1</h3>
                     <span>photos/orange-fish.jpg</span>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                     <a href="#"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
                </li>
                <li>
                     <h3>Sea Turtle</h3>
                     <span>photos/sea-turtle.jpg</span>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                     <img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
                </li>
                <li>
                     <h3>Red Coral</h3>
                     <span>photos/red-coral.jpg</span>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                     <a href="#"><img src="thumbnails/red-coral-thumb.jpg" alt="Red Coral" /></a>
                </li>
      </ul>
      




      Because i'm a beginner...Help me guys





        • 1. Re: how to integrating javascript slideshow in seam web project
          Leo van den berg Master

          Hi,


          maybe you should use an off-the-shelf JSF component such as PrimeFaces ImageSwitch:


          primeFaces showcasek


          Most of these components work well together with Seam when you wrap them inside an Rich a4j:outputPanel.


          Leo

          • 2. Re: how to integrating javascript slideshow in seam web project
            Serkan Eskici Novice

            I assume that you're using jQuery for scripting ?


            If yes, then replace the $ (dollar) sign with jQuery(..).


            So instead write this:


            jQuery('slideshow').hide(); // same as style.display='none';
            jQuery('slideshow').show(); // same as style.display='block';
            

            • 3. Re: how to integrating javascript slideshow in seam web project
              bat-orgil khashbaatar Newbie

              Leo van den Berg wrote on Aug 17, 2010 02:51:


              Hi,

              maybe you should use an off-the-shelf JSF component such as PrimeFaces ImageSwitch:

              primeFaces showcasek

              Most of these components work well together with Seam when you wrap them inside an Rich a4j:outputPanel.

              Leo


              ok Dear Leo....tnx for reply


              When I trying in html, css and javascript version before it, that is ok...
              Now while I've insert that's codes such as javascript and css into seam in xhtml file, it be working error...what i do? 

              • 4. Re: how to integrating javascript slideshow in seam web project
                bat-orgil khashbaatar Newbie

                I wanna javascript slideshow. thanks, sorry Leo..


                maybe i working by fault direction...I don't know...I wanna do this challenge.
                    please with me this problem solution
                          

                • 5. Re: how to integrating javascript slideshow in seam web project
                  bat-orgil khashbaatar Newbie


                    <body>  
                       <ui:define name="content">
                            
                       <div id="left">
                        <table border="0" cellpadding="0" cellspacing="0" width="686">
                          <tbody>
                          <tr>
                              <td class="homepageTd_1" valign="top" width="380">
                                <div class="left_articles">
                                <div class="right_articles_hd">Special news</div>
                                <div class="listBody" style="height: 353px;">  
                              
                              <ul id="slideshow">
                                        <li>
                                 <h3>TinySlideshow v1</h3>
                                 <span>photos/orange-fish.jpg</span>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                                 <a href="#"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
                            </li>
                            <li>
                                 <h3>Sea Turtle</h3>
                                 <span>photos/sea-turtle.jpg</span>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                                 <img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
                            </li>
                            <li>
                                 <h3>Red Coral</h3>
                                 <span>photos/red-coral.jpg</span>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                                 <a href="#"><img src="thumbnails/red-coral-thumb.jpg" alt="Red Coral" /></a>
                            </li>
                            <li>
                                 <h3>Coral Reef</h3>
                                 <span>photos/coral-reef.jpg</span>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                                 <a href="#"><img src="thumbnails/coral-reef-thumb.jpg" alt="Coral Reef" /></a>
                            </li>
                            <li>
                                 <h3>Blue Fish</h3>
                                 <span>photos/blue-fish.jpg</span>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                                 <img src="thumbnails/blue-fish-thumb.jpg" alt="Blue Fish" />
                            </li>
                            <li>
                                 <h3>TinySlideshow v.2</h3>
                                 <span>photos/yellow-fish.jpg</span>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                                 <a href="#"><img src="thumbnails/yellow-fish-thumb.jpg" alt="Yellow Fish" /></a>
                            </li>
                            <li>
                                 <h3>Squid</h3>
                                 <span>photos/squid.jpg</span>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                                 <a href="#"><img src="thumbnails/squid-thumb.jpg" alt="Squid" /></a>
                            </li>
                            <li>
                                 <h3>Small Fish</h3>
                                 <span>photos/small-fish.jpg</span>
                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
                                 <a href="#"><img src="thumbnails/small-fish-thumb.jpg" alt="Small Fish" /></a>
                            </li>
                       </ul>
                       <div id="wrapper">
                            <div id="fullsize">
                                 <div id="imgprev" class="imgnav" title="Previous Image"></div>
                                 <div id="imglink"></div>
                                 <div id="imgnext" class="imgnav" title="Next Image"></div>
                                 <div id="image"></div>
                                 <div id="information">
                                      <h3></h3>
                                      <p></p>
                                 </div>
                            </div>
                            <div id="thumbnails">
                                 <div id="slideleft" title="Slide Left"></div>
                                 <div id="slidearea">
                                      <div id="slider"></div>
                                 </div>
                                 <div id="slideright" title="Slide Right"></div>
                            </div>
                       </div>
                  <script type="text/javascript" src="javascript/compressed.js"></script>
                  <script type="text/javascript">
                       $('slideshow').style.display='none';
                       $('wrapper').style.display='block';
                       var slideshow=new TINY.slideshow("slideshow");
                       window.onload=function(){
                            slideshow.auto=true;
                            slideshow.speed=5;
                            slideshow.link="linkhover";
                            slideshow.info="information";
                            slideshow.thumbs="slider";
                            slideshow.left="slideleft";
                            slideshow.right="slideright";
                            slideshow.scrollSpeed=4;
                            slideshow.spacing=5;
                            slideshow.active="#fff";
                            slideshow.init("slideshow","image","imgprev","imgnext","imglink");
                       }
                  </script>
                             </div>
                             </div>
                            </td>
                            <td class="homepageTd_2" valign="top" width="250">
                               <div class="left_articles">
                               <div class="right_articles_hd">The Latest news</div>
                               <div class="listBody" style="height: 353px;">
                             </div>
                             </div>
                           </td>
                          </tr></tbody></table>




                  my slide content can't be right design in 

                  Special news
                  .....The fault that is outbalance in 
                  Special news
                  tag...



                  slide.css



                  #slideshow {list-style:none; color:#fff}
                  #slideshow span {display:none}
                  #wrapper {width:356px; margin:2px; display:none}
                  #wrapper * {margin:0; padding:0}
                  #fullsize {position:relative; width:350px; height:250px; padding:1px; border:1px solid #ccc; background:#000}
                  #information {position:absolute; bottom:0; width:350px; height:0; background:#000; color:#fff; overflow:hidden; z-index:150; opacity:.7; filter:alpha(opacity=70)}
                  #information h3 {padding:4px 3px 3px; font-size:14px}
                  #information p {padding:0 3px 3px}
                  #image {width:350px}
                  #image img {position:absolute; z-index:25; width:auto}
                  .imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
                  #imgprev {left:0; background:url(../img/left.gif) left top no-repeat}
                  #imgnext {right:0; background:url(../img/right.gif) right top no-repeat}
                  #imglink {position:absolute; height:190px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
                  #thumbnails {margin-top:5px}
                  #slideleft {float:left; width:15px; height:57px; background:url(../img/scroll-left.gif) center center no-repeat; background-color:#222}
                  #slideleft:hover {background-color:#333}
                  #slideright {float:right; width:15px; height:57px; background:#222 url(../img/scroll-right.gif) center center no-repeat}
                  #slideright:hover {background-color:#333}
                  #slidearea {float:left; position:relative; width:320px; margin-left:3px; height:57px; overflow:hidden}
                  #slider {position:absolute; left:0; height:81px}
                  #slider img {cursor:pointer; border:1px solid #666; padding:2px}




                    what solution ?


                  • 6. Re: how to integrating javascript slideshow in seam web project
                    Leo van den berg Master

                    Hi,


                    The Primefaces libraries are basically smart wrappers around javascript components. For example - the PrimeFaces people will correct me if I'm wrong - ImageSwitch comes from YUI. There are also other components available, most of them thoroughly tested and used in professional environments. You complicate things too much by re-inventing the wheel.


                    I am not a JavaScript/Seam integration expert, so I can't help you here.


                    Success.


                    Leo

                    • 7. Re: how to integrating javascript slideshow in seam web project
                      Leo van den berg Master

                      Oh, and additionally.


                      Seam threads everything which begins with a hash




                      "#"
                      




                      as a part of EL. Maybe you should put XML-comments around the script ?




                      <script>
                      <![CDATA[
                      function blabla(a,b)
                      ....
                      ....
                      }
                      ]]>
                      </script>  



                      • 8. Re: how to integrating javascript slideshow in seam web project
                        bat-orgil khashbaatar Newbie

                        Leo van den Berg wrote on Aug 17, 2010 06:20:


                        Hi,

                        The Primefaces libraries are basically smart wrappers around javascript components. For example - the PrimeFaces people will correct me if I'm wrong - ImageSwitch comes from YUI. There are also other components available, most of them thoroughly tested and used in professional environments. You complicate things too much by re-inventing the wheel.

                        I am not a JavaScript/Seam integration expert, so I can't help you here.

                        Success.

                        Leo


                        ok...so very tnx Leo...who is can help me in this forum?