FreewayTalk

31 replies to this thread. Most Recent

billy kimmel

7 Aug 2014, 6:39 pm

[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/

DeltaDave

7 Aug 2014, 8:18 pm

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

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

7 Aug 2014, 8:29 pm

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

DeltaDave

7 Aug 2014, 8:39 pm

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 </body> 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

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

7 Aug 2014, 10:40 pm

I have the library source in the </head> 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

max

7 Aug 2014, 10:52 pm

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 </head> (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 </body> 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

it’s better to be lucky than clever.. :o)

billy kimmel

7 Aug 2014, 10:59 pm

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

DeltaDave

8 Aug 2014, 12:16 am

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

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

8 Aug 2014, 1:15 am

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

max

8 Aug 2014, 6:38 am

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

it’s better to be lucky than clever.. :o)

billy kimmel

8 Aug 2014, 1:52 pm

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

billy kimmel

8 Aug 2014, 2:22 pm

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

Billy

DeltaDave

8 Aug 2014, 5:24 pm

I think that you have a conflict with lightbox.js

David

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

8 Aug 2014, 5:39 pm

Ah. I’ll look at that.

Thanks.

Billy

billy kimmel

8 Aug 2014, 9:46 pm

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

DeltaDave

9 Aug 2014, 12:07 am

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

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

max

9 Aug 2014, 11:41 am

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

it’s better to be lucky than clever.. :o)

DeltaDave

9 Aug 2014, 1:07 pm

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

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

9 Aug 2014, 8:24 pm

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

DeltaDave

10 Aug 2014, 12:37 am

OK - here is my version using Tooltips instead

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

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

11 Aug 2014, 12:15 am

Dave that would be a nice alternate. Can you show mw how you did it or send me an example that I could scan through.

Much appreciated.

Billy

DeltaDave

11 Aug 2014, 12:39 am

The link is in one of my posts from the 9th

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

14 Aug 2014, 4:46 pm

Hey Dave, Will Tool Tip use the alt text in a Web Yep image element for it’s content?

Billy

billy kimmel

14 Aug 2014, 5:34 pm

Struggling here Tool Tip. when I am adding the image tags does this look correct? See below Also not sure what the class is. Is it “tool” or “TipEx” ?

var uniTipTag = “a,img1,img2,ing3”; //Which tag do you want to uniTip-ize? Keep it lowercase. No spaces around commas.// var uniTipClass = “tool”;

billy kimmel

14 Aug 2014, 9:36 pm

Hey Dave, Finally figured out the reason the tool tip was not working was because the folder permissions were incorrect. Needed to be 755. Could you tell me where do you set the max-width/Height of the tip itself. Also can I state leading/line-height?

The background images are not showing either. My site Url is smartytest.com/Greek/ Here is what I’m seeing in the Css file for the path /images/TipPoint.png.

Billy

DeltaDave

15 Aug 2014, 12:05 am

My site Url is smartytest.com/Greek/

What page should I be looking at?

Also can I state leading/line-height?

Yes, line-height

    #unitip {
    position: absolute;
    z-index: 1000;
    top: -1000px;
    color: #8CCDFF !important;
    font: normal normal 1em/12px Verdana, Arial, Helvetica, sans-serif;
    line-height: 19px !important;
    display: none;
}

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

15 Aug 2014, 12:10 am

smartytest.com/Greek/workpage.php

I got the line height, I just can’t get the the text width to be a little longer maybe 100px

The major thing is the background images are not showing up.

Billy

DeltaDave

15 Aug 2014, 12:17 am

smartytest.com/Greek/workpage.php

I am only seeing Capty on that page

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

15 Aug 2014, 12:18 am

So Sorry it’s smartytest.com/Greek/workpage2.php

DeltaDave

15 Aug 2014, 12:42 am

You appear to have 2 references to the css file

    <link href="http://www.smartytest.com/Greek/unitip/css/unitip.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="http://www.smartytest.com/Greek/unitip/css/unitip.css" />

Just use the second one

Then in the unitip.css file change the relative path from

url(/images/TipPoint.png) no-repeat; 

to

url(http://www.smartytest.com/Greek/unitip/images/TipPoint.png) no-repeat; 

In each of the 3 instances

You are also trying to load unitip.js twice

    <script type="text/javascript" src="unitip.js"></script>

    <link href="http://www.smartytest.com/Greek/unitip/css/unitip.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="http://www.smartytest.com/Greek/unitip/css/unitip.css" />
    <script type="text/javascript" src="http://www.smartytest.com/Greek/unitip/js/unitip.js"></script>

Take out the first one.

And also you are loading jQuery after you load unitip.js

    <script type="text/javascript" src="http://www.smartytest.com/Greek/unitip/js/unitip.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

jQuery should come first. ie

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.smartytest.com/Greek/unitip/js/unitip.js"></script>

Sort that lot then we will look again.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

billy kimmel

15 Aug 2014, 12:59 am

Ok so I got the images now but I did something to cause the the css to show on the page.

The Read me doc in the download is slightly different than the tutorial webpage, I’ have go myself very confused.

Billy

Back to Top

billy kimmel

15 Aug 2014, 1:07 am

Ok, I got it fixed. I think it is right. Also how do I edit the tip width?

Billy