Universal CSS Transforms: Flip Support Product Page

Problems Flip extension with text (and link) on backside.

Asked 12 years ago
2
have this question
12 years ago Jef Gees posted:
Hoi everybody,
Have a little problem. Hope that you can help me.
I installed the flip extension. Everything works well.
So I was thinking of making a flip with an image and on the backside some text.
But I can not figure out how to do this. Watched the video tutorial over and over again .... but can not find the solution.
If there is one???
Suppose there is, can I also set a link into the text so people can click on it and go to another page??
Hope somebody can help me.
Thnx,
jef

Replies

Replied 12 years ago
12 years ago Miroslav Zografski replied:
Hello Jef,

All you need is a div element with id set that to be inserted as backsource in the extension UI.
in example :
<div id="backside1">
   <h3>My Backside</h3>
   <p>Here is my backside element, that will be used when s.o. flips the image. If any problems check the <a href="help.html">help</a></p>
</div>


then in the UI of the Flip set for Backsource field: #backside1

Regards.
Replied 12 years ago
12 years ago Jef Gees replied:
Hoi Miroslav,
thanks for your reaction and helping me.
I am a little bit stuck.
Do I put this code in the css like
#backside1
And in the css do I put this code??:

#backside1{
[h3]My Backside[/h3]  
   <p>Here is my backside element, that will be used when s.o. flips the image. If any problems check the <a href="help.html">help</a></p> 
}


And as Backsource do I just put #backside1??
Or do I put your code somewhere in the html page .. or ...
I already tried the above but it does not work.
May be I am trying too hard, but I do not get it.
Sorry, but I am still trying to figure it out ...
The problem is that I do not understand how to create a div element with id set that to be inserted as backsource in the UI.
I must be doing something wrong (probably somthing stupid ...).
Hope you can help me.
grtz,
jef
Replied 12 years ago
12 years ago Miroslav Zografski replied:
Hello Jef,
You just put that code ( HTML mark-up it is ), some where in your page. Then that #backside1 is a reference to it that you put in Backsource field in Flip User interface.

Regards.
Replied 12 years ago
12 years ago Jef Gees replied:
Hoi Miroslav,
Thanks for your reply.
Thaught that it had to work like that ...
But it does not. In my html I had following syntax:

 <div id="RowImg1">
     [img]../images/Voeding/Jazz-voor-voeding-kjens-1.jpg" alt="Jazz" width="200" height="200" longdesc="../images/Voeding/Jazz-voor-voeding-kjens-1.jpg" onclick="flip(this, 12, '#backside1', 0.8, 'swing')" />
<div id="backside1">  
  [h3]My Backside[/h3]  
       <p>Here is my backside element, that will be used when s.o. flips the image. If any problems check the <a href="help.html">help</a></p>  
  </div> 
    </div>

On the screen I see the 2 divs (one image and one with the text).
When I click on it, the image goes away and the second div (#backside1) just comes up a little bit higher.
And also you can read the alt tag of the first image.
It is also impossible to click again because nothing happens no more.
In this link you can see that the images are working:
www.alvoge.nl/Alles-voor-en-over-gezondheid/kjens-voeding.html
Here I tried with image and text and this is it:
www.alvoge.nl/test/Alles-voor-en-over-gezondheid/kjens-voeding%20-%20Copy.html
Hope you can help me.

grtz,
jef


Replied 12 years ago
12 years ago Jef Gees replied:
Hoi Miroslav,
We do not give up. I reworked the flip code and came with this result:
  <p class="naast">
     <div id="RowImg1"> 
            <div id="imgRowImg1" onclick="flip('#imgRowImg1', 12, '#backside1', 0.8, 'swing')"><div id="backside1">  
  [h3]My Backside[/h3]  
       <p>Here is my backside element, that will be used when s.o. flips the image. If any problems check the <a href="help.html">help</a></p>
        </div> 
        </div>
        </div>
  </p>
     

You can see the result via this link:
www.alvoge.nl/test/Alles-voor-en-over-gezondheid/kjens-voeding%20-%20Copy.html
But still there is something that's not right.
If you go to the link, the first thing you see is the #backside1. With the right CSS.
You can click on it and then you see the image (that should be first) and on top of it is the text of the #backside1 but without the right CSS. There seems to be none at all.
But you can go on clicking. That works. So I feel that I am getting pretty close ...
but not close enough to have the right flip.
So I hope you still can help me.
Thnx,
jef
Replied 12 years ago
12 years ago Jef Gees replied:
Is there somebody who can help me?
I also tried several combinations, but none of them did the job (flip extension with image on the front and text on the back).
Would be a miracle if this could happen.
grtz,
jef
Replied 12 years ago
12 years ago Jef Gees replied:
So,...
Nobody can help me,,
pitty.
Thnx anyway for reading this post.
grtz,
jef
Replied 12 years ago
12 years ago Jef Gees replied:
but inside I still hope there is somebody out there who can give the golden tip!!
So I am still waiting ...
Hope not for too long ...
grtz,

jef
Replied 11 years ago
11 years ago Jef Gees replied:
Help!! Still nobody who can help me????
Replied 10 years ago
10 years ago David Biskup replied:
I don't know if support for this plug-in has stopped, but I can't seem to get anything other than image files to work with Flip. I've gone through all the steps and I do see my div id show up in the Flip UI. Everything seems to be working fine but when i preview the document the back side is just a question mark. It can't seem to find something that's right there on the page next to it.

Perhaps there have been browser updates that are conflicting with Flip?

Any help would be cool.
D

Reply to this topic