Using popup with read more
-
Hello,
It is possible to integrate the popup code with the read more… so when the user click on the featured image thumbnail or read more button the post is opened in the popup window ?
Thank you.
-
This is probably not possible directly with this plugin, but should be possible with a modified version.
Make a custom plugin that enqueues a javascript file with the following content and with jQuery as a dependancy:
jQuery(document).ready(function($) { $('.more-link').click(function() { var w = '300'; var h = '400'; var s = 'yes'; var left = (screen.width/2) - (w/2); var top = (screen.height/2) - (h/2); var NWin = window.open($(this).prop('href'),'','scrollbars=' + s + ',resizable=yes,width=' + w + ',height=' + h + ',top=' + top + ',left=' + left); if (window.focus) { NWin.focus(); } return false; }); });You may prefer to modify the values for the ‘w’, ‘h’ & ‘s’ variables for width, height and scrollbars.
Thank you for your quick response.
I’m not sure what you mean with “make a custom plugin” and where i must to put the code.
Create a new folder in your wp-content/plugins folder called:
alligator-morelink-popupInside that create two text files.
One called:alligator-morelink-popup.php& one called:
morelink-popup.jsCopy & paste the following into ‘alligator-morelink-popup.php’
<?php /* Plugin Name: Alligator More Link Popup Description: Shortcode to open Links with the class 'more-link' in a popup window. Forked from Alligator Popup Author: cubecolour Version: 0.1.0 Donate: http://cubecolour.co.uk/wp License: GPL (c) 2015 Michael Atkins */ // Prevent Direct Access of this file // ============================================== if ( ! defined( 'ABSPATH' ) ) exit; // ============================================== // Register and Enqueue popup script // ============================================== function cc_morelink_popup_script() { wp_register_script( 'morelink-popup', plugins_url( 'morelink-popup.js' , __FILE__ ), array( 'jquery' ), '0.1.0', true ); wp_enqueue_script( 'morelink-popup' ); } add_action('wp_enqueue_scripts', 'cc_morelink_popup_script');Copy & paste the following into ‘morelink-popup.js’
jQuery(document).ready(function($) { $('.more-link').click(function() { var w = '300'; var h = '400'; var s = 'yes'; var left = (screen.width/2) - (w/2); var top = (screen.height/2) - (h/2); var NWin = window.open($(this).prop('href'),'','scrollbars=' + s + ',resizable=yes,width=' + w + ',height=' + h + ',top=' + top + ',left=' + left); if (window.focus) { NWin.focus(); } return false; }); });Change the values of ‘w’, ‘h’ & ‘s’ if required and change the class ‘.more-link’ near the top of the script as appropriate if your theme outputs the more-links with a different class.
Then activate the plugin.
Wow, thank you for quick help.
Unfortunately i don’t have anywhere the more button so i tried another things.
I tried using something like ‘.attachment-tumb’ and ‘.wp-post-image’ instead of ‘.more-link’ class but i have only a blank popup.
This because the posts is displayed only with the thumb image and the post title.So i must to search some other class like post title and/or post image which point to the post link…
please post a link to your site so I can take a look & possibly suggest what can be tweaked.
The website is in maintenance mode so i must to give you some user credentials to view the website.
But i figured out and find a class with which i can to popup both post thumbnail and post title.
It’s available in a given situation, for a particular display mode. But is exactly what i needed.
Thank you for your precious help and for your time that you have given with such gentleness.It sounds like you have it all sorted now, so I won’t need to see the site.
For anyone who may be looking for something similar to use with their own theme, once you have identified the class of the anchor tag you want the popup to apply to, the following line in the morelink-popup.js can be edited to include in place of the default ‘.more-link’:
$('.more-link').click(function() {if this needs to be applied to more than one class (ie when different classes are applied to heading links, image links, and ‘read more’ links), multiple selectors can be used like this:
$('.some-class, .another-class').click(function() {
The topic ‘Using popup with read more’ is closed to new replies.