Hi i am creating popup plugin in WordPress for that i am inserting data in database through ajax. My code for the popup plugin everything is working fine till jQuery but after that the data is not inserting into database.
Well this code is working fine for me now. Thanks for all your help
<?php
/*
Plugin Name: SMS POPUP PLUGIN
Description: SMS POPUP PLUGIN
Version: 1.0
License: Plugin comes under GPL Licence.
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
if ( version_compare( get_bloginfo( 'version' ), '3.9', '<' ) ) {
wp_die("You must update WordPress to use SMS Factory Bulk SMS Service!");
}
include_once(ABSPATH.'wp-admin/includes/plugin.php');
function sfp_popup() {
global $wpdb, $wnm_db_version;
$sfp_sql = array();
//sms table
$sfp_content = $wpdb->prefix . "sfp_content";
if( $wpdb->get_var("show tables like '". $sfp_content . "'") !== $sfp_content ) {
$sfp_sql[] = "CREATE TABLE ". $sfp_content . " ( sfp_id int(11) NOT NULL AUTO_INCREMENT, sfp_name varchar(256) NOT NULL, sfp_phone int(11) NOT NULL, sfp_pwd varchar(100) DEFAULT NULL, sfp_email varchar(100) DEFAULT NULL, sfp_query varchar(256) DEFAULT NULL, PRIMARY KEY (sfp_id) ) ";
}
if ( !empty($sfp_sql) ) {
require_once(ABSPATH."wp-admin/includes/upgrade.php");
dbDelta($sfp_sql);
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
add_option("wnm_db_version", $wnm_db_version);
}
}
register_activation_hook(__FILE__, 'sfp_popup');
add_action( 'wp_head', 'enque_sfp_script', 100 );
function enque_sfp_script(){
//Include Javascript library
wp_enqueue_script('sfp_script', plugins_url( '/js/demo.js' , __FILE__ ) , array( 'jquery' ));
// including ajax script in the plugin Myajax.ajaxurl
wp_localize_script( 'sfp_script', 'sfpAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));
}
function sfp_insert(){
global $wpdb;
$sfp_table = $wpdb->prefix."sfp_content";
$name = $_POST['sf_name'];
$phone = $_POST['sf_phone'];
$message = $_POST['sf_message'];
$wpdb->insert(
$sfp_table,
array(
'sfp_name' => $name,
'sfp_phone' => $phone,
'sfp_query' => $message
),
array(
'%s',
'%d',
'%s'
)
);
die();
return true;
}
add_action('wp_ajax_sfp_insert', 'sfp_insert');
add_action('wp_ajax_nopriv_sfp_insert', 'sfp_insert');
add_action( 'wp_footer', 'sf_display_popup', 100 );
function sf_display_popup(){
?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function($) {
setTimeout(function(){
$('#myModal').modal('show');
}, 3000);
$( "#sf-popup .sfname" ).keyup(function() {
if($(this).val() == '' || $( "#sf-popup .sfphone").val() == ''){
$('#sfpsubmit').attr('disabled','disabled');
} else{
$('#sfpsubmit').removeAttr('disabled');
$( ".sfp_btn" ).click(function() {
$('#myModal').modal('hide');
});
}
});
$( "#sf-popup .sfphone" ).keyup(function() {
var sfp_phone = $(this).val();
if(sfp_phone.length > 10){
$(this).val($(this).val().substr(0,10));
$('#sfpsubmit').removeAttr('disabled');
}
if(sfp_phone == '' || $( "#sf-popup .sfname").val() == '' || $.isNumeric(sfp_phone) == false || sfp_phone.length < 10){
$('#sfpsubmit').attr('disabled','disabled');
} else{
$('#sfpsubmit').removeAttr('disabled');
$( ".sfp_btn" ).click(function() {
$('#myModal').modal('hide');
});
}
});
});
</script>
<style>
.modal.fade .modal-dialog {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
top: 300px;
opacity: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.modal.fade.in .modal-dialog {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform: translate3d(0, -300px, 0);
transform: translate3d(0, -300px, 0);
opacity: 1;
}
textarea.col-md-12 {
margin: 25px 0;
}
</style>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<?php
echo "<form method='post' action='' name='sf-popup' id='sf-popup' >";
echo "<input type='text' name='sf_name' id='sf_name' placeholder='Name' class='col-xs-12 col-md-6 sfname'>";
echo "<input type='text' name='sf_phone' id='sf_phone' placeholder='98765-43210' class='col-xs-12 col-md-offset-1 col-md-5 sfphone'>";
echo "<textarea name='sf_message' id='sf_message' placeholder='Enter Your Query' class='col-md-12'></textarea>";
echo "</form>";
?>
</div>
<div class="modal-footer">
<?php
echo "<button id='sfpsubmit' class='btn btn-primary sfp_btn' name='sfpsubmit' disabled>Submit</button>";
?>
</div>
</div>
</div>
</div>
<?php
}
?>
and this is my jquery code
jQuery(document).ready(function(){
jQuery("#sfpsubmit").click(function(){
var name = jQuery("#sf_name").val();
var phone = jQuery("#sf_phone").val();
var message = jQuery("#sf_message").val();
alert(name + phone + message);
jQuery.ajax({
type: 'POST',
url: sfpAjax.ajaxurl,
data: {action: "sfp_insert","sf_name":name,"sf_phone":phone,"sf_message":message},
success: function(data){
alert("success"+data);
}
});
});
});
In your code you have enqueued the script then localized it ..
It should be first register then localize then Enqueue.
// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );
// Localize the script with new data
$translation_array = array(
'some_string' => __( 'Some string to translate', 'plugin-domain' ),
'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );
// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );
I have not tested your method , but this one is working for me.
Try this data:
data: {action: "post_word_count", sf_name:name},
use this debugin function
add_action('wp_ajax_post_word_count', 'post_word_count');
add_action('wp_ajax_nopriv_post_word_count', 'post_word_count');
function post_word_count(){
echo $_POST['sf_name'];
die();
}
Related
I customized a WordPress theme that has a fixed header (which includes logo and navbar) and everything works fine on desktop Chrome. However, when viewing on mobile phones, header gets cut off by ~20px when you scroll down the page.
I tried setting fixed height to various elements, adding overflow: auto, and even line-height:90px to .header, but nothing seems to work.
Website is http://nadjapavic.com
Relevant html:
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'pine' ); ?></a>
<div class="offcanvas">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'main-nav', 'container' => false ) ); ?>
</div><!-- /.offcanvas -->
<header class="header animated bounceInDown">
<div class="container">
<div class="row">
<div class="col-xs-6">
<?php pine_logo(); ?>
</div><!-- /.col -->
<div class="col-xs-6">
<button class="offcanvas-toggle">
<span></span>
<span></span>
<span></span>
</button><!-- /.main nav toggle -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
</header><!-- /.header -->
<?php if ( ! is_404() ) : ?>
<div class="header-spacer"></div><!-- /.header spacer -->
<?php endif; ?>
<div id="content">
Relevant css:
.header {
position: fixed;
width: 100%;
background-color: #fff;
padding: 20px 0;
z-index: 10000;
}
.header-spacer {
min-height: 90px;
}
Relevant javascript:
( function( $ ) {
'use strict';
var $body = $( 'body' );
var $header = $( '.header', $body );
var $headerSpacer = $( '.header-spacer', $body );
var $offcanvas = $( '.offcanvas', $body );
var $adminbar = $( '#wpadminbar', $body );
$( document ).on( 'ready', function() {
$adminbar = $( '#wpadminbar', $body );
} );
var adaptHeaderSpacerTimeout = null;
var nothing = null;
var $headerHeight = $header.outerHeight();
var adaptHeaderSpacer = function() {
if ( adaptHeaderSpacerTimeout !== null ) {
clearTimeout( adaptHeaderSpacerTimeout );
}
setTimeout( function() {
nothing = $header[0].offsetHeight;
$headerHeight = $header.outerHeight();
$headerSpacer.css( 'height', $headerHeight + 'px' );
if ( $body.hasClass( 'admin-bar' ) && $adminbar.length ) {
$offcanvas.css( 'top', ( $headerHeight + $adminbar.outerHeight() ) + 'px' );
}
else {
$offcanvas.css( 'top', $headerHeight + 'px' );
}
}, 400 );
};
adaptHeaderSpacer();
$( 'img', $header ).on( 'load', adaptHeaderSpacer );
$( document ).on( 'ready', adaptHeaderSpacer );
$( window ).on( 'resize orientationchange', adaptHeaderSpacer );
// Full-screen navigation
var $offcanvasToggle = $( '.offcanvas-toggle' );
$offcanvas = $( '.offcanvas' );
$offcanvasToggle.on( 'click', function() {
$offcanvas.toggleClass( 'offcanvas--active' );
$offcanvasToggle.toggleClass( 'offcanvas-toggle--active' );
} );
Please help.
You appear to be using Bootstrap or a similar grid system. In those systems, .rows need wrapping .containers. Add the container class to #content. The lack of .container makes the particular .row push the body larger giving you the effect you see.
I have a shopping bag icon under my posts(.wrap-front-page-shop) and I am trying to make it so that when you hover over the shopping bag icon the post excerpt will disappear(.front-page-post-excerpt). I'm trying to do this with css, and I think I have written the css right, but it is not working. Does anyone see my mistake, or is there a better way to fix this problem? Thanks in advance.
the css
.wrap-front-page-shop:not(:hover) .front-page-post-excerpt {
font-family: 'Crimson Text', serif;
font-size: 15px;
padding: 50px 50px;
display: block;
position:absolute;
}
.wrap-front-page-shop:hover .front-page-post-excerpt {
color: #ffffff;
visibility: hidden;
display: block;
position:absolute;
}
front-page-shop-the-post.php (the code is for the shopping icon and the actual shopping widget that shows up when you hover over the shopping icon - it works correctly)
<div class="wrap-front-page-shop">
<div class="front-page-shop-image"><img src="http://localhost:8888/wordpress/wp-content/uploads/2017/01/shopping-shopping-bag-icon.png" /></div>
<div class="shopthepost-widget-front">
<?php if (shortcode_exists('show_shopthepost_widget')) {
// Get the value of the custom field defined in the editor
$widgetId = get_post_meta(get_the_ID(), 'shortcode_id', true);
// Check if a value is set
if (!empty($widgetId)) {
$shortcode = '[show_shopthepost_widget id="'.$widgetId.'"]';
} else {
// or use a default widget
$shortcode = '[show_shopthepost_widget id="2379026"]';
}
echo do_shortcode($shortcode);
} ?>
</div>
</div>
the css to show the shopping widget when you hover over shopping icon)
.wrap-front-page-shop:not(:hover) .shopthepost-widget-front {
background-color: #ffffff;
visibility: hidden;
display: block;
position:absolute;
}
.wrap-front-page-shop:hover .shopthepost-widget-front {
display: block;
position:absolute;
margin-left:-225px;
bottom:150px;
background-color: #ffffff;
padding:30px;
}
.wrap-front-page-shop:hover .stp-control {
background-color: #ffffff !important;
display:inherit !important;
}
.wrap-front-page-shop {
display: inline-block;
}
.front-page-shop-image {
padding-right: 15px;
padding-bottom: 30px;
}
font-page.php that shows post excerpt code
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
} else { // Small posts ?>
<article <?php post_class( 'col-sm-6 col-md-4' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
JS I tried adding in for a possible solutions (did not work)
var _products = document.getElementById("front-page-shop-image"),
_hideIfHovered = document.getElementById("front-page-post-excerpt");
for (var i=0, e = _products.children; i < e.length; i++) {
e[i].onmouseenter = function() {
_hideIfHovered.style.display = "none";
}
e[i].onmouseleave = function() {
_hideIfHovered.style.display = "inherit";
}
}
i'm fighting with 3 columns landscape layout
i would like to print a page with 3 same fix with columns (unfortunately height are not the same, sometimes pages will break down to 2 pages)
what i would like to get in landscape is:
and what i'm getting is:
i cannot position this like it should be
can you advise me for some good solution for this crap please
any advice will be helpful, or maybe you whose already struggling with this problem and you can give my god direction please
i who's doing this not in landscape a few days ago and it whose working find
i didn't find a solution in web for this now
this is my starting code:
<?php
include("bd.php");
$print[] = null;
if(isset($_GET['option1'])) {
$print = $_GET['option1'];
}
$integerIDs = array_map('intval', explode(',', $print));
$usersIDS = implode(',', $integerIDs);
$requete = "SELECT p.pr_id as id, p.pr_nom as nom, p.pr_poids as poids, p.pr_ingredients as ingredients, p.pr_description as description, p.pr_valeurs_energetiques as valeurs_energetiques, p.pr_valeurs_nutritionnelles as valeurs_nutritionnelles, c.ca_nom as categorie, sc.sc_nom as sous_categorie, p.pr_enligne as enligne FROM produit p,categorie c,sous_categorie sc WHERE p.pr_id_categorie=c.ca_id AND p.pr_id_sous_categorie=sc.sc_id AND p.pr_id IN ({$usersIDS}) ORDER BY p.pr_id";
$resultat = mysql_query($requete);
$num_rows = mysql_num_rows($resultat);
mysql_query("SET NAMES 'utf8'");
?>
<!DOCTYPE html>
<html>
<head lang="fr">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link type="text/css" media="print" href="css/print.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css" >
/* PAGE SETTINGS */
.pageRotate
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rowMainPage {
}
.column {
width: 63mm;
border: solid #000000 1px;
float: left;
position:relative;
padding: 0;
}
/*PAGE ITEMS*/
.logoPuricard{
width: 7em;
top: 0;
margin-left: 38%;
margin-bottom: 5px;
}
/*PRODUCT IMAGE*/
.productImg {
width: 8em;
float: left
}
/*PRODUCT NAME*/
.nom {
font-size: 20px;
font-weight: bold;
margin-left: 2em;
}
/*Product weight*/
.weight {
margin-left: 4em !important;
}
/*Product description*/
.ProductDescription {
}
/*Product container of small peaces(Ingrédients,Valeurs énergétiques etc..) with black border*/
.divSmallContainer {
border: solid 1px #000000;
width: 100%;
/*margin-left: -1em;*/
}
/*Container for valor energetic*/
.valeurEnergContainer {
padding-left: 10px;
}
</style>
</head>
<body class="pageRotate" onload="window.print()">
<!--CONTAINER START-->
<div class="container">
<?php
if($num_rows > 0) {
/*
Start with variables to help with row creation;
*/
$startRow = true;
$postCounter = 0;
$idCheck = 0;
while($num_rows > 0){
$ligne = mysql_fetch_assoc($resultat);
if ($startRow) {
/*LOGO START*/
echo "<img class='logoPuricard' src='./images/logo.jpg'>";
/*LOGO END*/
/*PAGE ROW START*/
echo '<div class="row rowMainPage">';
// /*FIRST COLUMN START*/
// echo '<div class="col-md-12">';
echo "<!-- TEST 6 kolumn -->";
$startRow = false;
}
$postCounter += 1;
?>
<?php
$id = $ligne["id"];
$nom = $ligne["nom"];
$poids = $ligne["poids"];
$ingredients = $ligne['ingredients'];
$description = $ligne['description'];
$valeurs_energetiques = $ligne['valeurs_energetiques'];
$valeurs_nutritionnelles = $ligne['valeurs_nutritionnelles'];
?>
<!-- FIRST COLUMN START -->
<div class="col-md-4 column" >
<!-- Product IMG START -->
<?php if (file_exists('../Assets/produit_'.$id . ".png")) {?>
<img class="productImg" src="../Assets/produit_<?php echo $id; ?>.png" />
<?php } ?>
<!-- Product IMG END -->
<!-- Product NOM START -->
<?php if(isset($nom) && !empty($nom)){
echo "<p class='nom'>". utf8_decode($nom) ."</p><br>";
}?>
<!-- Product NOM END -->
<!-- Product WEIGHT START -->
<?php if(isset($poids) && !empty($poids)){
echo "<p class='weight'> Environ". utf8_decode($poids) . "g" ."</p><br>";
}?>
<!-- Product WEIGHT END -->
<!-- Product DESCRIPTION START -->
<?php if(isset($description) && !empty($description)){
echo "<p class='ProductDescription'>". utf8_decode($description) ."</p><br>";
}?>
<!-- Product DESCRIPTION END -->
<!-- Product INGREDIENT START -->
<?php if( $ingredients){
echo"<div class='divSmallContainer'>";
echo"<b style='text-decoration: underline;'> Ingrédients :</b><br><br>";
echo "<div class='valeurEnergContainer'> $valeurs_energetiques; </div>";
echo"</div>";
}
?>
<!-- Product INGREDIENT END -->
<?php
if($postCounter != 3 || $postCounter != 0) {
echo '</div>'; /*END OF COLUMN*/
}
if ( 3 === $postCounter ) {
echo ' </div>'; /*END OF COLUMN*/
echo '</div><!-- PAGE ROW END-->';
$startRow = true;
$postCounter = 0;
// echo "<span class='breakPage'></span>"; //add page break
}
--$num_rows;
}/*endWhile*/
if ($postCounter !== 0 ) {
echo '</div>';
}
}else {
echo '<div class="page-header"><h1>Pas des resultat</h1></div>';
echo ' <p>desole vous n\'avez pas choisir des produits</p>';
}
if ( 3 === $postCounter || $num_rows == 0 ) {
echo '</div><!-- END OF INTERNAL ROW -->';
$startRow = true;
$postCounter = 0;
}
?>
<!--CONTAINER END-->
</div>
</body>
</html>
There's no need to rotate the page, as this will do just that - rotate EVERYTHING. Just put all the CSS you want for your landscape print layout under the #media print{#page {size: landscape}} media query.
I'm trying to apply the Wookmark jQuery Plugin to my wordpress theme. The implementation takes place with a Loop, as the point of the subject is to create a visually pleasing portfolio.
For the subject i've registered a new type of post typed 'portfolio' and made a loop that distinguishes between posts with pictures and those without.
The problem is of course, that it doesn't work.
No returning errors, all scripts are in place [or so it seems to me] - but the posts do not receive whatever treatment [jQuery Voodoo] that the WookMark is supposed to apply. All I get all the posts, called in order.
I've enqueued the scripts into my theme through the functions.php file thus:
if ( !function_exists('core_mods') ) {
function core_mods() {
wp_enqueue_script('jquery-custom', get_template_directory_uri().'/assets/wookmark/libs/jquery.min.js' );
wp_enqueue_script('wookmark', get_template_directory_uri().'/assets/wookmark/jquery.wookmark.js', array('jquery-custom'), false, false);
}
}
add_action( 'wp_enqueue_scripts', 'core_mods' );
And the actual HTML of page-portfolio.php is as follows:
<?php get_header(); ?>
<?php query_posts('post_type=portfolio') ?>
<?php if (have_posts()) : ?>
<script type="text/javascript">
(function($) {
$('.masonry-object').wookmark({
align: 'center',
autoResize: false,
comparator: null,
container: $('#masonry-container'),
direction: undefined,
ignoreInactiveItems: true,
itemWidth: 0,
fillEmptySpace: false,
flexibleWidth: 0,
offset: 2,
onLayoutChanged: undefined,
outerOffset: 0,
possibleFilters: [],
resizeDelay: 50,
verticalOffset: undefined
});
})(jQuery);
</script>
<div id="masonry-container">
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="masonry-object" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('masonry-thumb'); ?>
</a>
<div class="masonry-title">
<?php echo the_title(); ?>
</div>
</div><!--.masonry-thumbnail-->
<?php elseif ( !has_post_thumbnail() ): ?>
<div class="masonry-details">
<h5>
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
<span class="masonry-post-title">
<?php the_title(); ?>
</span>
</a>
</h5>
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
</div><!--/.masonry-entry-details -->
<?php endif; ?>
</div>
<?php endwhile;?>
</div> <!-- End .masonry-container -->
<?php endif; ?>
<?php get_footer(); ?>
The CSS attached to the subject is such:
#masonry-container {
}
.post-area {
background: #ffffff ;
padding: 10px ;
}
.masonry-thumbnail {
}
.masonry-thumbnail img {
max-width: 100%;
height:auto;
}
.masonry-title {
position: absolute;
width: auto;
background-color: #ef9430;
color: #ffffff;
padding: 5px;
bottom: 0px ;
right: 0px;
}
.masonry-details {
padding: 10px;
background-color: #ffffff;
}
.masonry-object {
width: 25% ;
transition: all 1s ease;
}
.masonry-object:hover {
z-index: 2;
box-shadow: 0 0 20px #ffffff;
transition: all 1s ease;
}
(function($) {...})(jQuery); is not the same as $(function() {...});
First will be executed as soon as it is encountered, second one is jQuery shorthand for $( document ).ready(), and will run when the DOM is ready for JavaScript. The solution is to move the script below the #masonry-container div, or to use the ready event. There is a small problem in WordPress since default jQuery uses jQuery.noConflict() so $ is not referenced to jQuery object. My favorite solution for that is:
jQuery(function ($) {
});
It will run on document ready, with $ as a jQuery alias.
Side note: - use position: relative on #masonry-container div, as documentation says.
So I've been working on a filter system that allows me to display data from the Flickr API using phpFlickr as a library in CodeIgniter. I currently have it working well and is completely functional though the animation isn't where I want to have it. The issue that I'm having is when I switch the content to a different set of images it jerks into place and doesn't have a smooth animation. I'm not sure what the best method is to approach this animation as I'm pretty new to animating. Additionally if there are ways that I can clean up the code that would be great. Here's the code that I have.
Controller
$sets = $this->phpflickr->photosets_getList('66096679#N07');
$recent = $this->phpflickr->photos_search(array('privacy_filter' => 5, 'user_id' => '66096679#N07'));
foreach ($sets['photoset'] as $key => $value) {
$setid = $value['id'];
$photos_in_set = $this->phpflickr->photosets_getPhotos($setid, 'original_format', NULL);
$set_array[$key] = str_replace(' ', '-', $value['title']);
foreach ($photos_in_set['photoset']['photo'] as $key2 => $value2) {
$photo_array[$key][$key2]['set'] = str_replace(' ', '-', $value['title']);
$photo_array[$key][$key2]['title'] = $value2['title'];
$photo_array[$key][$key2]['photo_url_thumb'] = $this->phpflickr->buildPhotoURL($value2, "large");
$photo_array[$key][$key2]['photo_url_large'] = $this->phpflickr->buildPhotoURL($value2, "original");
}
}
$data['photos'] = array_reverse($photo_array);
$data['sets'] = $set_array;
View
<div id="filter">
All
<?php foreach($sets as $key => $value): ?>
<?= str_replace('-', ' ', $value) ?>
<?php endforeach; ?>
</div>
<section id="photos">
<?php foreach($photos as $photoset): ?>
<?php foreach($photoset as $key): ?>
<a class="fancybox-media" href="<?= str_replace('http:', '',$key['photo_url_large']) ?>" data-filter="<?= $key['set'] ?>">
<img src="<?= str_replace('http:', '', $key['photo_url_thumb']) ?>" />
</a>
<?php endforeach; ?>
<?php endforeach; ?>
</section>
Javascript
$(document).ready(function(){
$( '#filter a' ).click(function() {
var set = $(this).data('id');
$("#photos a[data-filter='"+ set +"']").fadeIn('20');
$("#photos a[data-filter!='"+ set +"']").fadeOut('0');
if($(this).data('id') === 'show-all') {
$('#photos a'). fadeIn('20');
}
});
});
Here is a link to a live example of the above code. If you can help me smooth out the animation that would be very much appreciated. In terms of how the data is setup, it seems like this is the best method because all of the images are listed as private so that they are only available on the website. Any help or direction is much appreciated, just at a stand still on this. If you have any questions about it then I'd be more than happy to update my question accordingly. Thanks a lot for the help in advance!
Figured out the smoother image animation code below
Javascript
$( '#filter a' ).click(function() {
var set = $(this).data('id');
$("#photos a[data-filter='"+ set +"']").addClass('in');
$("#photos a[data-filter='"+ set +"']").removeClass('out hidden');
$("#photos a[data-filter!='"+ set +"']").addClass('out hidden');
$("#photos a[data-filter!='"+ set +"']").removeClass('in');
if($(this).data('id') === 'show-all') {
$("#photos a[data-filter='"+ set +"']").addClass('out hidden');
$('#photos a').addClass('in');
$('#photos a').removeClass('hidden out');
}
$('#photos a').animate({
'left': '0',
'top':' 0'
});
});
CSS
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.in, .out {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 705ms;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 705ms;
}
.fade.out {
z-index: 0;
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;
opacity:0;
}
.fade.in {
opacity: 1;
z-index: 10;
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
}
The CSS is courtesy of this stackoverflow post. Now to figure out how to preload some of the images.