Jquery is not working

[apatan]

Hi,

I am trying to add a carousel on my home page. The code works absolutely fine on a stand alone html but when I try integrating as a module on the prestashop (ver 1.5.6),  the links do not work. Can you please suggest, where I am making a mistake. I have spent the whole day today figuring this out but can't seem to make a headway

 

Am attaching the screenshot as to who it should work but it doesn;t work when I test it as a prestashop module.

Thank you for your help

 

Cheers!!!

 

<div class="ca-item ca-item-1">

<div class="ca-item-main">

<div class="ca-icon"><a href="#" class="ca-more"><img src="{$this_path}modules/blocktestimonials/img/abc.jpg"></a></div>

<h3>Cupcakes</h3>

<h4>

<span class="ca-quote">“</span>

<span>You proved to be my last minute savior! 

They helped me customize cupcakes for my brother's birthday on a short notice, which is indeed heroic in itself...</span>

</h4>

</div>

<div class="ca-content-wrapper" >

<div class="ca-content">

<h6>Delivers happiness in tittle molds</h6>

<a href="#" class="ca-close">close</a>

<div class="ca-content-text">

<p>My family loved the presentation of the cupcakes, down to the spoon and all. The customer service is exceptionally great. The staff is extremely hospitable and talented.</p>

 

<p>Thank you for this memory and for delivering happiness in little molds. 

</p>

</div>

</div>

</div>

</div>

 

[gonebdg - webindoshop.com]

What jquery library/framework that you used ?

What jquery plugin that you used ?

When you had a problem with jquery or javascript, check the console log of firebugs add-ons firefox or something similiar, then post the log that you've found in here.

Edited July 27, 2015 by gonebdg - webindoshop.com (see edit history)

[apatan]

I am using the following script for jquery
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

Since I am not a techie, probably I am not able to pass the right link from the images to show the div. Probably I need to use for-each statement in my tpl file, that could be one of the reason why it is not working. Am posting the code which I am using for opening the div. Let me know where I am going wrong.

 

Thank you so much for your help

 

 

<div id="ca-container" class="ca-container">

<div class="ca-wrapper">

 

<div class="ca-item ca-item-1">

<div class="ca-item-main">

<div class="ca-icon"><a href="#" class="ca-more"><img src="{$this_path}modules/blocktestimonials/img/GameofThrone-cupcakes.jpg" alt="Game of Throne Cupcakes"></a></div>

Vanilla Cupcakes</h3>

<h4>

<span class="ca-quote">“</span>

<span 

They helped me customize cupcakes for my brother's birthday on a short notice, which is indeed heroic in itself...</span>

<div class="ca-name">Sonia Sharma, Gurgaon</div>

</h4>

<div class="ca-view-in"><a href="http://thebakers.in/27-designer-cakes"  target="_blank" class="ca-view">Explore</a></div>

</div>

<div class="ca-content-wrapper" >

<div class="ca-content">

<h6>Delivers happiness in tittle molds</h6>

<a href="#" class="ca-close">close</a>

<div class="ca-content-text">

<p>My family loved the presentation of the cupcakes, down to the spoon and all. The customer service is exceptionally great. The staff is extremely hospitable and talented.</p>

<p>Being a thorough cupcake-lover, I get asked quite frequently why cupcakes are so popular. I think it's because everyone has a special memory of a cupcake. How do I know this? On the D-day, when I saw a room of adults break into huge smiles upon seeing your cupcakes, I knew it was special.</p> 

</div>

</div>

</div>

</div>

 

<div class="ca-item ca-item-2">

<div class="ca-item-main">

<div class="ca-icon"><a href="#" class="ca-more"><img src="{$this_path}modules/blocktestimonials/img/Chocolate-cupcakes.jpg" alt="Chocolate Cupcakes by Alka"></a></div>

<h3>Chocolate Cupcakes</h3>

<h4>

<span class="ca-quote">“</span>

<span>You were a fabulous find- sitting a 1000 Kms away... </span>

                               <div class="ca-name">Alka, Birbhum</div>

</h4>

<div class="ca-view-in"><a href="http://thebakers.in/cupcakes/36-chocolate-cupcakes.html"  target="_blank" class="ca-view">Explore</a></div>

</div>

<div class="ca-content-wrapper">

<div class="ca-content">

<h6>A Fabulous Find</h6>

<a href="#" class="ca-close">close</a>

<div class="ca-content-text">

<p>You was a fabulous find- sitting a 1000 Kms away, being able to get yummy chocolate cupcakes delivered in Delhi, to be able to gift my cousin a surprise and a smile! </p>

</div>

</div>

</div>

</div>

</div>

</div>

[gonebdg - webindoshop.com]

You don't have to use another jquery library from another source like from google hosted libraries because PrestaShop already load the necessary jquery library (built-in).
For example since PrestaShop v.1.6.x the jquery library v.1.11.0 already built-in and automatically loaded, but in PrestaShop v.1.5.6 the jquery library version is v.1.7.2

Make sure you don't load another jquery library in your PrestaShop, or it will causing a conflict and make more trouble for you.
Unless it's really required and you know what you're doing.

I guess my previous question is not clear and making you confuse ...
What i need to know is what jquery plugin that you use for carousel ?
There are a lot of jquery carousel plugin out there, and some jquery carousel plugin might only work with certain jquery library version (compatibility), so make sure about that prior to use it.

Commonly jquery carousel plugin will need you to setup the necessary jquery statement within your "jquery document ready" which refer to html element ID, for example :

pay attention to div id selector

$(document).ready(function() {
      $('#my_carousel').myJqueryPluginName();
});

Then your html markup might have something like this :

<div id="my_carousel" class="my-jquery-plugin-name">
      <div class="carousel_items">
            <img src="image-01.jpg">
            <span>descriptions-01</span>
      </div>
      <div class="carousel_items">
            <img src="image-02.jpg">
            <span>descriptions-02</span>
      </div>
      <!-- other carousel items here -->
</div>

Then to find out what its wrong with your JS carousel, you should check the error log which can be viewed through your browser console log as a said on my previous post above.

 

AND please use Code < > instead Quote when you write some programing code (html, php, js, smarty, etc) on your post

[apatan]

Your suggestion of not using an external jquery library did wonders. I removed the code and it started working like a charm.

 

Not being a techie has many disadvantages and I get struck a lot many times.

 

Thanks to the Prestashop community, help is just a click away. Thank you for all your help