Ok so here's the question:
I have registered a custom widget inside of my functions.php, the widget has custom js inside it the code is as follows:
/*
*
*Ajax loaded gallery for sidebar
*Note tis will not work cross browser.
*
*
*/
/**
* Plugin Name: A gallery Widget
* Description: A widget that displays an ajax loaded gallery.
* Version: 0.1
*/
add_action( 'widgets_init', 'my_widget' );
function my_widget() {
register_widget( 'MY_Widget' );
}
class MY_Widget extends WP_Widget {
function MY_Widget() {
$widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the chosen gallery images and link from lundhs ', 'example') );
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
$this->WP_Widget( 'example-widget', __('Reference Projects', 'example'), $widget_ops, $control_ops );
}
function widget( $args, $instance ) {
extract( $args );
//Our variables from the widget settings.
$titlewidget = apply_filters('widget_title', $instance['titlewidget'] );
$introtext = $instance['introtext'];
$title = $instance['title'];
$name = $instance['name'];
$img = $instance['img'];
$show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;
echo $before_widget;
?>
<?php
if($titlewidget)
?>
<h4 class="widget-title"><?php echo $titlewidget;?></h4>
<?php
if($introtext)
?>
<p> <?php echo $introtext; ?></p>
<div class="row">
<?php
//display gallery img
if ( $img)
?>
<a class="columns four" href="<?php echo $name; ?>">
<img class="imggallery" src="<?php echo $img; ?>">
</a>
<?php
// Display the gallery name and link
if ( $title )
?>
<a class="columns eight imggallery_link" href="<?php echo $name; ?>"><?php echo $title; ?></a>
</div>
<?php
echo $after_widget;
}
//Update the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
//Strip tags from title and name to remove HTML
$instance['titlewidget'] = strip_tags( $new_instance['titlewidget'] );
$instance['introtext'] = strip_tags( $new_instance['introtext'] );
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['name'] = strip_tags( $new_instance['name'] );
$instance['show_info'] = $new_instance['show_info'];
$instance['img'] = $new_instance['img'];
return $instance;
}
function form( $instance ) {
//Set up some default widget settings.
$defaults = array( 'title' => __('Example', 'example'), 'introtext' => __('introtext', 'example'), 'titlewidget' => __('Reference Project', 'example'), 'img' => __('img', 'example'), 'name' => __('link goes here', 'example'), 'show_info' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
<script type="text/javascript">
(function($) {
//load on page load
$(".area").load("/galleries/ #projects > li a");
//load on widget title click
$('.widget-top').live("click", function() {
$(".area").load("http://nettsidemal.no/lundhsas/galleries/ #projects > li a");
});
//stop default href from working
$('.area a').unbind().live("click", function() {
event.preventDefault();
return;
});
//load into input boxes
$(".area a").live("click", function() {
var title = $(this).attr('title');
$(".title").val(title);
var link = $(this).attr('href');
$(".link").val(link);
var img = $("img", this).attr('src');
$(".img").val(img);
var imgexample = $("img", this).attr('src');
$(".gallery_one").attr("src", imgexample);
});
}(jQuery));
</script>
<style type="text/css">
.area img{
max-width: 100px;
max-height: 100px;
display: inline-block;
}
.area a{
max-width: 100px;
max-height: 100px;
display: inline-block;
}
.gallery_one_image_wrap{
width: 100%;
height: 150px;
}
.gallery_one{
max-width: 80%;
max-height: 150px;
width: 80%;
margin: auto;
padding-left: 10%;
padding-right: 10%;
}
</style>
<script type="text/javascript">
(function($) {
var addDiv = jQuery('.addinput');
var i = jQuery('.addinput p').size() + 1;
jQuery('.addNew').live('click', function() {
jQuery.append('<p><input type="text" class="p_new' + i +'" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" class="remNew">Remove</a> </p>');
i + 1;
return false;
});
jQuery('.remNew').live('click', function() {
if( i > 1 ) {
jQuery(this).parents('p').remove();
i - 1;
}
return false;
});
}(jQuery));
</script>
<h3>Gallery selector for Lundhs</h3>
<p>
<label for="<?php echo $this->get_field_id( 'titlewidget' ); ?>"><?php _e('Widget Title:', 'example'); ?></label>
<input type="text" class="titlewidget" name="<?php echo $this->get_field_name( 'titlewidget' ); ?>" value="<?php echo $instance['titlewidget']; ?>" style="width:100%;" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'introtext' ); ?>"><?php _e('Intro text:', 'example'); ?></label>
<input type="text" class="introtext" name="<?php echo $this->get_field_name( 'introtext' ); ?>" value="<?php echo $instance['introtext']; ?>" style="width:100%;" />
</p>
<h4 style="text-align: center;">First Pick your images</a>
<div class="area"></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<h3>Your current front end projects</h3>
<h4>Reference project one</h4>
<div class="gallery_one_image_wrap">
<img class="gallery_one" src="<?php echo $instance['img']; ?>" /><br/>
</div>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'example'); ?></label>
<input type="text" class="title" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('The link:', 'example'); ?></label>
<input type="text" class="link" id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
</p>
//img Input.
<p>
<label for="<?php echo $this->get_field_id( 'img' ); ?>"><?php _e('The Link to the image:', 'example'); ?></label>
<input type="text" class="img" id="<?php echo $this->get_field_id( 'img' ); ?>" name="<?php echo $this->get_field_name( 'img' ); ?>" value="<?php echo $instance['img']; ?>" style="width:100%;" />
</p>
<div class="addinput">
<p>
<a href="#" class="addNew">Add new project</a>
</p>
</div>
<?php
}
}
the problem arises because the js runs twice once in the inactive widgets on the left and once in the active widget in the sidebar.
How do i go about forcing the JS to run only in the active widget.
Moving the js to a separate .js file and enqueing really isn't an option for me because i am going to have to use php values in the next step.
Any help is appreciated.
Chris
