Fancybox and Textpattern

helmz · 2010-09-21 11:15:35

solved… ty guys

the code im using:

<a id="inline" href="#inline1">click</a>
<a name="inline1">
<div id="fancybox-inner" style="top: 10px; left: 10px; width: 400px; height: 100px; overflow: auto; display:none;">
   <div style="width: 400px; height: 100px; overflow: auto;" id="inline1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
    </div>
</div>
</a>

helmz · 2010-09-30 11:38:27

I post it here, Im using this code with Fancybox but its not working as it should

<a class="fancy" <txp:image id="6"/> 
<txp:thumbnail id="6" />
<script>
$('a.fancy').fancybox();
</script></a>

Ty.

jsoo · 2010-09-30 12:17:30

You’ve left off the closing bracket for the opening a tag, and omitted the space before the closing slash in the image tag. You’ve left out the required type attribute for the script. Whether or not you’re using Fancybox correctly I have no idea, because I know nothing about that script.

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

#13 2010-09-21 11:15:35

Re: Fancybox and Textpattern

#14 2010-09-30 11:38:27

Re: Fancybox and Textpattern

#15 2010-09-30 12:17:30

Re: Fancybox and Textpattern

#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