I am currently working on a site where my client wants a list of icons and when you click on an icon a panel slides in with the information relating to that icon. Here is a link to the section - https://vibrantpropertyservices-u8uj.temp-dns.com/wp/services/#services.
I have the sliding panel working but I can't seem to get the relevant content to show, it just shows the first icon's info. Here is my code:
<?php
$services_query = new WP_Query( array(
'post_type' => 'servicespage',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'menu_order'
)
);
?>
<?php if ( $services_query->have_posts() ) : ?>
<?php while ( $services_query->have_posts() ) : $services_query->the_post(); ?>
<?php $current_id = get_the_ID(); ?>
<div class="icon" onclick="openNav()" data-src="content-<?php echo $current_id ?>">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
<h3><?php the_title(); ?></h3>
</div>
<div id="slide" class="overlay">
×
<div id="content-<?php echo $current_id ?>">
<div class="test">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php endif; ?>
</div>
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("slide").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("slide").style.width = "0%";
}
I know I'm calling the id of "slide" but I don't know how to target <div id="content-<?php echo $current_id ?>"> for each individual link?
Many thanks
remove onclick function for both open
<div class="icon" data-src="content-<?php echo $current_id ?>">
and for close also
×
add below Jquery instead of functions
jQuery(document).on("click",".services-wrap .icon",function(){
jQuery(this).closest('div.overlay').css('width:100%');
});
jQuery(document).on("click",".overlay .closebtn",function(){
jQuery(this).closest('div.overlay').css('width:0%');
});
When I click one of the preview images, in order to bring up the fancybox gallery, it just swipes the image to the right and gives me this broken overlay. Not sure what the issue is here...
HTML (Note I'm using WordPress and Advanced Custom fields):
<?php if ( have_rows("inspiration_gallery") ) : ?>
<?php $i = 0; while ( have_rows("inspiration_gallery") ) :
the_row();
$img = get_sub_field("inspiration_image");
$img_id = $img['ID'];
$img_url = $img['url'];
$gallery_id = $gallery_id ? $gallery_id : $img_id;
$related = get_sub_field("inspiration_related");
?>
<?php if ($i == 0): ?>
<!-- Preview Image -->
<a class="inspiration__preview-link" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>">
<?php echo wp_get_attachment_image( $img_id, "full", false, array("class" => "inspiration__prev_img") ); ?>
</a>
<?php else: ?>
<!-- Gallery Fancybox Link -->
<a class="inspiration__gallery-link none" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>"></a>
<?php endif; ?>
<?php $i++; endwhile; ?>
<?php endif; ?>
I've got the latest versions of Fancybox JS and CSS files enqueued.
I'm doing an slider image by using the plugin OwlCarousel2
I have added the JavaScript and CSS files that they provide on the website.
I'm also setup this on WordPress custom theme. I having a hard time trying to figure out how to setup my own custom Jquery.
Custom animation
jQuery(document).ready(function() {
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
Boolean: false,
Number: 10
});
});
Wordpress Slider Image with Advanced Custom Gallery/Checkbox Fields
<?php $images = get_field('image_carousel'); ?>
<?php $activate_carousel_array = get_field( 'activate_carousel' ); ?>
<?php if( $images ): ?>
<?php if ( $activate_carousel_array ):
foreach ( $activate_carousel_array as $activate_carousel_item ):
echo $activate_carousel_item; ?>
<?php
$images = get_field('image_carousel');
if( $images ): ?>
<div id="hero">
<div class="slider owl-carousel owl-theme">
<?php foreach( $images as $image ): ?>
<div><img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" /></div>
<?php endforeach; ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
<?php endif; ?>
In your code you use
jQuery(document).ready(function() and
$(document).ready(function()
remove one of them.
The validation works for the first model on my form, but doesn't work for the Items array of models that are looped through. - this is incorrect now as validation is occuring, but not firing when editing any of the BookingRoom input fields.
I have found that when I re-enter data into a Booking field that has just had data removed(displaying a green background in the input box after putting it back in) ajax validation is fired, but it isn't fired when I click on one of the BookingRoom input fields and edit one of those. I have debugged in Firebug the AJAX response for editing a Booking field and the error messages are sent for any of the BookingRoom fields which are invalid.
Here is my performAjaxValidation function:
protected function performAjaxValidation($model, $items)
{
if(isset($_POST['ajax']) && $_POST['ajax']==='booking-form')
{
//echo CActiveForm::validate($model);
$model = CJSON::decode(CActiveForm::validate($model));
$items = CJSON::decode(CActiveForm::validateTabular($items));
var_dump(CJSON::encode(CMap::mergeArray($model, $items)));
Yii::App()->end();
}
}
Update.php
<?php //Yii::app()->clientScript->registerCoreScript('jquery'); ?>
<?php
/* #var $this BookingController */
/* #var $model Booking */
/* #var $bookingRoom BookingRoom */
$this->breadcrumbs=array(
'Bookings'=>array('index'),
$model->id=>array('view','id'=>$model->id),
'Update'
);
$this->menu=array(
array('label'=>'List Booking', 'url'=>array('index')),
array('label'=>'Create Booking', 'url'=>array('create')),
array('label'=>'View Booking', 'url'=>array('view', 'id'=>$model->id)),
array('label'=>'Manage Booking', 'url'=>array('admin'))
);
?>
<h1>Update Booking <?php echo $model->id; ?></h1>
<?php //$this->renderPartial('_form', array('model'=>$model)); ?>
<div class="form">
<button id="btnAdd" type='btnAdd'>Add</button>
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'booking-form',
// Please note: When you enable ajax validation, make sure the corresponding
// controller action is handling ajax validation correctly.
// There is a call to performAjaxValidation() commented in generated controller code.
// See class documentation of CActiveForm for details on this.
'enableAjaxValidation'=>true, 'enableClientValidation' => true, 'errorMessageCssClass' => 'error'
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary(array($model)); ?>
<div class="row">
<?php echo $form->labelEx($model,'customerId'); ?>
<?php echo $form->textField($model,'customerId'); ?>
<?php echo $form->error($model,'customerId'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'date'); ?>
<?php echo $form->textField($model,'date'); ?>
<?php echo $form->error($model,'date'); ?>
</div>
<table id="tblData">
<tbody>
<?php foreach($items as $i=>$item): ?>
<tr>
<td>
<div>
<?php echo $form->labelEx($item,'Room No'); ?>
<?php echo $form->dropDownList($item, "[$i]roomId", CHtml::listData(
Room::model()->findAll(), 'id', 'id'), array('single'=>'single', 'size'=>1)
); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'startDate'); ?>
<?php echo $form->textField($item,"[$i]startDate"); ?>
<?php echo $form->error($item,'startDate'); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'endDate'); ?>
<?php echo $form->textField($item,"[$i]endDate"); ?>
<?php echo $form->error($item,'endDate'); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'adults'); ?>
<?php echo $form->dropDownList($item, "[$i]adults", array('1'=>'1',
'2'=>'2',
'3'=>'3',
'4'=>'4',
'5'=>'5'), array('single'=>'single', 'size'=>1)
); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'children'); ?>
<?php echo $form->dropDownList($item, "[$i]children", array('1'=>'1',
'2'=>'2',
'3'=>'3',
'4'=>'4',
'5'=>'5'), array('single'=>'single', 'size'=>1)
); ?>
</div>
</td>
<td>
<button type='button'>Delete</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="row buttons">
<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
In your Yii view form, declare beginWidget as mentioned below,
<?php
$form = $this->beginWidget('CActiveForm', array(
'id'=>'booking-form', //form-id
'enableAjaxValidation'=>true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
),
));
?>
Make sure your model has at least one validation rule for that scenario
public function rules()
{
return array(
array('attribute, attribute1', 'required'),
);
}
For detail information visit below the link
http://knackforge.com/blog/vishnu/yii-how-enable-ajax-form-validation
I have featured images shown for different posts of same category in a page in a specific div. I need to show the whole post related to this image in the same page in another div. I know i must use JavaScript in this. But i need some reference which i can use for this. Can anyone help me with this? I am using the following code to show the images
<?php
/*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id = "meet_posts" class = "narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while( $recent->have_posts() ) : $recent->the_post();
$desc_values = get_post_custom_values("description");
?>
<div id="meetteam_featured_image">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
Thanks in advance.
Replace your above code with this following code :
<?php /*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id="meet_posts" class="narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while($recent->have_posts()):$recent->the_post();
$desc_values = get_post_custom_values("description");
?>
<div id="meetteam_featured_image" class="<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div>
<?php endwhile ?>
<div id="image-post-info"></div>
</div>
<?php get_footer(); ?>
Add this following code in functions.php file :
add_action( 'wp_ajax_ajaxified_function', 'ajaxified_function' );
add_action( 'wp_ajax_nopriv_ajaxified_function', 'ajaxified_function' );
function ajaxified_function() {
$temp = get_post($_POST['post_id']);
echo $temp->post_title.'<br/><br/>'.$temp->post_content;
die();
}
Add this following code in your custom js file :
jQuery(document).ready(function (){
jQuery('#meetteam_featured_image a').on('click',function(event){
event.preventDefault();
var post_id = jQuery(this).parent().attr('class');
jQuery.ajax({
type: "POST",
url: 'http://www.yoursitename.com/wp-admin/admin-ajax.php',
data: 'action=ajaxified_function&post_id='+post_id,
success: function (msg) {
jQuery('#image-post-info').html(msg);
},
error: function () {
alert('Error');
}
});
});
});
Add custom js file by including following code in functions.php file :
function add_custom_scripts() {
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() .'/js/custom- scripts.js' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );
Hope this will help....!!!!!
<div id = "meet_posts" class = "narrowcolumn">
<?php
$recent = new WP_Query("cat=6&orderby=title&order=ASC");
while( $recent->have_posts() ) : $recent->the_post();
$desc_values = get_post_custom_values("description");
?>
</div><!--close first div-->
<div id="meetteam_featured_image">
<a href="<?php the_permalink() ?>" rel="title">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
</div><!--close second div-->
<?php endwhile; ?>