I have setup woocommerce store. In my store every product have more then 16 gallery images.
So i want to show first 8 gallery images then below show one link "See more sample configuration" on click collapsible event work and then below show another 8 gallery images. See this screen shot -> http://nimb.ws/2buKoh
For this my requirements i do research on google but can't find any solutions. So any one know solutions then please help me.
Thanks,
Ketan.
You can try this jquery code.You need to add this jQuery into your theme option of bellow the wp_footer() in footer.php
<script type="application/javascript">
jQuery(document).ready(function () {
jQuery('.images').append('<div id="loadMore">See more sample configuration</div><div id="showLess">Hide</div>');
jQuery(".thumbnails a").hide();
size_li = jQuery(".thumbnails a").size();
x=3;
jQuery('.thumbnails a:lt('+x+')').show();
jQuery('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+3 : size_li;
jQuery('.thumbnails a:lt('+x+')').show();
});
jQuery('#showLess').click(function () {
x=(x-5<0) ? 3 : x-3;
jQuery('.thumbnails a').not(':lt('+x+')').hide();
});
});
</script>
after added the code, go to your product page and click on See more sample configuration.Try this then let me know the result.
Thanks
I want to automatically add
class="highslide" onclick="return hs.expand(this,config1)"
to every image I add to a post or page so that I have
<a class="highslide" onclick="return hs.expand(this,config1)" href="http://mysite.net/wp-content/uploads/2013/11/image.jpg" target="_blank"><img class="alignleft wp-image-659" alt="" src="mysite.net/wp-content/uploads/2013/11/image.jpg" width="108" height="68" /></a>
I have looked for hrs and have found nothing that will do this, does anyone know of a plugin or a code snippet that will do this
Thanks
I created a little snipped for you.
/**
* Function customizes a HTML code to be inserted when inserting a media file through "Add media" button
* #param string $insert an original HTML code to be modified
* #return string
*/
function custom_edit_media_insert($insert)
{
//check, whether you are inserting an image wrapped in anchor
if(preg_match('/^(<a).*(<img).*(<\/a>$)/', $insert))
$insert = str_replace('<a', '<a class="highslide" onclick="return hs.expand(this,config1)"', $insert);
return $insert;
}
add_filter('media_send_to_editor', 'custom_edit_media_insert');
However, I strongly engourage you to use external javascript for such purposes.
EDIT:
By your approach, giving every element onclick… code you are creating useless code. In another words, in mordern world amongst developers, you should use external javascript <script src="script.js"></script> and your function plate there like (via jQuery e.g.)
$('.parent a').click(function(){
return hs.expand($(this),config1);
});
I have MySQL database with multiple URL's.
Each URL is displayed in one iframe, so 3 URL's = 3 iframes. I display them like this.
...
$resu = mysql_fetch_array ($consultation);
echo "<iframe src='".$resu['URL']."' onload='load(this)' id='iframe'></iframe>";
...
With this script I'm able to know the URL of the iframe clicked (not exactly, besides it doesn't work in jsFiddle but in my PC yes. (http://jsfiddle.net/7UxHv/)).
<script type='text/javascript'>
$(window).load(function(){
$('iframe#iframe').load(function(){
alert($('#iframe').attr('src'));
});
});
</script>
But really it displays the first database row and not the one clicked.
Anyway to display the one clicked with that script or another form to do this? Thanks.
edit:
Note you are generating multiple elements with the same id.. id should be unique.
This might be why you get only the first row to work.
I think the below code should work:
Html:
<iframe src='.$resu['URL'].' onload='loadIframe(this)' scrolling='no'></iframe>
JS:
window.loadIframe = function(frame) {
alert("Loaded "+$(frame).attr('src'));
}
Try this... change 'src' to 'data-src'... and try the following...
echo "<iframe data-src='".$resu['URL']."' onload='load(this)' id='iframe'></iframe>";
$('#iframe').click(function() {
alert($('#iframe').data('src'));
});
also instead of using onload try using onclick()...
Might work...
I am trying to get my gcal to load, but it won't and I am not sure why.
Here is my code:
<script src="<?php echo base_url();?>assets/js/jquery-1.8.2.js"></script>
<script src="<?php echo base_url();?>assets/js/fullcalendar.js"></script>
<script type='text/javascript' src="<?php echo base_url();?>assets/js/gcal.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'https://www.google.com/calendar/feeds/hq#eschamp.com/public/basic/'
}
});
});
The calendar loads fine, but I see no events on it. You can see it here for an example: http://www.eschamp.com/index.php/schedule
Looking in the error console it seems to load fine. If I try a different gcal url it complains, so it seems to be loading proper. So I am not sure what's up.
Any help would be appreciated
Just use
events: 'https://www.google.com/calendar/feeds/hq#eschamp.com/public/basic/'
if you don't want to specify any other options. You only need to use url: if you want to set other calendar options like className
Let me know if this helps!
Perhaps the calendar is not set to public?
I guess that would make the URL valid but the events not visible.
Would you give it a try?
I know there is at least 1 other post on SO dealing with this but the answer was never exactly laid out.
I am working in a WP child theme in the head.php document. I have added this in the head:
<link type="text/css" href="http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="Stylesheet" />
<?php
wp_enqueue_style('template-style',get_bloginfo('stylesheet_url'),'',version_cache(),'screen');
wp_enqueue_script('jquery-template',get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css');
wp_enqueue_script('jq-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js ');
wp_enqueue_script('jq-ui-min', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js' );
?>
and I added this in the body:
<script>
jQuery(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
but no dice. My div shows as standard div.
Any ideas at all? I know that top stylesheet should be called with enqueue but that shouldn't stop this from working.
WordPress jQuery is called in no-conflict mode:
jQuery(document).ready(function($) {
$('#dialog' ).dialog();
});
Also jQuery UI is loading before jQuery. You're getting 2 javascript errors:
Uncaught ReferenceError: jQuery is not defined
103Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function
The first error is from jQuery UI loading before jQuery and the second is because the $ is not recognized in no-conflict mode.
Remove any of the inline <script src= tags and the call to the custom.css in header php and add this function to your child theme functions.php file to load the scripts. WordPress will put them in the right order for you.
add_action( 'init', 'frontporch_enqueue_scripts' );
function frontporch_enqueue_scripts() {
if (!is_admin() ) {
wp_enqueue_script( 'jquery' );
wp_register_script( 'google-jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js', array( 'jquery' ) );
wp_register_script( 'jquery-template', get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
wp_register_style( 'jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true);
wp_register_style( 'template-style', 'http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css', true);
wp_enqueue_style( 'jquery-style' );
wp_enqueue_style( ' jquery-template' );
wp_enqueue_script( 'google-jquery-ui' );
wp_enqueue_script( 'jquery-template' );
}
}
I'm building a custom plugin on WP admin to insert data on custom MySQL tables. For nearly a week I was trying to do a confirmation dialog for a delete item event on a Wordpress table. After I almost lost all my hair searching for an answer, it seemed too good and simple to be true. But worked. Follows the code.
EDIT: turns out that the wp standard jquery wasn't working properly, and the Google hosted jQuery included in another class was making the correct calls for the JS. When I removed the unregister/register added below, ALL the other dialog calls stopped working. I don't know why this happened, or the jQuery version included in this particular WP distribution, but when I returned to the old registrations, using Google hosted scripts as seen below, everything went back to normality.
On PHP (first, register and call the script):
add_action('admin_init', 'init_scripts_2');
function init_scripts_2(){
///deregister the WP included jQuery and style for the dialog and add the libs from Google
wp_deregister_script('jquery-ui');
wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js');
wp_deregister_style('jquery-ui-pepper-grinder');
wp_register_style('jquery-ui-pepper-grinder', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css');
wp_enqueue_script('jquery-ui'); ///call the recently added jquery
wp_enqueue_style('jquery-ui-pepper-grinder'); ///call the recently added style
wp_deregister_script('prevent_delete'); ///needed the deregister. why? don't know, but worked
///register again, localize and enqueue your script
wp_register_script('prevent_delete', WP_PLUGIN_URL . '/custom_plugin/js/prevent_delete.js', array('jquery-ui'));
wp_localize_script('prevent_delete', 'ajaxdelete', array('ajaxurl' => admin_url('admin-ajax.php')));
wp_enqueue_script('prevent_delete');
}
Next, if you're opening the dialog on a click event, like me, make sure you ALWAYS use class instead of id to identify the button or link later, on jQuery.
<a class="delete" href="?page=your_plugin&action=delete">Delete</a>
We also need to use a tag that holds the dialog text. I needed to set the style to hide the div.
<div id="dialog_id" style="display: none;">
Are you sure about this?
</div>
Finally, the jQuery.
/*jslint browser: true*/
/*global $, jQuery, alert*/
jQuery(document).ready(function ($) {
"use strict";
///on class click
$(".delete").click(function (e) {
e.preventDefault(); ///first, prevent the action
var targetUrl = $(this).attr("href"); ///the original delete call
///construct the dialog
$("#dialog_id").dialog({
autoOpen: false,
title: 'Confirmation',
modal: true,
buttons: {
"OK" : function () {
///if the user confirms, proceed with the original action
window.location.href = targetUrl;
},
"Cancel" : function () {
///otherwise, just close the dialog; the delete event was already interrupted
$(this).dialog("close");
}
}
});
///open the dialog window
$("#dialog_id").dialog("open");
});
});
EDIT: The call for the standard wp dialog style didn't work after all. The "pepper-grinder" style made the dialog appear correctly in the center of the window. I know the looks for the dialog are not very easy on the eye, but i needed the confirmation dialog and this worked just fine for me.
The dialog div is created AFTER when you're trying to act upon it. Instead, you should use:
$(document).ready(function() {
$( "#dialog" ).dialog();
});