How to use random image in JavaScript
how to change image on reload/refresh website
SLIDER CODE
learn code from here https://websmartdevelopment.wordpress.com/
<div id=”box”><a href=”#”> <img id=”image” /></a>
</div>
<script>
var images = [
“wp-content/themes/marketingcertified/image/owl-mascot.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot2.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot3.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot4.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot5.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot6.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot7.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot8.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot9.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot10.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot11.jpg”];
function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById(‘image’).src = images[x];
}
randImg();
</script>
how to upload image in folder and database in php
1 Vote
Create table and connected from database
<?php
$con = mysql_connect (“localhost”,”root”,””);
if (!$con)
{
die (‘Could not connect: ‘ . mysql_error());
}
mysql_select_db (“ratnesh”, $con);
$sql = “CREATE TABLE tbl_image
(
`id` INT( 50 ) NOT NULL AUTO_INCREMENT ,
`photo` VARCHAR( 50 ) NOT NULL ,
`status` INT( 50 ) NOT NULL ,
PRIMARY KEY ( `id` )
)”;
mysql_query($sql,$con);
mysql_close($con);
?>
Upload images in database and folder
<?php
//Working on uplod image in database with folder
$con=mysql_connect( “localhost”,”root”,””);
mysql_select_db (“ratnesh”,$con);
if(isset($_POST [‘submit’]))
{
$file = $_FILES [‘file’];
$name = $file [‘name’];
$type = $file [‘type’];
$size = $file [‘size’];
$stored = $file [‘tmp_name’];
if(file_exists(“storimg/”.$_FILES[“file”][“name”]))
{
echo $_FILES[“file”][“name”] . “alredy exists. “;
}
else
//if($name!=””)
{
if(move_uploaded_file ($stored,’storimg/’.$name))//image is a folder in which you will save image
{
$query=”insert into tbl_image set photo=’$name'”;
mysql_query ($query) or die (‘could not updated:’.mysql_error());
echo “Your image upload successfully !!”;
}
}
}
?>
<html >
<head>
</head>
<body>
<form name=”form” method=”post” enctype=”multipart/form-data”>
Photo <input type=”file” name=”file” />
<input type=”submit” name=”submit” value=”submit” />
</form>
</body>
</html>
Select images in tabla from database
<?php
$con=mysql_connect (“localhost”,”root”,””);
mysql_select_db(“ratnesh”,$con);
$sql=”select * from tbl_image where id=’1′ and status=’0′”;
$query=mysql_query($sql);
while($row=mysql_fetch_array($query))
{
$image=$row [‘photo’];
?>
<img src=”img/<?php echo $image; ?>” width=”360″ height=”150″>
<?php
}
?>
Display images from database (display images with data in table )
<?php
$con=mysql_connect(“localhost”,”root”,””);
if(!$con)
{
die(‘could not connect:’ .mysql_error());
}
mysql_select_db(“ratnesh”,$con);
$result=mysql_query(“Select * from data “); ?>
<table border=’1′ width=’50%’ >
<tr>
<th>FirstName</th>
<th> LastName</th>
<th> Email</th>
<th> Password</th>
<th> Cpassword</th>
<th> Education</th>
<th>Phonumber</th>
<th>image</th>
</tr>
<?php
while ($row = mysql_fetch_array($result))
{
echo “<tr>”;
echo “<td>”.$row[‘FirstName’].”</td>”;
echo “<td>”.$row[‘LastName’].”</td>”;
echo “<td>”.$row[‘Email’].”</td>”;
echo “<td>”.$row[‘Password’].”</td>”;
echo “<td>”.$row[‘Cpassword’].”</td>”;
echo “<td>”.$row[‘Education’].”</td>”;
echo “<td>”.$row[‘Phonumber’].”</td>”;
echo “<td>”.$row[‘image’].”</td>”;
//display image and data in use cmand show i tble
echo “<td><img width=’50px’ height=’50px’ src=’storimg/”.$row[‘image’].”‘></td>”;
//echo “<td>”.$row[‘image’].”width=’5px’ height=’5px'</td>”;
echo “</tr>”;
}
echo “</table>”;
mysql_close($con);
?>
How to create custom post in wordpress
1 Vote
Custom post types can easily be added to any theme by updating our functions.php file. If you haven’t played around with CPTs yet, I would encourage you to read To create our CPT, let’s update our functions.php with the following:
// Custom Post types for Feature project on home page
add_action(‘init’, ‘create_feature’);
function create_feature() {
$feature_args = array(
‘labels’ => array(
‘name’ => __( ‘Feature Project’ ),
‘singular_name’ => __( ‘Feature Project’ ),
‘add_new’ => __( ‘Add New Feature Project’ ),
‘add_new_item’ => __( ‘Add New Feature Project’ ),
‘edit_item’ => __( ‘Edit Feature Project’ ),
‘new_item’ => __( ‘Add New Feature Project’ ),
‘view_item’ => __( ‘View Feature Project’ ),
‘search_items’ => __( ‘Search Feature Project’ ),
‘not_found’ => __( ‘No feature project found’ ),
‘not_found_in_trash’ => __( ‘No feature project found in trash’ )
),
‘public’ => true,
‘show_ui’ => true,
‘capability_type’ => ‘post’,
‘hierarchical’ => false,
‘rewrite’ => true,
‘menu_position’ => 20,
‘supports’ => array(‘title’, ‘editor’, ‘thumbnail’)
);
register_post_type(‘feature’,$feature_args);
}
add_filter(“manage_feature_edit_columns”, “feature_edit_columns”);
function feature_edit_columns($feature_columns){
$feature_columns = array(
“cb” => “<input type=\”checkbox\” />”,
“title” => “Title”,
);
return $feature_columns;
}
//Add Meta Boxes
add_action( ‘add_meta_boxes’, ‘cd_meta_box_add’ );
function cd_meta_box_add()
{
add_meta_box( ‘my-meta-box-id’, ‘Link to Project’, ‘cd_meta_box_cb’, ‘feature’, ‘normal’, ‘high’ );
}
function cd_meta_box_cb( $post )
{
$url = get_post_meta($post->ID, ‘url’, true);
wp_nonce_field( ‘my_meta_box_nonce’, ‘meta_box_nonce’ ); ?>
<p>
<label for=”url”>Project url</label>
<input type=”text” name=”url” id=”url” value=”<?php echo $url; ?>” style=”width:350px” />
</p>
<?php
}
add_action( ‘save_post’, ‘cd_meta_box_save’ );
function cd_meta_box_save( $post_id )
{
// Bail if we’re doing an auto save
if( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) return;
// if our nonce isn’t there, or we can’t verify it, bail
if( !isset( $_POST[‘meta_box_nonce’] ) || !wp_verify_nonce( $_POST[‘meta_box_nonce’], ‘my_meta_box_nonce’ ) ) return;
// if our current user can’t edit this post, bail
if( !current_user_can( ‘edit_post’ ) ) return;
// now we can actually save the data
$allowed = array(
‘a’ => array( // on allow a tags
‘href’ => array() // and those anchors can only have href attribute
)
);
// Probably a good idea to make sure your data is set
if( isset( $_POST[‘url’] ) )
update_post_meta( $post_id, ‘url’, wp_kses( $_POST[‘url’], $allowed ) );
}
2 Next, we need to pull the content out and display it. For the purpose of this demo, I’ve created a front-page.php which as the title says, I’m using on my home page.
In order to display the content, I’ll use the WP_query function inside like so:
<section id=”featured-slider”>
<div id=”slides”>
<div class=”slides_container”>
<?php
$loop = new WP_Query(array(‘post_type’ => ‘feature’, ‘posts_per_page’ => -1, ‘orderby’=> ‘ASC’));
?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class=”slide”>
<?php $url = get_post_meta($post->ID, “url”, true);
if($url!=”) {
echo ‘<a href=”‘.$url.'”>';
echo the_post_thumbnail(‘full’);
echo ‘</a>';
} else {
echo the_post_thumbnail(‘full’);
} ?>
<div class=”caption”>
<h5><?php the_title(); ?></h5>
<?php the_content();?>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
jquery
How to change image on mouse over
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.2.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#imgdetails”).hover(function() {
$(this).attr(“src”, “http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/2.jpg”);
}, function() {
$(this).attr(“src”, “http://d3l2031tfshpe7.cloudfront.net/Images/Product/DRS00420A/1.jpg”);
});
})
$(function() {
$(“#img”).hover(function() {
$(this).attr(“src”, “http://localhost/marketingcertifiednew/wp-content/uploads/2014/11/marketing-certified-home59ro.jpg”);
}, function() {
$(this).attr(“src”, “http://localhost/marketingcertifiednew/wp-content/uploads/2014/09/marketing-certified-home59.jpg”);
});
})
</script>
2 How to change image on mouse over
<span class=”test” style=”float: left; margin-top: -10px;”;>
<a href=”#s-pricing” onmouseover=”document.getElementById(‘myimage1′).src=’wp-content/uploads/2014/11/marketing-certified-home59ro.jpg';”
onmouseout=”document.getElementById(‘myimage1′).src=’wp-content/uploads/2014/09/marketing-certified-home59.jpg';”>
<img width=”171″ height=”45″ src=”wp-content/uploads/2014/09/marketing-certified-home59.jpg” id=”myimage1″ /></a></span>
How to use random image in JavaScript
how to change image on reload/refresh website
<div id=”box”>
<a href=”#”> <img id=”image” /></a>
</div>
<script>
var images = [
“wp-content/themes/marketingcertified/image/owl-mascot.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot2.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot3.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot4.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot5.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot6.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot7.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot8.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot9.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot10.jpg”,
“wp-content/themes/marketingcertified/image/owl-mascot11.jpg”];
function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById(‘image’).src = images[x];
}
randImg();
</script>
how to show a form in popup by jquery
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’block';document.getElementById(‘fade’).style.display=’block'”>here</a></p>
<div id=”light” class=”white_content”>This is the lightbox content. <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’none';document.getElementById(‘fade’).style.display=’none'”>Close</a></div>
<div id=”fade” class=”black_overlay”></div>
</body>
No comments:
Post a Comment