HTML how to make work the carousel in Architecture template

chumbi · Nov 2, 2010

Hi, everybody!
I read all the messages about this carousel thing, but I still can't figure out how to make it move. Can anyone help

tomw · Nov 3, 2010

I teamed up with wonderCMS developer and put together a very simple CMS where you can easily convert any designs into templates. I converted Architecture design into template and included the carousel thing. To see how this works you can simply download it from here and install it in your web site to try it out.

chumbi · Nov 3, 2010

Thanks, Tom, but it doesn't seem to work with mee - excuse my ignorance, but is it possible that the reason is that your index file is in php, while I use a htm editor?

tomw · Nov 3, 2010

Why would you use a HTML editor to make changes while you simply log into the system and click on any content areas to update the page?

chumbi · Nov 3, 2010

I haven't tried this system yet - I will! But I wanted to know how to make the carousel work with a HTML editor

tomw · Nov 3, 2010

Follow the following steps to update the Architecture template you downloaded to make it work with carousel:

Create a folder name js

Copy the codes in jquery.js jcarousellite.js jquery.easing.js and paste them in the files of the same name and save those files in the js folder.

Update the index.html file with the following changes:

Above the <head> tag enter the following:

HTML:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>

Replace the following:

HTML:

<div id="picbar">
<div id="arr-left">
<a href="http://www.freewebsitetemplates.com"><img src="images/arr_left.gif" width="15" height="90" alt="Arr Left" /></a>
  </div>
  <div class="picbox">
  <a href="http://www.freewebsitetemplates.com"><img src="images/pic_3.jpg" width="117" height="74" alt="Pic 3" /></a>
  </div>
  <div class="picbox">
  <a href="http://www.freewebsitetemplates.com"><img src="images/pic_4.jpg" width="117" height="74" alt="Pic 4" /></a>
  </div>
  <div class="picbox">
  <a href="http://www.freewebsitetemplates.com"><img src="images/pic_5.jpg" width="117" height="74" alt="Pic 5" /></a>
  </div>
  <div id="arr-right">
  <a href="http://www.freewebsitetemplates.com"><img src="images/arr_right.gif" width="15" height="90" alt="Arr Right" /></a>
  </div>

With

HTML:

<div id="picbar">
  <div class="carousel default">
  <div class="prev">
  <img width="15" height="90" alt="Arr Right" src="images/arr_left.gif"/>
  </div>
  <div class="jCarouselLite">
  <ul>
  <li style="overflow: hidden; float: left; width: 128px; height: 90px;"><img src="images/pic_3.jpg" alt="" height="90" width="128"></li>
  <li style="overflow: hidden; float: left; width: 128px; height: 90px;"><img src="images/pic_4.jpg" alt="" height="90" width="128"></li>
  <li style="overflow: hidden; float: left; width: 128px; height: 90px;"><img src="images/pic_5.jpg" alt="" height="90" width="128"></li>
  </ul>
  </div>
  <div class="next">
  <img width="15" height="90" alt="Arr Right" src="images/arr_right.gif"/>
  </div>
  <div class="clear"></div>   
  </div>
  <script type="text/javascript">
      $(".default .jCarouselLite").jCarouselLite({
                  auto: 1900, speed: 1000,
          btnNext: ".default .next",
          btnPrev: ".default .prev"
      });  
  </script>     
  </div>

Your index.html should now show the images scrolling horizontally.

tomw · Nov 4, 2010

Above the <head> tag enter the following:

should have been:

Above the </head> tag enter the following:

or

Below the <head> tag enter the following:

chumbi · Nov 5, 2010

Thanks a lot, Tomw!
My carousel scrolls now, but it's still far from perfect - the left and right buttons somehow shifted and are not in line with the images, and what's worse, they don't function as expected, that is, make scroll in the wanted direction I wonder what have I done wrong

ishkey · Nov 5, 2010

Read what enigma1 wrote here his programming skills are always right on.

chumbi · Nov 5, 2010

Yes! It works now! Thanks for reminding me about that! Actually I had already used the enigma 1 recommendations, but without making some path modifications.

Now I only have to find how to put the buttons back in line with the rest

chumbi · Nov 5, 2010

Sorry to say that I'm still stuck - why the HTM source changed the page disposition? Do I have to modify the style now?

tomw · Nov 5, 2010

Can you post your HTML source code so that we may have a look?

chumbi · Nov 5, 2010

I just posted the code but am not sure it went through

chumbi · Nov 5, 2010

Code as modified by me

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Architectural Company</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
</head>

<body>

<div id="wrapper">
<h1>VARIMMO</h1>
<div id="nav"> <a href="http://www.freewebsitetemplates.com">Nous</a> <a href="http://www.freewebsitetemplates.com">Services</a>
<a href="http://www.freewebsitetemplates.com">Solutions</a> <a href="http://www.freewebsitetemplates.com">Projects</a>
<a href="http://www.freewebsitetemplates.com">Contact </a> </div>
<div id="body">
<div id="body-top">
<div id="body-top-2"></div>
<div id="body-bot">
<div id="welcome">
<h2>Bienvenu</h2>
<p><font color="#FFFFFF">sur Varimmo, un site des professionnels de
l'immobilier dans le secteur du Var-est entre les plages de la Côte
d'Azur et l'arrière pays varois.</font><font color="#000000"> </font></p>
<p class="more"><a href="http://www.freewebsitetemplates.com" class="bar-drk"><font color="#FFFFFF">plus</font></a></p>
<iframe width="231" height="301" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&msa=0&msid=113807838461793960223.000493aeac573e32c52be&ll=43.468868,6.561584&spn=0.599981,0.631714&z=9&output=embed"></iframe>
<br />
<small>Afficher <a href="http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&msa=0&msid=113807838461793960223.000493aeac573e32c52be&ll=43.468868,6.561584&spn=0.599981,0.631714&z=9&source=embed" style="color:#0000FF;text-align:left">Varimmo</a>
sur une carte plus grande</small> </div>
<div id="content"> <img src="images/43.jpg" width="145" height="108" alt="Pic 2" class="left" />
<h2>About Our Company</h2>
<p>You can remove any link to our websites from this template you're
free to use the template without linking back to us. Don't want your
boss to know you used a free website </p>
<p> </p>
<p class="more" id="intro"><a href="http://www.freewebsitetemplates.com" class="bar-lit">more</a></p>
<div class="fineline"></div>
<h2>Derniers entrées</h2>
<div id="picbar">
<div class="carousel default">
<div class="prev"> <img width="15" height="90" alt="Arr Right" src="images/arr_left.gif"/></div>
<div class="jCarouselLite">
<ul>
<li style="overflow: hidden; float: left; width: 128px; height: 90px;"><img src="images/pic_3.jpg" alt="" height="90" width="128"></li>
<li style="overflow: hidden; float: left; width: 128px; height: 90px;"><img src="images/pic_4.jpg" alt="" height="90" width="128"></li>
<li style="overflow: hidden; float: left; width: 128px; height: 90px;"><img src="images/pic_5.jpg" alt="" height="90" width="128"></li>
</ul>
</div>
<div class="next"> <img width="15" height="90" alt="Arr Right" src="images/arr_right.gif"/>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
$(".default .jCarouselLite").jCarouselLite({
auto: 1900, speed: 1000,
btnNext: ".default .next",
btnPrev: ".default .prev"
});
</script>
</div>
<div class="clear"></div>
</div>
<div class="fineline-flat"></div>
<div id="planer">
<h2>Architects & Planners</h2>
<div class="fineborder"><img src="images/pic_6.jpg" width="186" height="79" alt="Pic 6" /></div>
<p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just
Web Templates</a>.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com" class="bar-lit">more</a></p>
</div>
<div id="stories">
<h2>Success Stories</h2>
<div class="fineborder"><img src="images/pic_7.jpg" width="186" height="79" alt="Pic 7" /></div>
<p>If you're looking for beautiful and professionally made templates
you can find them at <a href="http://www.templatebeauty.com">Template
Beauty</a>.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com" class="bar-lit">more</a></p>
</div>
<div class="clear-flat"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer">
<p>Copyright Varimmo. All rights reserved</p>
</div>
</div>

</body>
</html>

tomw · Nov 5, 2010

Nop, try again. This time just copy and paste it and then wrap it with HTML tags (the <>) symbol.

tomw · Nov 6, 2010

Got it !

Here is what the codes should be:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Your title</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />    
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="jcarousellite.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
</head>

<body>
<!-- wrapper -->
<div id="wrapper">
   <h1>Your title</h1>
   <!-- navigation -->
   <div id="nav">
      <a href="#">Home</a>
      <a href="#">Services</a> 
      <a href="#">Solutions</a>
      <a href="#">Projects</a> 
      <a href="#">Contact </a>
   </div>
   <!-- body -->
   <div id="body">
      <!-- body-top -->
      <div id="body-top">
     <div id="body-top-2"></div>
     <!-- body-bot -->
     <div id="body-bot">
        <div id="welcome">
           <!-- section 1 content -->
           <h2>Section 1 Content</h2>
           <p><p>Lorem ipsum dolor sit amet, consectetuer
           sadipscing elitr, sed diam nonumy eirmod tempor
           invidunt ut labore et dolore magna aliquyam erat, sed
           diam voluptua. At vero eos et accusam et justo duo
           dolores et ea rebum. Stet clita kasd gubergren, no sea
           takimata sanctus est Lorem ipsum dolor sit amet. Lorem
           ipsum dolor sit amet, consetetur sadipscing elitr, sed
           diam nonumy eirmod tempor invidunt ut labore et dolore
           magna aliquyam erat, sed diam voluptua.
           </p>
           <!-- end section 1 content -->
        </div>
        <!-- content -->
        <div id="content">
           <!-- main content -->
           <h2>Main Content</h2>
           <p><p>Lorem ipsum dolor sit amet, consectetuer
           sadipscing elitr, sed diam nonumy eirmod tempor
           invidunt ut labore et dolore magna aliquyam erat, sed
           diam voluptua. At vero eos et accusam et justo duo
           dolores et ea rebum. Stet clita kasd gubergren, no sea
           takimata sanctus est Lorem ipsum dolor sit amet. Lorem
           ipsum dolor sit amet, consetetur sadipscing elitr, sed
           diam nonumy eirmod tempor invidunt ut labore et dolore
           magna aliquyam erat, sed diam voluptua.
           </p>
           <!-- end main content -->
           <div class="fineline"></div>
           <!-- carousel section -->
           <h2>Carousel</h2>
           <div id="picbar">
          <div class="carousel default">
             <div class="prev">
            <img width="15" height="90" alt="Arr Right" src="images/arr_left.gif"/>
             </div>
             <div class="jCarouselLite">
            <ul>
               <li><img src="images/pic_3.jpg" alt="carousel image 1" height="90" width="128"></li>
               <li><img src="images/pic_4.jpg" alt="carousel image 2" height="90" width="128"></li>
               <li><img src="images/pic_5.jpg" alt="carousel image 3" height="90" width="128"></li>
            </ul>
             </div>
             <div class="next">
            <img width="15" height="90" alt="Arr Right" src="images/arr_right.gif"/>
             </div>
             <div class="clear"></div>   
          </div>
          <script type="text/javascript">
             $(".default .jCarouselLite").jCarouselLite({
             auto: 1900, speed: 1000,
             btnNext: ".default .next",
             btnPrev: ".default .prev"
             });  
          </script>
           </div>
           <!-- end carousel section -->
           <div class="fineline-flat"></div>        
           <div id="planer">
           <!-- section 2 content -->
           <h2>Section 2 Content</h2>
           <p><p>Lorem ipsum dolor sit amet, consectetuer
           sadipscing elitr, sed diam nonumy eirmod tempor
           invidunt ut labore et dolore magna aliquyam erat, sed
           diam voluptua. At vero eos et accusam et justo duo
           dolores et ea rebum. Stet clita kasd gubergren, no sea
           takimata sanctus est Lorem ipsum dolor sit amet. Lorem
           ipsum dolor sit amet, consetetur sadipscing elitr, sed
           diam nonumy eirmod tempor invidunt ut labore et dolore
           magna aliquyam erat, sed diam voluptua.
           </p>
           <!-- end section 2 content -->
           </div>
           <div id="stories">
           <!-- section 3 content -->
           <h2>Section 3 Content</h2>
           <p><p>Lorem ipsum dolor sit amet, consectetuer
           sadipscing elitr, sed diam nonumy eirmod tempor
           invidunt ut labore et dolore magna aliquyam erat, sed
           diam voluptua. At vero eos et accusam et justo duo
           dolores et ea rebum. Stet clita kasd gubergren, no sea
           takimata sanctus est Lorem ipsum dolor sit amet. Lorem
           ipsum dolor sit amet, consetetur sadipscing elitr, sed
           diam nonumy eirmod tempor invidunt ut labore et dolore
           magna aliquyam erat, sed diam voluptua.
           </p>
           <!-- end section 3 content -->
           </div>
           <div class="clear-flat"></div>
        </div>
        <!-- end content -->
        <div class="clear"></div>
     </div>
     <!-- end body-bot -->
      </div>
      <!-- end body-top -->
   </div>
   <!-- end body -->
   <!-- footer -->
   <div id="footer">
      <p>
      Design by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a>
      </p>
   <!-- end footer -->
   </div>
</div>
<!-- end wrapper -->

</body>
</html>

Click here to see the page.

chumbi · Nov 9, 2010

Although I copied the code and did everything that you, masters, suggested, it's still not working. Can it be the fault of my Dreamweaver MX or do I need to learn some more about programming (and I know nothing) to make the necessary adjustments

tomw · Nov 9, 2010

Give me the link to the page and see if I can figure out why it is not working for you.

chumbi · Nov 9, 2010

VARIMMO

There it is - do you see the same as I do? the carousel doesn't look at all as it should

ishkey · Nov 9, 2010

Without even looking at the code, I would have to say that the width of your pictures are to wide, they are wrapping around and dropping down.
You have the two arrows and three pictures which have to fit within the with of the box minus any margins that might be in the css sheet.

So try reducing down each picture by the same amount until it fits or go look at the css file to find the dimension and adjust the pictures accordingly.

Log in or Sign up

HTML how to make work the carousel in Architecture template

chumbi New Member

tomw Member

chumbi New Member

tomw Member

chumbi New Member

tomw Member

tomw Member

chumbi New Member

ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

chumbi New Member

chumbi New Member

tomw Member

chumbi New Member

chumbi New Member

tomw Member

tomw Member

chumbi New Member

tomw Member

chumbi New Member

ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

Log in or Sign up

HTML how to make work the carousel in Architecture template

chumbi New Member

tomw Member

chumbi New Member

tomw Member

chumbi New Member

tomw Member

tomw Member

chumbi New Member

ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

chumbi New Member

chumbi New Member

tomw Member

chumbi New Member

chumbi New Member

tomw Member

tomw Member

chumbi New Member

tomw Member

chumbi New Member

ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

Useful Searches