Jump to content

mon slider js ne s'affiche pas


Recommended Posts

Bonsoir,

allant de difficultés en difficultés avec mon site, je fais appel à vous...

 

1er problème:

Sur ma page d'accueil j'ai un slider d'images qui défile mais lorsque je lance mon dossier prestashop sur mamp, il ne s'affiche pas du tout. Lorsque j'enlève les ID de mes div, les images apparaissent donc c'est bien un problème avec le js du slider que j'ai : Voici mon code dans mon head qui appelle le slider : (ci dessous)

 

2eme problème:

J'ai un menu défilant avec des images pour aller sur la e-boutique (infinite carrousel)avec une partie des icones qui défilent. Et là sur prestashop, ça ne fonctionne plus..

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 lt-ie6 " lang="{$lang_iso}"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->
<!--[if gt IE 8]> <html lang="fr" class="no-js ie9" lang="{$lang_iso}"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="{$lang_iso}" class="no-js">
    <head>
        <meta charset="utf-8" />
        <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
          
              
                 
{if isset($meta_description) AND $meta_description}
        <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
        <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
        <meta name="generator" content="PrestaShop" />
        <meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
        <link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
        <link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
        
        
        
        <script type="text/javascript">
            var baseDir = '{$content_dir}';
            var baseUri = '{$base_uri}';
            var static_token = '{$static_token}';
            var token = '{$token}';
            var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
            var priceDisplayMethod = {$priceDisplay};
            var roundMode = {$roundMode};
        </script>
{if isset($css_files)}
    {foreach from=$css_files key=css_uri item=media}
    <link href="{$css_uri}" rel="stylesheet" media="{$media}" />
     <link  href="{$css_uri}reset.css" rel="stylesheet" />
    <link href="{$css_uri}blueberry.css"rel="stylesheet"    /><!--slider----------------------------->
    <link href="{$css_uri}lightbox.css" rel="stylesheet"  />
        <link href="{$css_uri}screen.css" rel="stylesheet"  />
    {/foreach}
{/if}
        <script src="{$js_dir}modernizr/modernizr.custom.82225.js"></script>    
       <script src="{$js_dir}jquery.blueberry.js"></script><!--slider----------------------------->
      



{if isset($js_files)}
    {foreach from=$js_files item=js_uri}
    
  <!--slider-----------------------------> <script src="{$js_uri}https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><!--slider----------------------------->
    <script src="{$js_uri}http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    {/foreach}
{/if}

        {$HOOK_HEADER}
         <script><!--slider----------------------------->
                            $(window).load(function() {
                                    $('.blueberry').blueberry();
                            });
                 </script>

        <script type="text/javascript"><!--carrousel----------------------------->

$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
 
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(),
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
        
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                }

                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapper.after();
        
        // 5. Bind to the forward and back buttons
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});
</script>
 <style type="text/css" rel="stylesheet">
                </style>
    </head>
  

Avez vous une idée? Mes appels sont-ils mauvais?

Vous faut-il d'autre bout de code?

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...