0

I need to add this: 

<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
    a.fancybox img {
        border: none;
        box-shadow: 0 1px 7px rgba(0,0,0,0.6);
        -o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
    } 
    a.fancybox:hover img {
        position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
    }
</style>

on <head>

and this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
    $(function($){
        var addToAll = false;
        var gallery = false;
        var titlePosition = 'inside';
        $(addToAll ? 'img' : 'img.fancybox').each(function(){
            var $this = $(this);
            var title = $this.attr('title');
            var src = $this.attr('data-big') || $this.attr('src');
            var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
            $this.wrap(a);
        });
        if (gallery)
            $('a.fancybox').attr('rel', 'fancyboxgallery');
        $('a.fancybox').fancybox({
            titlePosition: titlePosition
        });
    });
    $.noConflict();
</script>

on <body>

for I can insert images with fancy box tag/class:

<img class="fancybox" src="my-image.jpg" />

I already do that but I do not remember how, and now I upgraded joomla ro 3.4 from 3.3 and I don't work anymore...

Any help will be appreciated.

|improve this question
2

The file you want to edit is located here:

ROOT/templates/YOUR_TEMPLATE/index.php

If You're using a template based on a framework such as one from Rockettheme or Yootheme, the file may be different.

I would suggest however that you don't edit the template file, and instead create a small plugin to implement your code.

|improve this answer
  • Hi, thank you, but how I create a plugin to implement my code? – DiogoSaraiva Apr 17 '15 at 12:43
  • 2
    Please check the Joomla documentation – Lodder Apr 17 '15 at 13:09
2

First of all, you might want to remove the following line from your code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Joomla 3 includes jQuery, so you probably won't need it. Loading jQuery twice is like asking about trouble...

There are many plugins available at the Joomla! Extensions Directory that lets you insert custom scripts to your website. Try a search for "custom script". Maybe the plugin "Head Script" is a good option for you.

Another way to include custom code in Joomla (although arguably not the best or cleanest solution) is to use a module called Custom HTML Advanced. It works exactly as the built-in custom HTML module, but does not filter your CSS/Javascript code. Simply paste your code in the module, publish it to an available module position on ALL pages, and make sure you set "Display Title" to "No".

The main advantage of using an extension instead of modifying your template code is that this will work with any template, even after upgrades.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.