[Pro] Web Yep & jquery hover text

Has anyone ever used this jquery code with Web Yep Images?
It places a hover text over the image via alt. text.
I just need some help setting it up, where to put specific folders, classes etc.

Much appreciated.

Billy

http://www.wbotelhos.com/capty/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Has anyone ever used this jquery code with Web Yep Images

Are you using jQuery already in these pages - or any of the native FW actions.

Not sure you want to be led down the jQuery route if its going to conflict with other stuff.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m not using and query right now. I am using a few actions but not sure they are native to Freeway. I believe second party.
Flex Image action, Box Sizing action and Web Yep actions.

Because the site is responsive I need a solution for hover captions. I tried to use the “Sliding Captions” from freeway style but that only works for layers items.

I just need instructions. I’m pretty good at adding outside source code but the jquery solution doesn’t have instructions.
Since I’m using Web Yep I guessing I need to put one of these files into the Web Yep folder. From what I gather it used the alt-text tag.

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

For most scripts/plug-ins you will first need to load jQuery into the head of the page, followed by the plug-in js

And probably before the script that instantiates it (never sure if that is the right word)

View source on the example page and it should become clear.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have the library source in the of my page.
I’m not sure where to put the folder that contains the js.jquery stuff. I’m using Web Yep Image elements, so I would think maybe they need to go into the opt folder of that program?

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

ok this is a quick tutorial how to do it and yep I will include a link to download

  1. insert a inline div and then apply the webyep image to the inline div

  2. click on the extended button within the webyep image action palette and write this:

     class="default" 
    
  3. add a webyep lock and the webyep page init code

  4. add the link to the jquery.capty.css before (I used the script maker and linker action but if you want you can ad it by hand within HTML/markup)

     <link rel=stylesheet href="css/jquery.capty.css">
    
  5. ad the link to the jQuery library and I used the google hosted library:

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
  6. add the reference to the jQuery plugin script:

     <script src="js/jquery.capty.min.js"></script>
    
  7. add this to after via HTML Markup

     <script type="text/javascript">
     $(function() {
    
     	$('.default').capty();
    
     	$('#animation').capty({
     		animation: 'fade',
     		speed:		400
     	});
    
     	$('#fixed').capty({
     		animation:	'fixed'
     	});
    
     	$('#content').capty({
     		height:		46,
     		opacity:	.6
     	});
    
     	$('.fix').capty({
     		cWrapper:	'capty-tile',
     		prefix:		'<span style="color: #35BB87;">Luigui</span> - ',
     		sufix:		'Super Mario Bros.&reg;'
     	});
    
     });
     </script>
    
  8. I changed the $(’#default’).capty(); to $(’.default’).capty(); because I may want to use it in a loop and you can’t have multiple duplicate id’s on the same page

  9. Publish

  10. then in browser populate the wyimage and add text within the alt tag and you should then see that text as a reveal when you roll your mouse over the image.
    This doesn’t effect Lightbox functionality either

click here to download the example:
https://dl.dropboxusercontent.com/u/45386433/inline-image.freeway.zip


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok,
Let me give this a try. Where do I place the folder with the scripts. Web Yep opt folder? Root of my site?

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Where do I place the folder with the scripts.

It doesn’t matter as long as you have the paths correct ie

<script src="pathto/mycaptyfolder/js/jquery.capty.min.js"></script>

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok Max,
Got all of this to work except my image needs to be flexible. The class=flexImage doesn’t work now. Can I put the flexImage class in the css?

Also I discovered that the reason I was having trouble getting this to work earlier was that I had inserted the Web Yep image element into the div. I didn’t realize that you could apply that action to an html div. How did I not know this.

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

hi billy it’s difficult to see how you are using the class=“flexImage”. I am assuming it goes on the actual img tag and not on a div around the image… but I am guessing here as I am flying blindfolded :o)
So if it is supposed to be on the img tag then you can add it in the webyep extended popup so it would be aded like this

    class="default flexImage" 

As i said I have no idea how that class is being used? so I have no idea what it will do but that is how a class could be added.

ps converting a normal freeway item has been around since I think version 2 of the actions. They are very useful because freeway does sometimes create a different html structure around inserted items compared to its own html elements.

speak soon max


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes I have those two classes stated in the Web Yep img tag just as you have it. What is happening is there seems to be some conflict when both are applied. That may mean the javascript may not be playing nice with web yep. If I apply one or the other then the desired effect is achieved, but both, no go.

Any ideas?

You can see the page here: http://smartytest.com/Greek/workpage.php
If you don’t see anything, click on the lock,
User: test
Pass: test

The images will show then. You’ll see the conflict.

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I found this online.
http://responsiveimg.com/#howto
Do you think this might work?

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think that you have a conflict with lightbox.js

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ah. I’ll look at that.

Thanks.

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So I removed lightbox for my Web Yep folder and nothing changed. The flexImage still caused a conflict.
Does Freeway add some lightbox js that I might not be aware of?

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So if it is supposed to be on the img tag then you can add it in the webyep extended popup so it would be aded like this

class="default flexImage" 

As i said I have no idea how that class is being used? so I have no idea what it will do but that is how a class could be added.

Not seeing flexImage as a class on the image itself - just on the containing Div

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi billy
I am trying to get it clear in my head what you are trying to do just so I can advise… so if I am wrong then let me know.
What I think you are trying to have is a flexible layout with fluid and reactive webyep images is that correct?

if it is then the scaling images could be done via specifying percentages in freeway and with a bit of extra responsive styles… but the hover reveal is going to be the bigger problem, because that plugin has not been made to be responsive. You would need to adjust the css to make that work.
I have tinkered with the css but there is quite a lot to think about for example if the image scales down 50% what happens to the text… does it need to change size. It will probably need to wrap. the box behind it would need to react to the new multi lines text etc.
An off the shelf system that just plugs in and works to exactly your specification may not be available. It may need real bespoke development.

kind regards max


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

but the hover reveal is going to be the bigger problem, because that plugin has not been made to be responsive.

Excellent point Max - because he doesnt have the responsive images thrashed out he hasn’t seen the potential car crash of the hover/reveal.

Might be easier doing something like http://www.deltadesign.co/fw_examples/jQuery/jquery-tooltip.html

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I would be grateful for any help on this at all. I like to think I can figure some of these things out. I’ve learned so much from you guys in the Forum but I guess once a designer, always a designer. But I do love learning new things. That is a great point about the text, but I think I could live with the stacking.

I actually think my client would be happy with the way I have it now without the flexible images but the issue in my design is that I pick an uneven number of images per/line so it looks crappy on the iPad.

View here: http://smartytest.com/Greek/ourwork.php

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK - here is my version using Tooltips instead

http://www.deltadesign.co/BK/ourwork.php

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options