Universal CSS Transforms: Flip Support Product Page

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

Asked 21 May 2013 20:11:03
2
have this question
21 May 2013 20:11:03 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 22 May 2013 11:17:43
22 May 2013 11:17:43 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 22 May 2013 20:41:52
22 May 2013 20:41:52 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 23 May 2013 06:16:38
23 May 2013 06:16:38 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 23 May 2013 12:23:28
23 May 2013 12:23:28 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 24 May 2013 12:49:51
24 May 2013 12:49:51 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 26 May 2013 11:00:28
26 May 2013 11:00:28 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 29 May 2013 18:17:01
29 May 2013 18:17:01 Jef Gees replied:
So,...
Nobody can help me,,
pitty.
Thnx anyway for reading this post.
grtz,
jef
Replied 31 May 2013 19:31:12
31 May 2013 19:31:12 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 08 Jun 2013 22:27:12
08 Jun 2013 22:27:12 Jef Gees replied:
Help!! Still nobody who can help me????
Replied 20 Aug 2014 16:12:06
20 Aug 2014 16:12:06 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