I want the entire button (div) to open a youtube link in a pop-up. The pop-up is connected with the class 'popup-youtube'. The problem with this code is that the youtube link opens in youtube.com and not in the pop-up.
It's about this part:
<div onclick="location.href='//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>';" style="cursor:pointer;" class="btn btn-secondary popup-youtube"><span href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>" onclick="$('#button-youtube-nl').click();"><?php echo esc_html( $hero_youtube_link_text ) ?></span>
The result of this code is opening the video in youtube, and not in the popup.
The following code actually works like I wanted:
<a id="button-youtube-nl" href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>"
But I'd like to make it work with the onclick="location.href" code. So if you click on the entire div you would get a pop-up with the video.
Below the fully code:
<?php
$hero_youtube_link_text = get_field( 'hero_youtube_link_text' );
$hero_youtube_link_url_nl = get_field( 'hero_youtube_link_url_nl' );
$hero_youtube_link_url_en = get_field( 'hero_youtube_link_url_en' );
$hero_youtube_link_url_de = get_field( 'hero_youtube_link_url_de' );
if ( $hero_youtube_link_text ) : ?>
<div class="hero__video">
<div onclick="location.href='//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>';" style="cursor:pointer;" class="btn btn-secondary popup-youtube"><span href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>" onclick="$('#button-youtube-nl').click();"><?php echo esc_html( $hero_youtube_link_text ) ?></span>
<div class="flags">
<a id="button-youtube-nl" href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>"
class="popup-youtube"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/flag-nl.png"/></a>
<a href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_de ) ?>"
class="popup-youtube"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/flag-de.png"/></a>
<a href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_en ) ?>"
class="popup-youtube"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/flag-en.png"/></a></div>
</div>
</div>
<?php endif ?>
Thanks in advance!
1.use a iframe inner DIV
2.when click DIV change the iframe src
//Add It In Your Code
$(this).click(function() { window.location = href; });
here You Can Use Your Div Id Also
$("#DivId").click(function() { window.location = href; });
Related
I have a form that uploads the profile image to wordpress. After form submit, the page is refreshed and the old image is displayed again. I have to wait about 4 or 5 seconds for the new image to appear. So I have to refresh the page 2 times to see the new image set.
I want to delay the refresh of the page but not the submission of the form, in this way I believe that you don't have to refresh the page twice to see the changes.
I tried with a script, but it doesn't work. I apologize for all this but i am new and i don't have much knowledge about php or js, can anyone help me?
<form id="wpua-edit-<?php echo esc_attr( $user->ID ); ?>" class="wpua-edit" action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="wp-user-avatar" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wp-user-avatar' : 'wp-user-avatar-existing' ) ?>" value="<?php echo esc_attr( $wpua ); ?>" />
<div class="upload-avatar" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-upload-button' : 'wpua-upload-button-existing' ); ?>">
<input name="wpua-file" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-file' : 'wpua-file-existing' ); ?>" type="file" class="wp-input-file"/>
<button type="submit" class="button" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-upload' : 'wpua-upload-existing' ); ?>" name="submit" value="<?php esc_html_e( 'Aggiorna', 'one-user-avatar' ); ?>">
<?php esc_html_e( 'Upload', 'one-user-avatar' ); ?>
</button>
</div>
<div id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-images' : 'wpua-images-existing' ); ?>" class="<?php echo esc_attr( $hide_images ); ?>">
<p id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-remove-button' : 'wpua-remove-button-existing' ); ?>" class="<?php echo esc_attr( $hide_remove ); ?>">
<button type="button" class="button" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-remove' : 'wpua-remove-existing' ); ?>" name="wpua-remove"><?php esc_html_e( 'Remove Image', 'one-user-avatar' ); ?></button>
</p>
</div>
<input type="hidden" name="wpua_action" value="update" />
<input type="hidden" name="user_id" id="user_id" value="<?php echo esc_attr( $user->ID ); ?>" />
<?php wp_nonce_field( 'update-user_' . $user->ID ); ?>
<?php submit_button( __( 'Update Profile', 'one-user-avatar' ) ); ?>
</form>
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$("wpua-edit-<?php echo esc_attr( $user->ID ); ?>").submit(function() {
//your code....
setTimeout(function() {
window.location.reload();
}, 5000);
});
});
</script>
If you have to upload an image and want to wait until it is uploaded before you reload the site, I would work with Ajax (XMLHttpRequest or fetch) and send the image via JavaScript to the server. Then you can wait until it is uploaded and the reload the site.
I'm trying to switch a base image with a thumbnail when clicked (under product pages). For some reason I can't get it to work at all. Here's my code that creates the thumbnails:
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="desktop more-views">
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<li>
<a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
</div>
<?php endif; ?>
Here's my JS code (in the file MY_THEME/skin/frontend/rwd/default/js/app.js) for switching the actual image:
wireThumbnails: function() {
//trigger image change event on thumbnail click
$j('.product-image-thumbs .thumb-link').click(function(e) {
e.preventDefault();
var jlink = $j(this);
var target = $j('#image-' + jlink.data('image-index'));
ProductMediaManager.swapImage(target);
});
}
Does anyone know what I'm doing wrong? I've followed the solutions at this link but they don't work! I wanted to comment on that post but I don't have enough reputation to do so! :( any help would be greatly appreciated!
EDIT: Here are the errors showing up on the console:
Each time I click on a thumbnail the last-most error comes up again and again...
i am reading and trying to get this to work for several hours. I am pretty new with javascript and only have a small knowledge base about it in general.
I hope someone can be so kind as to help me and share their knowledge with me.
The problem:
I have a image gallery with a php generated masonry look. And a visualization of either a selected or deselected image. (Info comes out of db). Now when i click a image it needs to call a method in one of my controllers.
And afterwards update the selected to deselected or vise versa css style.
The methods have been made and the return aswell.
This is what i got so far. But nothing seems to be working. I don't know if it is something specific to codeigniter or to javascript (jquery).
$(document).ready(function()
{
$('div#imagelink').click(function()
{
var imgId = $(this).find('a').attr('href');
$('#result').load('<?php echo base_url(); ?>selection/selectionImage/' + imgId);
return false;
});
});
If anything else is required i will be happy to provide.
<div class="flex-column width-1275">
<div class="d-flex justify-content-between">
<div class="p-2">
<h1><?php echo $this->session->userdata('username'); ?></h1>
<h3><?php echo str_replace( '_', ' ', $selected_gallery) . ' Galerij'; ?></h3>
</div>
<?php echo $this->session->flashdata('gallerymsg'); ?>
<div class="p-2 text-right">
<?php echo $this->session->flashdata('clientmsg') . '</br>'; ?>
</div>
<div id="result"></div>
</div>
<div class="grid imageGallery" data-masonry='{ "itemSelector": ".grid-item", columnWidth: ".grid-sizer" }'>
<div class="grid-sizer"></div>
<?php $counter=1 ; $sizeGallery=c ount($images); foreach($images as $img) : $imageLocation='img/jpg/' . $folderName . '/' . $img[ 'image_name']; $id=$ selected_gallery . $counter; ?>
<div class="grid-item">
<a href="#<?php echo $id; ?>">
<img src="<?php echo base_url($imageLocation) ?>" alt="<?php echo $selected_gallery . ' ' . $counter ?>">
</a>
<?php $class='' ; $selected=$ img[ 'image_selected']; switch($selected) { case '0'; $class='isNot' ; break; case '1'; $class='is' ; break; default; $class='isNot' ; break; } if($img[ 'image_locked']=='1' ) { $class='locked' ; } ?>
<div id="imagelink" class="<?php echo $class ?> selected">
<?php if ($img[ 'image_locked']=='0' ) : ?>
<!-- -->
<?php endif; ?>
</div>
</div>
<div class="cssbox">
<a id="<?php echo $id; ?>" href="#<?php echo $id; ?>">
<img class="cssbox_thumb">
<span class="cssbox_full">
<img src="<?php echo base_url($imageLocation) ?>">
</span>
<div class="<?php echo $class ?> Lightbox-Selected"></div>
</a>
<a class="cssbox_close" href="#void"></a>
<?php if($counter < $sizeGallery) : ?>
<?php $next=$ counter+1; ?>
<a class="cssbox_next" href="#<?php echo $selected_gallery . $next ?>">></a>
<?php endif; ?>
<?php if($counter> 1) : ?>
<?php $prev=$ counter-1; ?>
<a class="cssbox_prev" href="#<?php echo $selected_gallery . $prev ?>"><</a>
<?php endif ?>
</div>
<?php $counter++; endforeach; ?>
</div>
</div>
<script>
$(document).ready(function() {
$('div#imagelink').click(function() {
var imgId = $(this).find('a').attr('href');
$('#result').load('<?php echo base_url(); ?>selection/selectionImage/' + imgId);
return false;
});
});
</script>
<!-- <script src="<?php echo base_url('assets/js/image-select.js'); ?>"></script> -->
<script src="<?php echo base_url('assets/js/imagesloaded.pkgd.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/masonry.pkgd.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/masonry.js'); ?>"></script>
I have a popup window which is opened using this code:
Update:
<ul class="grid cs-style-1">
<?php
$explainname = new wp_query( array ( 'post_type' => 'explainname' ) );
if ( $explainname->have_posts() ) : while ( $explainname->have_posts() ) : $explainname->the_post();
$explainname_icon = get_post_meta( $post->ID,'explainname_icon', true );
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
$imageContent = get_the_content();
$stripped = strip_tags($imageContent, '<p> <a>'); //replace <p> and <a> with whatever tags you want to keep after the strip
?>
<li class="desktop">
<figure>
<img src="<?php echo $url; ?>" alt="<?php the_title(); ?>">
<figcaption>
<h3><?php the_title(); ?></h3>
<span style="text-align:right;font-size: 15px;"><?php echo $stripped; ?></span>
</figcaption>
</figure>
</li>
<li class="popup" onclick="myFunction<?php echo $post->ID; ?>()">
<figure>
<img src="<?php echo $url; ?>" alt="<?php the_title(); ?>">
<span class="popuptext" id="myPopup<?php echo $post->ID; ?>"><?php echo $stripped; ?></span>
</figure>
</li>
<script>
// When the user clicks on <div>, open the popup
function myFunction<?php echo $post->ID; ?>() {
var popup<?php echo $post->ID; ?> = document.getElementById("myPopup<?php echo $post->ID; ?>");
popup<?php echo $post->ID; ?>.classList.toggle("show");
}
</script>
<?php
endwhile; endif;
wp_reset_query();
?>
</ul>
How can I close that popup from within the popup?
I mean I need clase any open popup, When i click on new div
Use this example
<script>
$(document).not("#myPopup<?php echo $post->ID; ?>").click(function() {
$('#myPopup<?php echo $post->ID; ?>').hide();
});
</script>
Here is a solution. When you click on a DIV, it will close your popup. If you want to target all popups then you need to give them all a common class name.
document.getElementsByTagName('div').onclick = function(e){
document.getElementById("myPopup<?php echo $post->ID; ?>").style.display = 'none';
});
simply use this in javascript
var popup<?php echo $post->ID; ?> = document.getElementById("myPopup<?php echo $post->ID; ?>");
window.onclick = function() {
if (popup.classList.contains("show")) {
popup.classList.toggle("show");
}
}
I am attempting to use ajax in my WordPress project to dynamically load videos depending on their post ID. At the moment when I click on the video link I get the error 500 internal server error. I send the post ID via ajax to a PHP script, there I attempt to get the post meta of the post using the ID and then display the video url stored within that post meta. Can anyone see where I am going wrong?
Below is my shortcode function
/**
* Render the HTML code for the speaker interviews
*
* #return $output string The HTML code to be rendered, caught by ob_start();
*/
function test_view_shortcode_fn( $attributes ) {
ob_start();
$args = array( 'post_type' => 'test_video',
'post_status' => 'publish',
'posts_per_page' => 1
);
$main_video = new WP_Query( $args );
if( $main_video->have_posts() ) : while ( $main_video->have_posts() ) : $main_video->the_post();
$video = get_post_meta( get_the_ID(), '_video_url' );
$poster = get_post_meta( get_the_ID(), '_video_poster' );
?>
<div class="row">
<div class="columns small-12 medium-7 large-8 video-single">
<?php echo do_shortcode("[video src='" . $video[0] . "' poster='" . $poster[0] . "' width='800' height='640' preload='none' ]") ?>
<ul class="channel-share">
<li><a class="text-center" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" title="Share on Facebook" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a class="text-center" href="https://twitter.com/home?status=<?php the_title(); ?>-<?php the_permalink(); ?>" title="Share on Twitter" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a class="text-center" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Share on Linked In" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a class="text-center" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" title="Share on Google+" target="_blank"><i class="fa fa-google-plus"></i></a></li>
</ul>
<?php the_content(); ?>
</div>
<div class="columns small-12 medium-5 large-4 video-single">
<aside>
<ul class="iot-channel-sidebar">
<?php
$args = array(
'post_type' => 'test_video',
'posts_per_page' => 5,
'orderby' => 'rand'
);
$channel = new WP_Query( $args );
if( $channel->have_posts() ) : while( $channel->have_posts() ) : $channel->the_post();
$poster = get_post_meta( get_the_ID(), '_video_poster' );
$id = get_the_ID();
$video_ajax_url = VIDEO_URI . '/inc/video_ajax.php';
?>
<?php if( $poster ) { ?>
<li class="video-archive-item">
<div class="video-poster">
<a title="<?php the_title(); ?>" id="video_<?php echo $id; ?>">
<img src="<?php echo $poster[0]; ?>" alt="<?php the_title(); ?>" />
</a>
</div>
<div class="video-title">
<a title="<?php the_title(); ?>">
<h4><?php the_title(); ?></h4>
</a>
</div>
</li>
<script type="text/javascript">
jQuery("#video_<?php echo $id; ?>").click(function(){
jQuery.ajax({
url: '<?php echo $video_ajax_url; ?>',
type: 'POST',
data: {id: '<?php echo $id; ?>'},
success: function(data){
$('.wp-video').html(data); // Load data into a <div> as HTML
}
});
});
</script
<?php } ?>
<?php endwhile; endif; ?>
</ul>
</aside>
</div>
</div>
<?php endwhile; endif;
$output = ob_get_clean();
return $output;
}
My ajax:
<?php
global $post;
$postID = $_POST['id'];
setup_postdata( $postID );
echo $postID;
$video = get_post_meta( $postID, '_video_url' );
$poster = get_post_meta( $postID, '_video_poster' );
echo do_shortcode("[video src='" . $video[0] . "' poster='" . $poster[0] . "' width='800' height='640' preload='none' ]")
?>
I finally realised this was due to the fact that WordPress wasn't being loaded on the PHP file being called via Ajax.
To fix this I included wp-load.php at the top of my PHP script the Ajax was calling and it works perfectly. Here's what I added to my PHP file.
<?php
$filename = "../../../../wp-load.php";
include($filename);
?>