I'm pretty new to web dev and i'm having an issue with the colorbox plugin.
Everything works correctly when first opening the page.
Default look
Each of the images are links that when clicked on open the respective colorbox.
When clicking colorbox is displayed correctly
When clicking on the close icon or clicking on the background overlay the colorbox closes as it should, but when i click on the colorbox content itself the colorbox stops displaying content and the border and background overlay stays.Error i'm describing
What I would like to do is to disable the clicking functionality of the content so that it only closes when clicking the close icon or the background overlay.
This is my code for the page itself (html/php).
<section class="invitados contenedor seccion">
<h2>Nuestros Invitados</h2>
<ul class="lista-invi clearfix">
<?php while ($invitados = $resultado->fetch_assoc()) { ?>
<li>
<div class="invi">
<a class="invitado-info" href="#invitado<?php echo $invitados['invitado_id'] ?>">
<img src="img/<?php echo $invitados['url_imagen'] ?>" alt="Imagen De Invitado 1" />
<p><?php echo $invitados['nombre_invitado'] . ' ' . $invitados['apellido_invitado'] ?></p>
</a>
</div>
</li>
<div style="display:none;">
<div class="invitado-info" id="invitado<?php echo $invitados['invitado_id'] ?>">
<h2><?php echo $invitados['nombre_invitado'] . ' ' . $invitados['apellido_invitado'] ?></h2>
<img src="img/<?php echo $invitados['url_imagen'] ?>" alt="Imagen De Invitado 1" />
<p><?php echo $invitados['descripcion'] ?></p>
</div>
</div>
<?php } ?>
</ul>
</section>
And the jquery function
$('.invitado-info').colorbox({inline:true, width:'50%' });
Sorry if class names and vars look weird they are in spanish and thanks in advance to anyone that helps.
Related
Youtube video in a popup keeps playing after the popup is closed. There are multiple videos in popups on the page. The page is a wordpress loop.
I have my code working well just up to this point where I need to stop the video playing.
I am pretty sure that the solution is probably very simple. I have tried various things over the past 2 days and I still just can't get the videos to stop playing when I close the popup box. I have only managed so far to get the first video to stop playing with the commented piece inside my pasted code.
<div class="project-box">
<div id="close<?php the_permalink() ?>"></div>
<div class="project-box-image">
<div class="project-box-overlay">
<div class="project-overlay-links">
<a id="video-button" href="#<?php the_title(); ?>" class="button-link">Play video</a>
<a class="button-link" href="<?php the_permalink() ?>">View Project</a>
</div><!---project-overlay-links-->
</div><!---project-box-overlay-->
<div id="<?php the_title(); ?>" class="popup-overlay">
<div id="popup" class="popup">
<a class="close" href="#close<?php the_permalink() ?>">×</a>
<div class="content">
<?php if( get_field('pop_up_video') ): ?>
<div class="video-embed" >
<div id="youtube">
<iframe width="800" height="400" src="<?php the_field('pop_up_video'); ?>?autoplay=0&rel=0&enable_js=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div><!---youtube-->
</div><!---video-embed-->
<?php endif; ?>
<script>
$('.close').click(function(e) {
e.preventDefault();
//$('iframe').attr('src', '');
$('.popup-overlay').addClass('display-none');
/*$('.youtube').each(function(index) {
$(this).attr('src', $(this).attr('src'));
return false;
});
});*/
$('a#video-button').click(function(){
$('.popup-overlay').removeClass('display-none');
});
</script>
</div><!---content-->
</div><!---popup-->
</div><!---overlay-->
<?php the_post_thumbnail('service-box-image'); ?>
</div><!---project-box-image-->
<a href="<?php the_permalink() ?>">
<h5><?php the_title(); ?></h5>
</a>
<div class="post-tags">
<?php the_tags('', ', '); ?>
</div><!---post-tags-->
<p><?php the_excerpt(); ?></p>
</div><!---project-box-->
If I understand correctly, you have multiple popups? If so, the code to change the src will affect all dialogs.
I'm assuing you're changing the SRC to stop the video. Also, assuming that the .close_me element is within the .hide_overlay element, you can do this:
jQuery('.close_me').click(function (e) {
var $videoEl = jQuery(this).closest('.hide_overlay').find('iframe');
$videoEl.attr('src', $videoEl.attr('src'));
});
This works because jQuery(this) will target the specific close button related to that one popup, and not target all popups.
Technically, a nicer way to stop or pause a video is to use the Youtube Javascript API as you can do something like:
player.stopVideo();
I am building a website and i have this issue :
I am working on a template and i did some modification. So the front page have some boxes which shows deals and buttons.
As you can see there are buttons called "See Deals"
Each box is a post so when i create a post then each box created automatically . I want that when i put a link on post then it will automatically set behind that "See Deals" button. I mean i want that this "See deal" button take the url from a link which i put in this post.
I wrote this code for boxes :
<div class="price_row_grid">
<div class="price_for_grid floatleft">
<?php theme_create_btn('no', 'price'); ?>
</div>
<div class="floatright vendor_for_grid">
<?php if ($price_meta == 'admin'): ?>
<?php $author_id = $post->post_author; ?>
<a class="admin" href="<?php echo get_author_posts_url($author_id) ?>" title="<?php the_author_meta('display_name', $author_id); ?>">
<?php echo get_avatar($author_id, '22'); ?>
</a>
<?php elseif ($price_meta == 'store'): ?>
<div class="brand_logo_small">
<?php WPSM_Postfilters::re_show_brand_tax('logo'); //show brand logo?>
</div>
<?php endif; ?>
</div>
</div>
<div class="price_row_grid">
<div class="price_for_grid floatleft">
<p class="button">Get Deal</p>
</div>
Now suppose i created a post on wordpress :
Now you can see there i put a dummy link at the end of post "google" now i want that when i put any link there then the box of this post get this link and set behind "Get Deal" button.
I'm looking to change this bit of code to a link instead of having it appear as a small popup window. How would I change it to link to a page of "http://example.com/register" instead of having the registration window drop down?
<div class="login-wrapper">
<a id="sticky-login" class="info-bottom icon-login sticky-button" title="<?php _e('Login',IT_TEXTDOMAIN); ?>"></a>
<div class="sticky-form" id="sticky-login-form">
<div class="loading">
<div> </div>
</div>
<?php echo it_login_form(); ?>
</div>
</div>
This seems too easy so I'm probably missing something.
You'd add an href attribute to the <a> tag, and if javascript is creating the popup, remove either the id attribute from the <a> tag or the class to which the javascript is linked.
<a class="info-bottom icon-login sticky-button" title="<?php _e('Login',IT_TEXTDOMAIN); ?>" href="http://example.com/register"></a>
I have following html in which I am using LightBox plugin by Lokesh Dhakar. I am getting images dynamically from database and done all required things to carry out with plugin, but still not working. Only the empty lightbox window appears when page loads.
Here is my code:
while ($fetch = mysql_fetch_array($selectImgResult)) { ?>
<div class="col-md-2 thumbnail">
<span style="color:slateblue;">
<?php echo $fetch['CreateDate']; ?>
</span>
<a href="ProfilePic\<?php echo $fetch['ImageUrl'];?>" data-lightbox="images">
<img src="ProfilePic\<?php echo $fetch['ImageUrl']; ?>" alt="<?php echo $fetch['ImageUrl']; ?>" style="height: 178px;" />
</a>
</div>
<?php }
I have some toruble with displaying terms of service.
At the cart page all works fine: http://mtxt.ibroken.ru/component/virtuemart/cart.html?Itemid=0
(bottom link) opens popup with text, generated by
<?php echo $this->cart->vendor->vendor_terms_of_service; ?>
code.
But i have button on the shop page http://mtxt.ibroken.ru/magazin.html (top button at right side), which must display same text...
At present moment text written in /modules/mod_virtuemart_cart/tmpl/default.php file. But how to get it in this file from shop interface by using PHP?
pps. Ugly English, sorry for that :)
You need to modify /modules/mod_virtuemart_cart/tmpl/default.php (or your override) and add this code just after line 3:
vmJsApi::js ('facebox');
vmJsApi::css ('facebox');
$document = JFactory::getDocument ();
$document->addScriptDeclaration ("
jQuery(document).ready(function($) {
$('div#full-tos').hide();
$('a#terms-of-service').click(function(event) {
event.preventDefault();
$.facebox( { div: '#full-tos' }, 'my-groovy-style');
});
});
");
And add this code just after line 53
<div class="show_cart">
<?php
if(!class_exists('VirtueMartModelVendor'))
require(JPATH_VM_ADMINISTRATOR.DS.'models'.DS.'vendor.php');
$vendor = VmModel::getModel('vendor');
$vendor = $vendor->getVendor();
?>
<br />
<span style="z-index: 0;">
<a href="<?php JRoute::_ ('index.php?option=com_virtuemart&view=vendor&layout=tos&virtuemart_vendor_id=1') ?>" class="terms-of-service" id="terms-of-service" rel="facebox" target="_blank">
<?php echo JText::_ ('COM_VIRTUEMART_CART_TOS_READ_AND_ACCEPTED'); ?>
</a>
</span>
<div id="full-tos">
<h2><?php echo JText::_ ('COM_VIRTUEMART_CART_TOS'); ?></h2>
<?php echo $vendor->vendor_terms_of_service; ?>
</div>
</div>
That shoud do the trick!