link from word in text object

Issues related to hyperlinks and web site navigation.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Post Reply
User avatar
rogerl
 
 
Posts: 181
Joined: Tue May 03, 2016 8:24 am

link from word in text object

Post by rogerl » Thu Dec 21, 2017 6:03 am

I wish to insert a link from a single word in a text object.
It has to appear in the generated html as:

Code: Select all

<a data-fancybox href="https://youtube.com/embed/ei40FDkfE50?rel=0&fs=1&autoplay=1"></a>
I have tried several combinations but haven't hit on the right one yet.
I can easily do it in an image but when I test on desk top and mobile the image will not lock in position depending which browser you use so it just looks untidy.
I would prefer to have the link from the text if possible.

User avatar
Pablo
 
Posts: 13997
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: link from word in text object

Post by Pablo » Thu Dec 21, 2017 7:09 am

See this related tutorial (Link text):
http://wysiwygwebbuilder.com/links.html

Note that you can set the target of the link to a (fancybox) lightbox.

User avatar
rogerl
 
 
Posts: 181
Joined: Tue May 03, 2016 8:24 am

Re: link from word in text object

Post by rogerl » Thu Dec 21, 2017 9:19 am

For this particular application I'm using Fancybox3. The problem is to separate the data-fancybox from the href code so it reads as per my code .With an image you have before and after tags so easy to set up the html.Not so simple with text links.

User avatar
Pablo
 
Posts: 13997
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: link from word in text object

Post by Pablo » Thu Dec 21, 2017 10:11 am

In a text link you can also add custom HTML code.

User avatar
rogerl
 
 
Posts: 181
Joined: Tue May 03, 2016 8:24 am

Re: link from word in text object

Post by rogerl » Thu Dec 21, 2017 11:49 am

Customising html does not work either as WB will include more than 1 href or add quotation marks where not needed. It's just not as flexible as html properties on other objects. Went back to adding a button and inserting html in that instead. Unless someone can tell me otherwise I'll leave at that.

robertz
 
 
Posts: 13
Joined: Sun Jun 26, 2005 9:35 pm
Location: Florida, USA

Re: link from word in text object

Post by robertz » Fri Dec 22, 2017 7:32 pm

@rogerl

Have you tried a simple HTML BOX / Object?
Put your existing text line or paragraph in... as example below:

Code: Select all

<span style="color:#000000;font-family:Arial;font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a data-fancybox href="https://youtube.com/embed/ei40FDkfE50?rel=0&fs=1&autoplay=1">YOURLINK</a> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
Modify styling and substitute your text [line or paragraph] for lorem ipsum text!

User avatar
rogerl
 
 
Posts: 181
Joined: Tue May 03, 2016 8:24 am

Re: link from word in text object

Post by rogerl » Fri Dec 22, 2017 11:47 pm

Hey, thanks for that. I found a far more convoluted way around the problem because I had a single focus on making the system work. Often the simplest ways are the best. Good to have a second pair of eyes and thought that's why I like these forums and sharing of ideas.
Regards
Roger

User avatar
rogerl
 
 
Posts: 181
Joined: Tue May 03, 2016 8:24 am

Re: link from word in text object

Post by rogerl » Sun Dec 24, 2017 12:19 am

Just heard back from the Fancybox creator - the cure was to put data-fancybox="" in the html tab!

presto
 
 
Posts: 224
Joined: Tue Aug 24, 2010 5:19 pm

Re: link from word in text object

Post by presto » Wed Jan 31, 2018 4:35 pm

Hi rogerl,
could you give me some advice how to manage integration of fancybox 3 into wwb 12
Thanks for your efforts
Presto

User avatar
rogerl
 
 
Posts: 181
Joined: Tue May 03, 2016 8:24 am

Re: link from word in text object

Post by rogerl » Thu Feb 01, 2018 2:58 am

Fancybox 3 is a work in progress for me. Every time I get back to figuring out what to do I find something has changed or a new version is out. I have a specific way of using it which is not the standard gallery operation - an example here:
https://www.whiteshepherdsnz.com/NewSit ... llery.html
Fancybox2 integrates directly into WB using slideshow. You just need to create a new folder in
[url]C:\Program Files\WYSIWYG Web Builder 12\lightbox[/url]
called "fancybox2" and copy the fancybox2 files into it. My fancybox2 folder looks like this
Image
Then when you select "Lightbox" as your slideshow option you can now select "fancybox2".
My Fancybox2 version of the same page is here:
https://www.whiteshepherdsnz.com/mwsGallery.html
Fancybox 3 was completely re-written and uses different methodology. Does not integrate directly.
There are many ways of using it and now its been up & running for a while the documentation has improved. Much of the coding (jquery / js) is beyond me.I spent many hours in chat asking Janis for examples or straight out direct help to achieve what I was looking for. Also starting to see far more examples when searching through Google now. One benefit of using Fancybox3 is this version only requires 2 files plus your images to run. Janis is talking about moving to Fancybox4 as a stand-alone package not requiring outside files such as jquery, apart from images.
In the above example V3:
jquery is added by WB. Use the latest version as in page properties, misc.
I have an html object containing all my galleries

Code: Select all

<div id="fancyDiv" class='hidden'>
              <a data-fancybox="gallery" href="mwsGalleryImages/Litter11.jpg" data-caption="Delilah / Claude Litter May 2012"></a>
                <a data-fancybox="gallery" href="mwsGalleryImages/Litter12.jpg" data-caption="Delilah / Claude Litter May 2012"></a>
                <a data-fancybox="gallery" href="mwsGalleryImages/Litter13.jpg" data-caption="Delilah / Claude Litter May 2012"></a>
                
                <a data-fancybox="gallery1" href="mwsGalleryImages/Litter225.jpg" data-caption=""></a>
                <a data-fancybox="gallery1" href="mwsGalleryImages/Litter226.jpg" data-caption=""></a>
                <a data-fancybox="gallery1" href="mwsGalleryImages/Litter227.jpg" data-caption=""></a>
               
                </div>
I have the 'File Publisher" object containing
2 sub-folders , 1 with all the image files and another "fancybox3" containing jquery.fancybox.min.css & jquery.fancybox.min.js
I have a few extras as well as I asked to use the old close button of cross in circle.
In page html - inside head

Code: Select all

<link href="fancybox3/jquery.fancybox.min.css" rel="stylesheet">
<style type="text/css">

.hidden {
	display: none;
	}
</style>
<style type="text/css">
.fancy-count {
  margin-right: 20px;
}
.fancybox-caption {
   font: italic bold 20px Times New Roman !important;
}
.fancybox-bg {
   background: rgba(80, 163, 130, 0.9) !important;
}
.fancybox-content,
.fancybox-image-wrap {
  background: #000 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9) !important;
  overflow: visible !important;
}

.fancybox-slide--video .fancybox-content {
  width  : 853px !important;
  height : 480px !important;
  max-width : 80% !important;
  max-height : 80% !important;
}

.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: url(fancybox3/fancybox_sprite.png);
}

</style>

<script>
$(document).ready(function()
{
$(".fancybox-trigger").click(function() {   
    $("a[data-fancybox='" + $(this).data('trigger-rel') + "']").eq(0).trigger('click');    
    return false;    
});

$('[data-fancybox]').fancybox({
  buttons   : false,
  smallBtn  : false,
  idleTime: false,
  slideShow : { autoStart : true },
  caption : function( instance, item ) {
    var caption = $(this).data('caption') || '';
    return '<span class="fancy-count">(Image <span data-fancybox-index></span> of <span data-fancybox-count></span>)</span>' + ( caption.length ? ' ' + caption : '' );
  },
  afterLoad : function( instance, slide, firstRun ) {
    slide.$closeBtn = $('<a class="fancybox-close" data-fancybox-close></a>').appendTo( slide.$content );

    if ( firstRun ) {
      slide.$closeBtn.hide();
    }
  },
  afterShow : function( instance, slide ) {
    slide.$closeBtn.show();
  },
  beforeClose : function( instance, slide ) {
    slide.$closeBtn.remove();
  }
   

});

 });
</script>
In before body tag

Code: Select all

<script src="fancybox3/jquery.fancybox.min.js"></script>
The play buttons have object html
before tag

Code: Select all

<a data-trigger-rel="gallery" class="fancybox-trigger" href='#fancyDiv'>
after tag

Code: Select all

</a>
I chose not to use the standard gallery setup so the images for each gallery is just a small version of one of the images in the Gallery inserted on to the page in the normal way.
It's a bit long winded explanation but that's how I adapted it.
Hope this was of some help.

User avatar
rogerl
 
 
Posts: 181
Joined: Tue May 03, 2016 8:24 am

Re: link from word in text object

Post by rogerl » Sat Feb 03, 2018 11:17 am

I have fixed the remaining errors in my fancybox3 version now so the example given works for desktop and mobile.

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests