Link Whole Section To Another Page

Hi Guys ,

I’m aiming to link the whole section to another page.

Currently the feature boxes we have used for each part of the home page provide the look we are after, however the small amount of text in each section in this situation is insufficient to alert the viewer that it is a link.
We have included the ‘links to’ information in the hover, however unless one is really looking for it they wouldn’t know it was a link.

As such we would like to enhance the clickable area to encompass the entire section, and if possible make the text change to another colour on hover to alert the viewer to click.

So far the closest I have found in the forum is this
https://theme.co/apex/forum/t/add-a-link-to-feature-boxes/273?

However I am not that great with jQ. and do not understand what that means. Could you please help me out with what I would need to do to achieve this.

Hi There,

Please add an ID to the section, for example ID: section-link and on Cornerstone JS add

 jQuery("#section-link").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); 

Hope it helps

Hi Joao,

It helped me understand a little , however I could not get it to work.
I have tried placing the jQ in the home page JS and in the global JS ( not at the same time )

Could you please take a look and tell me what I’m doing wrong

Hi there,

I went to the page you mentioned in the Secure Note and added this code to the JS section of the Cornerstone:

jQuery('.x-feature-box-text').each(function() {
  var theHref = jQuery(this).find('a').attr('href');
  var theItem = jQuery(this).closest('.x-container');
  theItem.on('click', function() {window.location.href = theHref;});
  theItem.css('cursor', 'pointer');
});

Now the whole section has the link. Thank you

Excellent , thank you Christopher !

The only problem we are having with this now is that when we click on the section, and it arrives on the correct slider, it will not show content ! what can we do about that ?
*What may help is when each section is clicked for the link through , the page bounces through the first tab ‘stainless’ first (which looks a bit clunky anyway ) no matter what section is pressed.

Hi there,

Unfortunately, the way you added galleries and the tabs in the gallery page os not suitable for linking from outside of the page. This is not related to the code we gave you regarding the anchor area. If you add the link you have directly on a browser window again it will not initialize.

I suggest that you change your design and have the galleries on their respective pages. You can keep the current page which will be accessed via the gallery menu link. But for the links from the listing page, it is better to create separate pages and add only that specific gallery. For example Stainless.

Thank you.

Hi guys ,

Thank you for taking a look Christopher !

I know what you said makes sense, I’m just trying to get it to make sense in my head !
Apologies if this s frustrating to explain, but I am a little lost in what you said here.

I thought it would be ok seeing as the feature boxes linked through to the individual tabs no problem.
Why is it different with the whole section link ?

It would be great if we could find a way around this to make it work - as the owner doesn’t want to change the site that much now it’s up and we’ve already had so many ongoing problems.

Please let me know if there is any way to make this function, or even if there is a suitable compromise where we could retain the gallery structure, perhaps linking the image boxes instead of text even

Thanks guys.

Hi There it is not very clear what is the issue.

Please clarify

Thank you

Hi Joao,

Basically when the links from the feature boxes were used to link to VC tabs on the gallery page, they would link through to each tab respectively no problem and the galley would display fine.
Since we have changed the link from utilising only the text in the feature boxes, to the link being possible from the whole section, when it links through , the images in the gallery will not display.

We are unsure of how it can link through and display ok from the text in the feature boxes,
but will not display images in the gallery section when the whole section is the link.

Please note the links are working ! only the images are not displaying once arriving at the gallery page > matching Tab when using hte whole section as the link.

for example
home page feature box ‘custom’ text links to > gallery page > VC tab ‘custom’ works and displays fine.
home page section ‘Custom’ section links to > Galley page > VC tab ‘Custom’ works fine however will not display the gallery images in that tab on link through.

As it worked prior, we are trying to understand why it will not display now. As the links are the same, with the only difference being that instead of using the text as the link, we are using the section as the link. Maybe this is something I do not understand about the structure ?

Christopher has tried to explain it however I am a bit unclear still as to why if the link can go from the feature box to the VC tab works and displays fine , and it will link from the section and it will work but will not display images & if we can fix this somehow ?

UPDATE: As we can obviously not keep the home page full of links that send to empty galleries , so for now we have changed all the section links to simply connect through to the ‘Gallery page’ until we can resolve this.

Hi There,

I am not sure how it works before. Although I can see JS error on your page because of your custom JS. See this:https://screencast-o-matic.com/watch/cbihoGl2Uq
Remove the dot(.) at the start on this line of code .jQuery( function($) {
Check again after.

Hi Lely,

I did follow instructions however continues to not display the images in the gallery.
I will continue to try to find resolve with ’ . ’ removed in a few more instances and update.

Hello There,

Thanks for updating in! When linking the feature boxes, please use the direct link of the gallery to make sure that it goes where you want it to display. For example links could be:
http://brookesengraving.com.au/home/gallery/#1496994016650-06f0c0f2-adb5, http://brookesengraving.com.au/home/gallery/#1497279984459-b76a398d-9035, http://brookesengraving.com.au/home/gallery/#1496994016650-3fe5fad6-cdc7, http://brookesengraving.com.au/home/gallery/#1496994047763-ea28c9b4-9196, http://brookesengraving.com.au/home/gallery/#1496994048017-ca7aef3b-80f7

To get this link, just hover the category and right click > Copy Link Address:

Please let us know how it goes.

Hi RueNel,

We did have them like this before, but as it was sending to galleries that weren’t displaying images - we had to change it to simply point to the gallery page so visitors weren’t experiencing an empty gallery.

We do plan to change this back to the links as you explained when we can find a resolve for the gallery images not displaying when these links are installed in feature boxes.

note : Currently - with those links (as instructed ) are inserted , they send fine to the gallery , but the images will not show up in each VC tab.

Hello There,

The slider needs to initialize. This is the reason why the images are not showing. Only the first slider in the first was able to initialize. The others did not and will only load once the tab is active. This is the beyond the limitations of the tab element and slider. What you have in mind may not be possible with the current setup.

Thank you for your understanding.

Hi RueNel,

Thankyou for you explanation.
I now understand we may be trying to do something that will not work with what we have in here currently.

I hope we can find a way to make this work at some point, I will keep trying to see what I can uncover to make this possible for future ! - and if I find anything out I will let you guys know.

I appreciate you looking through it for us ! :blush:

Hi @mellinco,

You’re always welcome, and as addition, if you can reinitiate the slider’s javascript on every tab click/open then that might re-render the slider too.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.