Pergunta

estou tentando implementar Jquery ampliação no meu site baseado em Joomla nas imagens do catálogo.Não consigo fazer isso funcionar, então alguém pode me ajudar a resolver esse problema?

Eu adicionei estes scripts no head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script src="http://www.myurl.mk/templates/beez_20/javascript/jquery.zoom.js"></script>

aqui está o erro que dá:

Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'
(anonymous function)

aqui está o link para um exemplo do meu site

aqui está o meu código:

<script>
        $(document).ready(function(){
            $('#ex1').zoom({url: '<?php echo $this->item->imageXLarge; ?>'});
        });
    </script>
      <div class="itemImageBlock" style="float:none;">
          <span class="itemImage" id="ex1">
                <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
          </span>
Foi útil?

Solução

Eu vi sua página e descobri que você está carregando o arquivo jQuery após os arquivos dependentes.Há muitos erros no console.o primeiro é jQuery não definido.Mova seu arquivo jQuery antes de todos os outros arquivos de script.

Depois de mover o jQuery para cima, seu site parece bom.Anexei um instantâneo conforme você solicitou.enter image description here

Outras dicas

Na sua página de exemplo, você está importando ks2.js antes de jquery.js.

Este deve ser o primeiro item após o seu <head> marcação:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top