I am developing an ecommerce site with WooCommerce and I'm trying to add multiple product views that when clicked or on hover, replace the main image. The stock code opens the thumbnails attached to the post in fancy box, which I don't prefer. I have looked all over and found only a couple of plugins that come close but are still far away from my desired effect.
What I am looking for, ideally, is a plugin or code I can add to my functions that when you rollover a thumbnail it replaces the main image with the new one. If that isn't possible, I need it to at least replace it when clicked.
Any help is extraordinarily appreciated.
I found this http://www.magictoolbox.com/magiczoomplus/ and it handles what I needed. I just set the zoom to inner so it doesn't open a zoom window and it has thumbnail hover that replaces the main image. Maybe this could help someone with a similar issue.
Honestly I don't see why you need a plugin to do this at all, regular javascript/jQuery will work just fine.
$( ".smallImage" ).hover(function() {
var smallSrc = $(this).attr("src");
$( "#bigImage" ).attr("src", src );
}, function() {
// Code here for mouse out
}
);
Related
I am working in Wordpress, and I am using Elementor. Elementor has a native feature for the title of the posts and images to link to the post.
But if I add an excerpt text, it doesn't link to the post. It is not clickable. The read more button does, but not the excerpt of the post.
I am trying to create something like this: greatist.com Every post on their website is clickable - the excerpt, the title, and the image.
My excerpts are really short like on that website, and I would really like them to be clickable. I have absolutely no idea how to do this and I'm beginning to think it's not possible. I am using Hello Elementor theme.
I would deeply appreciate anyone's help. I just registered to ask this question.
You can always try to save text as an photo and make it clickable or make a full section clickable.To do this try to use plugin called "Make Column Clickable Elementor".
Add this code to your website:
const postExcerpts = document.querySelectorAll('.elementor-posts .elementor-post .elementor-post__excerpt');
postExcerpts.forEach(postExcerpt => {
const postUrl = postExcerpt.parentNode.querySelector('.elementor-post__title a').href;
postExcerpt.addEventListener('click', () => {
window.location.href = postUrl;
});
});
This can be added using a script tag. Choose from the following options:
Add this code as a script tag in your functions.php file, to be rendered at the end of the page (wp_footer action hook).
If you have Elementor Pro, use its built-in Custom Code feature to add the code in a script tag to the end of the body tag.
It's recommended to add a pointer cursor so the user will know the excerpt is a link. This can be achieved by adding the following CSS to your style.css file.
.elementor-posts .elementor-post .elementor-post__excerpt {
cursor: pointer;
}
I am developing a site for a client using Wordpress and Woocommerce and have an issue where I can not click on any of the anchors on the search results page.
The search results page is here: http://79.170.44.83/newcityused.com/?s=chair
I can see nothing in the CSS that would make this happen.
I have deactivated all of the plugins with no joy.
I'm lost.
Has anyone else experienced this or know of a solution?
You have a class .search inside your 'body' tag and then you have a js that is something like this:
jQuery(function(){
jQuery('.search').on('click', function(e) {
jQuery('.search-form').toggleClass("expand");
e.preventDefault();
});
})
I think that you are preventing the default clicks in here... so remove the e.preventDefault it made work, let me know...
As soon as you create a menu item for a page there is a link that it automatically populated with it. How do i stop wordpress from making these links? I'm capable of making them myself and don't always want them to link to thier specific page.
I figured it out using and dropping it in my header.php
<script type="text/javascript">
jQuery(function($) {
$("li.menu-item-627,li.menu-item-14,li.menu-item-20,li.menu-item-28").children("a").attr('href', "javascript:void(0)");
});
</script>
You have to use firebug or chrome "inspect element" to find out what your menu items are and then just replace the numbers in the code accordingly.
also if you don't want them to show up at all add the following code
<script type="text/javascript">jQuery(function($) { $("li.menu-item-627").contents().hide();});</script>
those two together will hide the disabled menu link
you can then add your own links in the "navigation label" of the page menu field!
good luck and let me know if you have any questions, i will do my best to help!
Quick question about WordPress. I've been Googling all over the place and cannot find an answer.
Basically I'm looking to replicate what happens when you add a gallery: have an image displayed as a stand in for the gallery shortcode [gallery]. The shortcode's visible when you go to edit HTML.
I'd like to exactly copy this effect: When a shortcode inserted into the editor I'd like for to to be rendered as an image.
Things I've Tried:
Inserting an element (image, div, I found an input is pretty unfuckwithable, etc) that's wrapped by a shortcode (This works ok, not great. The short code's still visible and WP will auto add paragraphs to the element to create space that users could, possibly, add content that'll be eaten by the short code) -
Inerting the short code as a < !-- --> comment (This also doesn't work great, WP will occassionally eat it moving between Visual/HTML. The comments ALSO eat your content < !-- [shortcode]--> placeholder < !--[/shortcode] --> = < !-- rendered shortcode -->)
That's the extent that I've thought of things. I cannot find a guide on how to do mimic the [gallery]'s behavior and can't find it by going through wp-admin's guts.
Thanks!
Alright, found the answer thanks to Dan's hint. Here's how to do it:
First (as Dan suggested) take a look at how they add the Gallery plugin to Tiny MCE. There's actually an uncompressed js file that will give you the overview you need, find it in:
/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin.dev.js
This goes over the basics on adding this type of plugin to TinyMCE (more info here). To get WP to load the .js file with your TinyMCE plugin, see this helpful guide.
Basically here's the code:
if ( get_user_option('rich_editing') == 'true') {
add_filter("mce_external_plugins", "add_jolokia_tinymce_plugin");
//Applying the filter if you're using the rich text editor
}
function add_jolokia_tinymce_plugin($plugin_array) {
$plugin_array['example'] = '/path/to/example.js';
return $plugin_array;
}
Add this to a plugin or function.php in a theme And you're good!
I have created a wordpress theme and I made it so the background image can easily be changed. The only problem is that currently I have to make the change manually (ie FTP) and Id like to provide my client with a Template options page with an "Upload new background image" option in it.
Im pretty sure this is possible, I just dont know where to start.
Could someone point me out in the right direction?
This will do it for you. Just add the following to your theme's functions.php file:
add_action( 'after_setup_theme', 'add_custom_background' );
This only works in WordPress 3.0 as of now. Of course, you should be running the latest version anyway. It will add a custom background menu in the admin area (under 'Appearance') and will add the styles to the body tag. Also handles uploading, centering/tiling (x, y, or both) images/background colors. Very simple and great functionality.