with wordpress i installed magnific popup, how can I view the popup directly, without the preview of the images? in the work I am doing I need that when I click on an image, the popup opens immediately! I have tried in a thousand ways but I cannot find the most suitable solution
I apologize for the delay, I have tried two methods, one is tied directly to the plugin so the code I have to make it work is the following:
(function ($) {
$('.gallery').each(function() {
$(this).magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled:true
}
});
});
}(jQuery));
it works but as previously said I would like you to be able to view the popup without the preview of the gallery!
the second option i used genesis custom block, the system works but can't find the images here is the code:
(function ($) {
$('a.btn-gallery').on('click', function(event) {
event.preventDefault();
var gallery = $(this).attr('href');
$(gallery).magnificPopup({
delegate: 'a',
type:'image',
gallery: {
enabled: true
}
}).magnificPopup('open');
});
}(jQuery));
.btn-gallery img{max-width: 100%;height: auto;padding: 30px;}
.hidden{overflow: hidden;display: none;visibility: hidden;}
<div class=" block-gallery <?php block_field('className'); ?>">
<div class="col-100 grid grid--center">
<div class="col-30">
<a href="#gallery-1" class="btn-gallery">
<?php $attachment_id = block_value( 'image-preview-1'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
</a>
</div>
</div>
<div id="gallery-1" class="hidden">
<a href="
<?php $attachment_id = block_value( 'image-1'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
<a href="
<?php $attachment_id = block_value( 'image-2'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
<a href="
<?php $attachment_id = block_value( 'image-3'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
<a href="
<?php $attachment_id = block_value( 'image-4'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
<a href="
<?php $attachment_id = block_value( 'image-5'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
<a href="
<?php $attachment_id = block_value( 'image-6'); ?>
<?php echo wp_get_attachment_image( $attachment_id, 'New_quad' );?>
"></a>
</div>
</div>
this is the function that calls the block on wordpress:
<?php
use function Genesis\CustomBlocks\add_block;
use function Genesis\CustomBlocks\add_field;
/* gallery */
function register_gallery_block() {
add_block( 'gallery', array( 'icon' => 'waves' ) );
add_field( 'gallery', 'image-preview-1', array(
'control' => 'image'
) );
//gallery-1
add_field( 'gallery', 'image-1', array(
'control' => 'image'
) );
add_field( 'gallery', 'image-2', array(
'control' => 'image'
) );
add_field( 'gallery', 'image-3', array(
'control' => 'image'
) );
add_field( 'gallery', 'image-4', array(
'control' => 'image'
) );
add_field( 'gallery', 'image-5', array(
'control' => 'image'
) );
add_field( 'gallery', 'image-6', array(
'control' => 'image'
) );
add_action( 'genesis_custom_blocks_add_blocks', 'register_gallery_block' );
Related
I use WordPress. Theme name Wp-tuts. My site: http://www.memuralimi.com.
I use the slider; Flexslider. When I click with the mouse, the images are changing.
I want that when the mouse comes over the thumbnail, the images change.
flexslider-home.js
jQuery(function($){
$(window).load(function() {
$('.featured-slider-preloader').hide();
$('#featured-slider').flexslider({
slideshow : true,
controlsContainer: "#featured-slider-wrap",
animation : 'fade',
pauseOnHover: true,
animationSpeed : 400,
smoothHeight : true,
directionNav: false,
prevText : '<span class="fa fa-angle-left"></span>',
nextText : '<span class="fa fa-angle-right"></span>',
controlNav : "thumbnails"
});
});
});
Content-featured-slider.php
<?php
$wpex_featured_cat = get_theme_mod( 'wpex_homepage_slider_cat' );
// Show homepage featured slider if theme panel category isn't blank
if( $wpex_featured_cat !== '' && $wpex_featured_cat !== '-1' ) {
// Get posts based on featured category
$wpex_query = new WP_Query( array(
'post_type' =>'post',
'posts_per_page' => get_theme_mod( 'wpex_homepage_slider_count', '6' ),
'no_found_rows' => true,
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'ID',
'terms' => $wpex_featured_cat
)
),
'meta_query' => array(
array(
'key' => '_thumbnail_id',
)
)
) );
if( $wpex_query->have_posts() ) {
// Get Scripts
wp_enqueue_script( 'flexslider', WPEX_JS_DIR_URI .'/flexslider.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'wpex-flexslider-home', WPEX_JS_DIR_URI .'/flexslider-home.js', array( 'flexslider' ), '', true); ?>
<div id="featured-slider-wrap" class="boxed clr">
<div id="featured-slider" class="flexslider-container">
<div class="flexslider">
<ul class="slides">
<?php
// Loop through each post
while( $wpex_query->have_posts() ) : $wpex_query->the_post(); ?>
<li class="featured-slider-slide" data-thumb="<?php echo aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ), 490, 340, true ); ?>">
<div class="featured-slider-img">
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>">
<img src="<?php echo aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ), '400', '225', true ); ?>" alt="<?php echo the_title(); ?>" />
</a>
</div><!-- .featured-slider-img -->
<div class="featured-slider-caption-excerpt clr">
</div><!-- .featured-slider-caption-excerpt -->
</article><!--.featured-slider-caption -->
</li><!-- .featured-slider-->
<?php endwhile; ?>
</ul><!--.slides -->
</div><!-- .flexslider -->
<span class="featured-slider-preloader"><i class="fa fa-spinner fa-spin"></i></span>
</div><!-- #featured-flexslider -->
</div><!-- #featured-slider-wrap -->
<?php } ?>
<?php wp_reset_postdata(); ?>
<?php } ?>
So on my wordpress blog and most other wordpress blogs, you can set a featured image. If you don't set a featured image I have it default to a background image that says "new update" however the default background image i have set is much less eye grabbing than the custom ones made for the post.
To solve the issue of posts with custom featured images getting more attention that those that have the default image - I would like to make it so all blog post titles with posts that do not have a featured image to change their color code.
For example something like..
My pseudo code: - I'm don't know jquery/javascript very well but I could probably figure out the basic javascript to make it work.
IF
('post > featured-image') = 'NONE';
THEN ('.post-list h1.entry-title a') = 'RED';
ELSE ('.post-list h1.entry-title a') = 'DEFAULT';
But that being said how would i even reference the POST not having a FEATURED IMAGE in wordpress via jquery or some function? I am open to any solutions!
Thanks so much for any help!
From the code you supplied your theme is already checking for the presence of a thumbnail on your posts using the wordpress function has_post_thumbnail. We can leverage this existing if:else statement to change a string value that we will apply to our h1 tags. You can find the string value under the variable $header_class_name.
First we default the value to "has-thumbnail" (Line 18)
Then we override the default to "no-thumbnail" in the event that the post has no thumbnail (Line 33)
Lastly, we apply the class to the h1 tag (Line 72)
PHP CODE
<?php
/**
* The template part for displaying content.
*
* #package azera-shop
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( apply_filters( 'azera_shop_content_post_class_filter','border-bottom-hover' ) ); ?> itemtype="http://schema.org/BlogPosting" itemtype="http://schema.org/BlogPosting">
<header class="entry-header">
<div class="post-img-wrap">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php
// default the $header_class_name to 'has-thumbnail'
$header_class_name = 'has-thumbnail';
if ( has_post_thumbnail() ) {
?>
<?php
$image_id = get_post_thumbnail_id();
$image_url_big = wp_get_attachment_image_src( $image_id,'azera-shop-post-thumbnail-big', true );
$image_url_mobile = wp_get_attachment_image_src( $image_id,'azera-shop-post-thumbnail-mobile', true );
?>
<picture itemscope itemprop="image">
<source media="(max-width: 600px)" srcset="<?php echo esc_url( $image_url_mobile[0] ); ?>">
<img src="<?php echo esc_url( $image_url_big[0] ); ?>" alt="<?php the_title_attribute(); ?>">
</picture>
<?php
} else {
// override the default $header_class_name in the case that there is no thumbnail
$header_class_name = 'no-thumbnail';
?>
<picture itemscope itemprop="image">
<source media="(max-width: 600px)" srcset="<?php echo azera_shop_get_file( '/images/no-thumbnail-mobile.jpg' );?> ">
<img src="<?php echo azera_shop_get_file( '/images/no-thumbnail.jpg' ); ?>" alt="<?php the_title_attribute(); ?>">
</picture>
<?php } ?>
</a>
<?php azera_shop_post_date_index_box_trigger(); ?>
</div>
<div class="entry-meta list-post-entry-meta">
<?php azera_shop_content_entry_meta_top_trigger(); ?>
<span itemscope itemprop="author" itemtype="http://schema.org/Person" class="entry-author post-author">
<span itemprop="name" class="entry-author author vcard">
<i class="fa fa-user" aria-hidden="true"></i><a itemprop="url" class="url fn n" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author"><?php the_author(); ?> </a>
</span>
</span>
<span class="posted-in entry-terms-categories">
<i class="fa fa-folder-open-o" aria-hidden="true"></i><?php _e( 'Posted in','azera-shop' ); ?>
<?php
/* translators: used between list items, there is a space after the comma */
$categories_list = get_the_category_list( esc_html__( ', ', 'azera-shop' ) );
$pos = strpos( $categories_list, ',' );
if ( $pos ) {
echo substr( $categories_list, 0, $pos );
} else {
echo $categories_list;
}
?>
</span>
<a href="<?php comments_link(); ?>" class="post-comments">
<i class="fa fa-comment-o" aria-hidden="true"></i><?php comments_number( esc_html__( 'No comments','azera-shop' ), esc_html__( 'One comment','azera-shop' ), esc_html__( '% comments','azera-shop' ) ); ?>
</a>
</div><!-- .entry-meta -->
<?php
// add the $header_class_name value to the h1 (PS consider using a similarly styled h2)
the_title( sprintf( '<h1 class="entry-title '.$header_class_name.'" itemprop="headline">', esc_url( get_permalink() ) ), '</h1>' ); ?>
<?php echo apply_filters( 'azera_shop_header_underline','<div class="colored-line-left"></div><div class="clearfix"></div>' ); ?>
</header><!-- .entry-header -->
<div itemprop="description" class="entry-content entry-summary">
<?php
$ismore = strpos( $post->post_content, '<!--more-->' );
if ( $ismore ) : the_content( sprintf( esc_html__( 'Read more %s …','azera-shop' ), '<span class="screen-reader-text">' . esc_html__( 'about ', 'azera-shop' ) . esc_html( get_the_title() ) . '</span>' ) );
else : the_excerpt();
endif;
?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'azera-shop' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
</article><!-- #post-## -->
CSS
article header h1.no-thumbnail{
color:red;
}
You can then apply CSS by referencing either class name
on your single.php file, or the page you use to display the single blog post you need to to an if statement check if the post have a thumbnail then if it does printout the style, or else let the default style will take place
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
echo "<style type=\"text/css\">";
echo ".post-list h1.entry-title a{
color: red !important ; /*any color of your choice*/;
}
</style>";
}
else {
// Default style will take place
}
?>
Make sure that you add thumbnail support on your functions.php file.
To add thumbnail support on your functions.php just add add_theme_support( 'post-thumbnails' );
Replace this line
<header class="entry-header">
with
<header class="entry-header <?= has_post_thumbnail() ? 'my-hasfeatured-img' : '' ?>">
and then add CSS rule in style.css like:
.my-hasfeatured-img h1{
//your code
}
Hope this helps!
I have a theme with two toggle menu options (standard and mobile with hover effect).I'm trying to replace the hover with an off-canvas menu solution taking in consideraion this described procedure.
After I've updated the css style code using the custom css field option, I've uploaded to the server and registered in script-calls.php(instead of calling in footer.php) classie.js and sidebarEffects.js files :
...
// Main Scripts
function register_js() {
if (!is_admin()) {
$url_prefix = is_ssl() ? 'https:' : 'http:';
// Register
wp_register_script('classie', THB_THEME_ROOT . '/assets/js/plugins/classie.js', 'jquery', null, TRUE);
wp_register_script('sidebarEffects', THB_THEME_ROOT . '/assets/js/plugins/sidebarEffects.js', 'jquery', null, TRUE);
// Enqueue
wp_enqueue_script('classie');
wp_enqueue_script('sidebarEffects');
wp_localize_script( 'app', 'themeajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
}
}
...
The original theme mobile menu section in header.php looks like this:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="wrapper" class="open">
<!-- Start Mobile Menu -->
<nav id="mobile-menu">
<div class="menu-container custom_scroll">
<div class="menu-holder">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="mobile-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</div>
<div class="menu-footer">
<?php echo do_shortcode($menu_footer); ?>
<?php if (ot_get_option('menu_ls') == 'on') { do_action( 'thb_language_switcher' ); } ?>
</div>
</div>
<div class="spacer"></div>
</nav>
<!-- End Mobile Menu -->
<!-- Start Quick Cart -->
<?php do_action( 'thb_side_cart' ); ?>
<!-- End Quick Cart -->
<!-- Start Loader -->
<div class="preloader"></div>
<!-- End Loader -->
<!-- Start Header -->
<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">
<div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">
<?php if ($header_style == 'style2') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php if ($header_style != 'style2') { ?>
<div class="small-7 medium-4 columns logo">
<?php if ($header_style == 'style1') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php } ?>
<div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
<?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
<?php if ($full_menu_true) { ?>
<nav id="full-menu" role="navigation">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="full-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</header>
<!-- End Header -->
...
(not so sure if it's ok), I've modified/replaced the above section with:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="st-container" class="st-container">
<!-- content push wrapper -->
<div class="st-pusher">
<nav class="st-menu st-effect-1" id="menu-1">
<!-- sidebar content -->
</nav>
<div id="st-trigger-effects"><button data-effect="st-effect-3">Menu</button></div>
<div class="st-content"><!-- this is the wrapper for the content -->
<div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
<!-- Start Mobile Menu -->
<nav id="primary-navigation" class="st-menu st-effect-3" id="menu-3" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'notio-wp' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'notio-wp' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
<!-- End Mobile Menu -->
...
Also in footer.php I've closed these divs:
...
</div><!-- /st-content-inner -->
</div><!-- /st-content -->
</div><!-- /st-pusher -->
</div><!-- /st-container -->
</body>
</html>
Unfortunately, my result is not functional.The final goal is to obtain the off-canvas menu effect on the right side as alternative to the hover menu, using the existing toggle menu option (between off-side and standard menu), also using the existing burger menu button (when off-canvas is activated). Any thoughts or any other solution with the same effect will be much appreciated.Thanks
I want to apply a js I found here on stackoverflow to my navigation bar. This is aimed to autohide it after a moment of inactivity. But I dont know how to include and apply the code to my navigation bar.
This is how my html goes
<div class="basic-wrapper">
<a class="btn responsive-menu pull-right" data-toggle="collapse" data-target=".navbar-collapse">
<i class='icon-menu-1'></i>
</a>
<a class="navbar-brand" href="<?php echo home_url(); ?>">
<?php
if( get_option('custom_logo') ){
echo '<img src="'. get_option('custom_logo') .'" alt="" data-src="'. get_option('custom_logo') .'" data-ret="'. get_option('custom_logo_retina') .'" class="retina" />';
} else {
echo bloginfo('title');
echo '<br /><small>';
echo bloginfo('description');
echo '</small>';
}
?>
</a>
</div>
<div class="collapse navbar-collapse pull-right">
<?php
if ( has_nav_menu( 'primary' ) ){
wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 3,
'container' => false,
'container_class' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'menu_id' => 'ebor-main-menu',
'walker' => new ebor_bootstrap_navwalker()
)
);
} else {
echo 'Set up a navigation menu now';
}
if( get_option("header_social_link_1") )
get_template_part('loop/loop','socialheader');
?>
</div>
</div><!--/.container-->
</div><!--/.nav-collapse -->
This is the code I found-
$("div").hide();
$("html").mousemove(function( event ) {
$("div").show();
myStopFunction();
myFunction();
});
function myFunction() {
myVar = setTimeout(function(){
$("div").hide();
}, 1000);
}
function myStopFunction() {
if(typeof myVar != 'undefined'){
clearTimeout(myVar);
}
}
If you are asign how to include an external javascript file, you need to do the following:
<script src="//path/to/external/js/file.js"></script>
As for the actual JS code, i dont think that will give you what you are looking for, as it will hide ALL DIVs on the page.
You'd want to replace that with something like. $("div#IDofMenuContatiner")...
I am trying to add bootstrap off canvas to wordpress page to be visible on xs devices, like this example
http://getbootstrap.com/examples/offcanvas/
My theme.js folder doesn't seems to be loaded in my wordpress page.
this is page.php code
<?php get_header(); ?>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-md-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs offcanvas-control" data-toggle="offcanvas">Sidebar <span class="glyphicon glyphicon-resize-horizontal"></span></button>
</p>
<?php if( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
<?php endwhile; else: ?>
<div class="page-header">
<h1>Oh no!</h1>
</div>
<p>No content is appearing for this page!</p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
this is sidebar.php
<div class="col-md-3 sidebar sidebar-offcanvas">
<?php if ( ! dynamic_sidebar( 'page' ) ): ?>
<h3>Widget Setup</h3>
<p>Please add widgets to the page widget to have them display here</p>
<?php endif; ?>
</div>
this is theme.js
jQuery(document).ready(function ( $ ) {
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
});
this is functions.php
// Load the Theme JS
function theme_js() {
global $wp_scripts;
wp_register_script( 'html5shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );
wp_register_script( 'respond', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );
$wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
$wp_scripts->add_data( 'respond', 'conditional', 'lt IE 9' );
wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery','bootstrap_js'), '', true );
}
add_action( 'wp_enqueue_scripts', 'theme_js' );
Browser only loads this scripts
<script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>