I'm using the following inside images-options which is linked to functions.php. When clicked on submit button it crashes in WordPress admin.
<th scope="row">Image 1:</th>
<td>
<input type="text" name="director_image1" value="<?php print get_option('director_image1'); ?>" />
<br/>
</td>
</tr>
I am using this to get the image in header.php.
var theImage=<?php $image = get_option('director_image1');?>
<?php if( $image) : ?>
<?php echo "'".$image."';"; ?>
<?php endif; ?>
And finally i am using theImage variable inside a javascript file :
{
src: theImage
fade: 3000
}
Could you please help me out the image is not being displayed.
The problem was that i didn't add , after the link which is necessary in javascript. But i used ; which is shouldn't be added after a link src in javascript.
Related
I need a Custom field for background color for every category in Wordpress, anyone have any idea?
Thanks in Advance :)
Put below code in functions.php file of your theme for admin side.
<?php
add_action('category_add_form_fields', 'add_background_color_field');
add_action('category_edit_form_fields', 'edit_background_color_field');
add_action('edit_term', 'save_background_color_field');
add_action('create_term', 'save_background_color_field');
function add_background_color_field() {
echo '<div class="form-field">
<label for="category_background_color">Background Color</label>
<input type="text" name="category_background_color" id="category_background_color" value="" />
<p class="description">Category Background Color.</p>
</div>';
}
function save_background_color_field($term_id) {
if(isset($_POST['category_background_color']))
update_option('cat_background_color'.$term_id, $_POST['category_background_color']);
}
function edit_background_color_field($category) {
$background_color = get_option('cat_background_color'.$category->term_id);
echo '<tr class="form-field">
<th scope="row" valign="top"><label for="category_background_color">Background Color</label></th>
<td>
<input type="text" name="category_background_color" id="category_background_color" value="'.$background_color.'" />
<p class="description">Category Background Color.</p>
</td>
</tr>';
}
?>
Use below code for front end.
<?php
$cat_id = get_query_var('cat');
$background_color = get_option('cat_background_color'.$cat_id);
?>
Use $background_color variable value wherever you want to use category background color in your archive.php or category.php file.
You can use Advanced Custom Fields plugin, and then get category color field value in function. Write style tag, use body class, and display add attach that function to wp_head.
I have an attribute on my product view and list pages that displays a preview video on a separate page. I'm pulling in the attribute using my themes product/view.phtml and product/list.phtml. It has an image button that shows preview now. The code is have is below.
<img src="/graphics/preview-now.png" align="absmiddle" style="margin-top: 10px;" alt="Preview Now">
The problem is that I don't want this image to display if the product attribute is null or blank. I tried the code below in a few variations but that wouldn't work.
< ?php if($_product->getvideo_src() != '') { ?>
<span><img src="/graphics/preview-now.png" align="absmiddle" style="margin-top: 10px;" alt="Preview Now"></span>
< ?php } ?>
Try using isset. Also your magic get formatting is off. You had getvideo_src() when it should be camel-cased like getVideoSrc().
<?php if(isset($_product->getVideoSrc())) { ?>
<span><img src="/graphics/preview-now.png" align="absmiddle" style="margin-top: 10px;" alt="Preview Now"></span>
<?php } ?>
Try
<?php if($_product->getVideoSrc()) : ?>
...
<?php endif; ?>
or
<?php if($_product->getData('video_src')) : ?>
...
<?php endif; ?>
I have a application here: application
In the demo I am using a basic jquery slider which page is here: page info
Now the issue I am having is that it displays the images in question 1, but not in question 2. Now before I included the slider, it displayed the images in all questions. But since I included the slider, then it only displays images in first question only. How can I get images to be displayed in all questions?
CODE:
<form action='results.php' method='post' id='exam'>
<?php
foreach ($arrQuestionId as $key=>$question) {
?>
<div class='lt-container'>
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " . htmlspecialchars($arrQuestionContent[$key]); ?></p>
<?php
//start:procedure image
$img_result = '';
if(empty($arrImageFile[$key])){
$img_result = ' ';
}else{
?>
<div id="banner-slide">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : true
});
});
</script>
<?php
}
//end:procedure image
?>
</div>
<?php
}
?>
</form>
You have two divs on the page with the same ID. #1 that is a no no and bad HTML. You will need to initiate your slider on each div independently.
$('#banner-slide1').bjqs({ //ETC
$('#banner-slide2').bjqs({ //ETC
Is that enough to understand where you went wrong and why it's not working. JQuery doesn't know which banner-slide to use, or it's actually only using the first one, because it knows there should only be one ID per page.
I don't know how your slider plugin works, but you may be able to change the ids to classes in the divs, and then start the slider with:
$('.banner-slide').bjqs({ //ETC
OR
$('.banner-slide').each(function(){
$(this).bjqs({ //ETC
It depends on how the plugin works.
Element ID should be unique to a single element. You are not allowed to give two elements the same ID. Try changing the IDs to banner-slide1 and banner-slide2.
I'm have a wordpress installation where i have 2x custom fields, that both store images (or rather the urls for the images).
I then have a div that i want to display the images in. but i want to display the first image, then have some nice buttons that will scroll to the next image.
My code so far is below:
<div>
<?php
$front_cover = get_post_meta($post->ID, 'front_cover', true);
$back_cover = get_post_meta($post->ID, 'back_cover', true);
$artwork = $front_cover;
if ($back_cover === '') {
echo '<img src="'.$artwork.'" />';
} else {
echo '<img src="'.$artwork.'" />';
?>
<div class="artwork_controls">
Previous
Next
<span class="sliderPagination">1 of 3</span>
</div>
</div>
<?php } ?>
As you can see. my If statement checks if the back_cover has any content... if it doesn't it displays the front_cover only.
If the back_cover does have content it should display the front cover and then the buttons that the user clicks to load up the back cover.
My thinking was that i could get the 'previous' and 'next' buttons to dynamically change the $artwork variable, but i don't believe that's possible as the PHP would have already been processed?
This code could be completely wrong, but hopefully you can see what i'm trying to do?
<div>
<?php $front_cover = get_post_meta($post->ID, 'front_cover', true); ?>
<?php $back_cover = get_post_meta($post->ID, 'back_cover', true); ?>
<?php $artwork = $front_cover; ?>
<?php if ($back_cover === '') { ?>
<img src="<?php echo $artwork; ?>" />
<?php } else { ?>
<img id="imgA" src="<?php echo $artwork; ?>" />
<img id="imgB" src="<?php echo $back_cover; ?>" style="display:none;"/>
<div class="artwork_controls">
<span class="sliderBtnPrev" onClick="document.getElementById('imgA').style.display='none';document.getElementById('imgB').style.display='';">Show B</span>
<span class="sliderBtnNext" onClick="document.getElementById('imgB').style.display='none';document.getElementById('imgA').style.display='';">Show A</span>
</div>
<?php } ?>
</div>
One way would be to do AJAX calls and fetch images upon clicking the "Previous" and "Next" buttons.
However you can just put all your images in the final html and do all the rest with javascript and some css.
So if you just put the two images in the html, lets say they have ids "front-image" and "back-image" so you've got this
<img id="front-image" src="imgs/front-cover.jpg"/>
<img id="back-image" src="imgs/back-cover.jpg" style="visiblity: hidden"/>
Notice the style="visibility: hidden". From than on you can have onClick handlers on your Previous and Next buttons which just set the visibility of the two images.
clickHandlerPrev() {
document.querySelector("#front-image").style.visibility = "";
document.querySelector("#back-image").style.visibility = "hidden";
}
clickHandlerNext() {
document.querySelector("#front-image").style.visibility = "hidden";
document.querySelector("#back-image").style.visibility = "";
}
Then your buttons would look like this
Previous
Next
Though if I'm getting your goal right, I think your buttons are better named simply "Front cover" and "Back cover" since you're not iterating over lots of images, but switching just those two.
I am implemented the uploaded images are displayed on the site . For
the image not uploaded correctly means i replace the error-image on
that? When i load the site I am facing the issue error image not
define, and for the lightbox is loading in both chrome and firefox
but its not loading in IE, displaying only the black background.
Here is my code for displaying the error image and uploading image
from the webservices.
Php Code :
foreach(object_2_array($ans->answerDocumentList) as $document){
if ($document->documentHttpUrl!= ''):
$document_name_explode = explode('.',$document->documentName);
$file_type = trim($document_name_explode[1]);?>
<div class="documentation_class" <?php if($k%2==0){?> style="float:none;margin-left:0px;" <?php }else{ ?> style="float:left;"<?php } ?>>
<?php if(($file_type!="") &&($file_type=="png" || $file_type=="jpg" || $file_type=="jpeg" || $file_type=="gif")){ ?>
<a rel="lightbox[document]" href="<?php echo stripcslashes($document->documentHttpUrl); ?>">
<img alt="<?php echo stripcslashes($document->documentName); ?>" src="<?php echo APP_FORUM_URL;?>/images/ajax-load.gif" dataimage="<?php echo stripcslashes($document->documentHttpUrl); ?>" class="document_image" style="max-width:644px !important;" onerror='errorImage("<?php echo RESOURCE_URL_BASE;?>",this);' border="0" />
</a>
<br/>
<?php } else{
echo $document->documentName;
} ?>
<div class="question_float_left download_link">
Click here to download this file
</div>
<?php endif; ?>
<input type="hidden" value="<?php echo $document->documentId; ?>" class="list_document_id"/>
<input type="hidden" value="<?php echo $document->documentName; ?>" class="list_document_title"/>
</div>
<?php $k++; }?>
<script>
Function is:
function errorImage(url,ctrl){
ctrl.style.border='solid 1px black';
ctrl.src='<?php echo APP_FORUM_URL; ?>images/broken-image.jpg';
$(ctrl).parent().parent().find('.download_link').hide();
}
Finally i Solved my problem , which i make the Lightbox to worked
on the both IE 7 and the IE 8,
I include the script file google api http://www.google.com/jsapi and google.load("jquery", "1");
google.load("jquery", "1");
in the Header.php This is problem which
conflict my lighbox.js file and other library files , then i removed that script and added the new script Js library https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js
And i changed all my script $ symbol to jQuery now i make the Lightbox to worked , in IE browser and also in all browser