Fancybox and Textpattern

helmz · 2010-09-30 20:48:03

Have this and still not working:

<a>
<a class="fancy" <txp:image id="6" /> 
<txp:thumbnail id="6" /></a>
<script>
$('a.fancy').fancybox();
'transitionIn'    :    'elastic',
        'transitionOut'    :    'elastic',
        'speedIn'        :    600, 
        'speedOut'        :    200, 
        'overlayShow'    :    false

</script></a>

Now where can be the problem. I must say that is into a slideshow that when u do <a></a> it takes it like 1 image, so if i put 2 <a> its like 2 images… and take the text like it was an image

Last edited by helmz (2010-09-30 20:49:41)

MattD · 2010-09-30 22:05:31

Missing brackets around your fancybox settings.

 $('a.fancy').fancybox({
        'transitionIn'    :    'elastic',
        'transitionOut'    :    'elastic',
        'speedIn'        :    600, 
        'speedOut'        :    200, 
        'overlayShow'    :    false
});

More examples on Fancybox site.

Last edited by MattD (2010-09-30 22:06:50)

Gocom · 2010-09-30 22:29:41

helmz wrote:

Have this and still not working:

You didn’t fix the issues Jeff pointed out and you ended up adding more issues.

Now you have two links tangled together.
The link (a elements) opening tag still doesn’t have closing tag.
Scripts’ mandatory type attribute is missing.
The additions you made to JavaScript don’t do anything atm. You should be feeding them to the function, now they just cause parsing errors.
You are not link to anything, nor telling fancybox to what content to show in the box. TXP’s image tag doesn’t output URLs, if that is what you are trying. It outputs imgs.

Now, then. What are you trying to do? What output? What should the Fancybox show? Start by Reading Fancybox’s How-to, and take look at the examples and tips.

For example, this, what you tried:

$('a.fancy').fancybox();
'transitionIn'    :    'elastic',
        'transitionOut'    :    'elastic',
        'speedIn'        :    600, 
        'speedOut'        :    200, 
        'overlayShow'    :    false

Doesn’t do anything. If you want to feed options to Fancybox, you need to feed them, not just place the lines somewhere. As Matt said, for example:

$('a.fancy').fancybox(
    {
        'transitionIn' : 'elastic',
        'transitionOut' : 'elastic',
        'speedIn' :    600, 
        'speedOut' : 200, 
        'overlayShow' : false
    }
);

You also probably should initialize the code on page load and centralize the code in the page’s head segment or in external javascript file.

All-in-all, we get something like this:

<script type="text/javascript">
    $(document).ready(function(){
        $('a.fancy').fancybox(
            {
                'transitionIn' : 'elastic',
                'transitionOut' : 'elastic',
                'speedIn' : 600, 
                'speedOut' : 200, 
                'overlayShow' : false
            }
        );
    });
</script>
<a class="fancy" href="/some/content/to/link.png.etc">
    <txp:thumbnail id="6" />
</a>

Last edited by Gocom (2010-09-30 22:35:19)

helmz · 2010-10-01 08:11:26

and what if I need the first image in the first href?

thanks :)

helmz · 2010-10-02 11:04:32

anyone knows?

jsoo · 2010-10-02 12:18:34

You shouldn’t bump a thread without providing more information. I know this is difficult if English isn’t your first language, but to get help you’ve got to try harder.

Your code examples have all shown a single image, so it isn’t clear what you’re asking by “what if I need the first image in the first href?” Are you trying to set up a slideshow, i.e. a succession of images in the same Fancybox? Or do you want a set of images each of which triggers its own Fancybox? In either case it will have to be someone who knows more about Fancybox than I do who gives you the answer, but that’s the kind of information you need to provide.

helmz · 2010-10-02 15:32:49

Ok… I write it better:

I have this code

<a class="fancy" href="/some/content/to/link.png.etc">
    <txp:thumbnail id="6" />
</a>

Ok. Now I dont want to get this image

href="/some/content/to/link.png.etc"

I want this

<txp:image id="6" />

How can i do that? Thanks.

Last edited by helmz (2010-10-02 15:33:08)

jsoo · 2010-10-02 15:44:03

In the code you show you have hard-coded the image id, so you can do the same with the href:

<a class="fancy" href="/images/6.png">
    <txp:thumbnail id="6" />
</a>

This assumes you have kept the default name of images for your Txp image directory, and that your site root is also the domain root (i.e., not a subdirectory).

For a more generalized solution, where you don’t know the image id in advance, you would need either a plugin or the new image tags in Txp 4.3.0, which hasn’t been officially released yet.

helmz · 2010-10-04 08:13:37

That’s it, ty.

Textpattern CMS

Textpattern CMS support forum

#16 2010-09-30 20:48:03

Re: Fancybox and Textpattern

#17 2010-09-30 22:05:31

Re: Fancybox and Textpattern

#18 2010-09-30 22:29:41

Re: Fancybox and Textpattern

#19 2010-10-01 08:11:26

Re: Fancybox and Textpattern

#20 2010-10-02 11:04:32

Re: Fancybox and Textpattern

#21 2010-10-02 12:18:34

Re: Fancybox and Textpattern

#22 2010-10-02 15:32:49

Re: Fancybox and Textpattern

#23 2010-10-02 15:44:03

Re: Fancybox and Textpattern

#24 2010-10-04 08:13:37

Re: Fancybox and Textpattern

Board footer