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");
}
}
Related
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 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; });
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);
?>
I am uploading about 30 images for each product with numeric names like:
001.png
002.png
003.png ....
but after uploaded it showing on front end like
002.png
003.png
001.png ....
how could it be auto sort in front end following is the piece of code from Magento media.phtml
<ul class="product-image-thumbs">
<?php foreach ($this->getGalleryImages() as $_image):?>
<li>
<a href="<?php echo Mage::helper('catalog/image')->init($_product, 'image', $_image->getFile()); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" rel="prettyPhoto[mixed]">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($_thumbWidth, $_thumbHeight); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</a>
</li>
<?php endforeach?>
<?php if ($_360IsSet && !$_embedded):?>
<?php $_360ViewWidth = preg_replace("/[^0-9]/", "", $_360ViewWidth) ?>
<?php $_360ViewHeight = preg_replace("/[^0-9]/", "", $_360ViewHeight) ?>
<li>
<a href="<?php echo $this->getSkinUrl('webrotate360/frame_' . $_viewerSkin . '.html') . '?iframe=true&width=' . $_360ViewWidth . '&height=' . $_360ViewHeight ?>" rel="prettyPhoto[mixed]">
<img src="<?php echo $_360icon ?>" />
</a>
</li>
<?php endif?>
</ul>
sure #WhiteHat here is my code:
var mediaImages = [<?php $numItems = count($this->getGalleryImages());$i = 0;foreach ($this->getGalleryImages() as $_image):?> <?php echo '"'?><?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(450, 450); if(++$i === $numItems) { echo '"';} else { echo '",';}?><?php endforeach?>];
var mediaImagesSorted = mediaImages.sort();
jQuery('.MediaDiv').html(mediaImagesSorted);
I would like to display multiple slideshow on one page from my website.
I'm using a repeater ACF to enter my images.
I'm not able to know in advance how many slideshows are going to be displayed
when one slideshow is displayed, everything works perfectly, but when 2 are displayed, It doesn't work anymore.
does anyone knows how I can fix it ?
here is a basic code without the repeater and with 2 slideshows :
http://jsfiddle.net/XRpeA/13/
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
<br><br>
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
and here is my code with the repeater :
http://jsfiddle.net/XRpeA/14/
<?php if(get_field('images')): ?>
<div id="counter_2"><span id="current">1</span> / <span id="total"></span></div>
<div id="slideframe">
<?php while(has_sub_field('images')): ?>
<?php if(get_sub_field('image') != ''){ ?>
<img class="image_news" src="<?php the_sub_field('image'); ?>"/>
<?php } ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
thanks a lot
Ok, so I did it just for you as I promiced, thought I thought it will be faster :)
Result
http://skyloveagency.com/new/
(will remove tomorrow)
Fields:
photo_repeater - repeater
---photo_slider - repeater
------photo_block - image with URL output
Full script, not optimized but works perfectly
<?php
/**
* Template Name: Profiles2
*/
get_header(); ?>
<?php
// query
$args = array(
'post_type' => 'profiles',
'show' => 1
);
$wp_query = new WP_Query($args);
?>
<?php $random = 0;
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php if(get_field('photo_repeater')): ?>
<?php while(has_sub_field('photo_repeater')): ?>
<?php $random++; ?>
<div id="slideframe<?php echo $random; ?>">
<?php if(get_sub_field('photo_slider')): ?>
<?php while( has_sub_field('photo_slider') ): ?>
<?php
$img_url = get_sub_field('photo_block');
$image = aq_resize( $img_url, 200, 200, true );
?>
<img class="image_news" src="<?php echo $image; ?>" alt="111" />
<?php endwhile; ?>
<?php endif; ?>
</div>
<br>
<div id="counter<?php echo $random; ?>">image <span id="current<?php echo $random; ?>">1</span> / <span id="total<?php echo $random; ?>"></span></div>
<script>
var count<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news').length;
$("#total<?php echo $random; ?>").text(count<?php echo $random; ?>);
// set display:none for all members of ".pic" class except the first
$('#slideframe<?php echo $random; ?> .image_news:gt(0)').hide();
// stores all matches for class="pic"
var $slides<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news');
$slides<?php echo $random; ?>.click(function () {
// stores the currently-visible slide
var $current<?php echo $random; ?> = $(this);
if ($current<?php echo $random; ?>.is($slides<?php echo $random; ?>.last())) {
$("#current<?php echo $random; ?>").text("1");
$current<?php echo $random; ?>.hide();
$slides<?php echo $random; ?>.first().show();
}
// else, hide current slide and show the next one
else {
$("#current<?php echo $random; ?>").text($current<?php echo $random; ?>.next().index()+1);
$current<?php echo $random; ?>.hide().next().show();
}
});
</script>
<br><br>
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php get_footer(); ?>