[JW & Co.Participant]

Hello,

Please do not direct me to any other posts, unless they will provide the solution I need. I have spent over an hour reading other posts.

I would like the promo images on oceandriveshopping.com to link to the same pages as the text below each. I would also like to change those links to black, then blue when hovered over. I have inserted custom CSS and Javascript, but I don’t know what I am missing… maybe the theme is blocking something? I tried an alternate method, and it was causing malfunctions with Cornerstone, so I quit.

Thanks,
Josh

[JW & Co.Participant]

PS.

This is the Javascript i was using, but it messes up my menu order when I have it in there:

jQuery( function( $ ) { $(‘.x-promo img’).on(‘click’, function(){ window.open($(this).parent().parent().find(‘.x-btn’).attr(‘href’)); }); } );

jQuery(‘.x-promo’).each(function(){

[ChristopherModerator]

Hi there,

Add a specific class like promo-1, promo-2 and promo-3 to each promo elements, then try this JS code :

jQuery(".promo-1").wrap("<a href='http://oceandriveshopping.com/index.php/category/jewelry-and-timepieces/'></a>");
jQuery(".promo-2").wrap("<a href='http://oceandriveshopping.com/index.php/category/seaside/'></a>")
jQuery(".promo-3").wrap("<a href='http://oceandriveshopping.com/index.php/category/salon-and-spa/'></a>");

And add this CSS as well :

.x-promo-content a {
    color: black;
}
.promo-1:hover a,.promo-2:hover a ,.promo-3:hover a  {
    color: blue !important;
}

Hope it helps.

[JW & Co.Participant]

This works perfectly EXCEPT that to get those classes to work, I had to remove the “center-text” CSS class I had in place. Advice on how to have both? You can see the promos on oceandriveshopping.com.

Josh

[RadModerator]

Hi Josh,

It should work with center-text class. How did you added it?

Should be like “center-text promo-1”, separate them with spaces, not comma or semi colon.

Thanks.

[JW & Co.Participant]

I was using semi-colons.

Thanks!
Josh

[RupokMember]

You are welcome Josh!

Cheers!

[pikestrikeParticipant]

Hello!

I did not manage to make those image links – please let me know exact where to put. I use Cornerstone.

jQuery(“.promo-1”).wrap(““);
jQuery(“.promo-2”).wrap(““)
jQuery(“.promo-3”).wrap(““);

and

.x-promo-content a {
color: black;
}
.promo-1:hover a,.promo-2:hover a ,.promo-3:hover a {
color: blue !important;
}

and let me know where to put those “center-text promo-1” I would like to have similar links than he has in here: http://oceandriveshopping.com/

Thanks!

[JadeModerator]

Hi there,

Please see the attached screenshot on where you can add the class for Promo elements.

As for the CSS code, you will have to add it in Appearance > Customize > Custom > CSS and the Javascript in the box below the Custom CSS.

[pikestrikeParticipant]

Thanks – that works! Let me also know where exact put the “center-text promo-1”. Could you also let me know how to get nice hover effect for picture too as in here: http://oceandriveshopping.com/

[pikestrikeParticipant]

Hello! Problem solved. I added this to css:

}

.x-promo {
cursor: pointer;
}

.x-promo img:hover {
opacity: 0.7;
cursor: pointer;
cursor: hand;
}

Cheers!

[Prasant RaiModerator]

You are most welcome 🙂 .

[ezeeyParticipant]

I’m using the images alt input for this with some custom Javascript.
Just in case anybody needs it. The code takes the value from the images alt attribute and removes the attribute after.

jQuery('.x-promo').each(function(){
    var $this = jQuery(this);
    var $url = $this.find('.x-promo-image-wrap img').attr('alt');
    if ( !($url === null || $url === undefined)) {
        $this.wrap('<a href="' + $url + '"></a>');
        $this.find('.x-promo-image-wrap img').removeAttr('alt');
    }
});

[DarshanaModerator]

@ezeey … Thank you for your contribution 🙂

[Author]

Posts