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
Related
I have homepage which is created by using multiple small template pages in wordpress. I have set menus on it . now i want to go on particular section/ template using menu. like if i press contact menu button then it should go smoothly downwards of homepage where the contact template has been called. I am using "Page scroll to id" plugin of wordpress but its not working. I have also seen that this plugin work when the page is created by dashoard page. Please help me , how can i navigate to my template page/section using this plugin. If any other plugin is there , please tell me about it . i will try to use that too.
Thanks
To create smooth scroll on link click follow the below steps :
Step 1: Add section ids in menu href including #section1 from admin section Appearance >> Menu .
Step 2: Create section or div with id name section1.
<div id="section1"></div>
Step 3: Paste the below code under your custom js file.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I hope it will helps you.
The code that Marketo provided us with currently launches a lightbox on page load, but we would like the lightbox to be triggered when a button is clicked.
We would very much appreciate being pointed in the correction direction on how to go about achieving this. I have looked though the Marketo Developer documentation, and through stackoverflow questions tagged 'Marketo' but have been unsuccessful finding an example of how to do this.
Here is the code Marketo has provided us with. I have removed unique identifying numbers like Munkin and formId.
<script src="//app-ab02.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_number"></form>
<script>MktoForms2.loadForm("//app-ab02.marketo.com", "number", number, function (form){MktoForms2.lightbox(form).show();});</script>
Try this
Put your form anywhere on the page
<script src="//app-ab02.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_number"></form>
Then
<script type="text/javascript">
$("#popup-link").click(function(e){
e.preventDefault();
MktoForms2.loadForm("//app-sjh.marketo.com", "mktoForm_ID", "mktoForm_number", function (form){MktoForms2.lightbox(form).show();
// Hide the form and display a thank you message
form.onSuccess(function(form){
formElem = this.formElem[0];
formParent = formElem.parentNode;
formParent.removeChild(formElem);
formParent.innerHTML = '<h3>Thank you!</h3>';
});
});
});
</script>
I've created a google content experiment without redirects using the docs.
The basic implementation involves a javascript snippet that uses the following code to choose the version of the experiment:
<!-- Load the Content Experiment JavaScript API client for the experiment -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script>
<script>
// Ask Google Analytics which variation to show the user.
var chosenVariation = cxApi.chooseVariation();
</script>
<!-- Load the JQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
function() {}, // Original: Do nothing. This will render the default HTML.
function() { // Variation 1: Banner Image
document.getElementById('banner').src = 'bay-bridge.jpg';
},
function() { // Variation 2: Sub-heading Text
document.getElementById('heading').innerHTML = 'Look, a Bridge!';
},
function() { // Variation 3: Button Text
document.getElementById('button').innerHTML = 'Learn more';
},
function() { // Variation 4: Button Color
document.getElementById('button').className = 'button button-blue';
}
];
// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(
// Execute the chosen view
pageVariations[chosenVariation]
);
</script>
However, when I visit the page using an incognito window, I only see the first variation of the experiment. When I check chosenVariation in the console, it's always 0. In fact, when I call cxApi.chooseVariation(); in the console, it always returns 0.
Is this because google recognizes my incognito browser windows, or is something broken with cxApi.chooseVariation(); or in my implementation?
I had the same problem, 100% of the sessions were given the original (0) variation. In order to fix the problem, I added the javascript code provided by the experiment. Go to your experiment (edit), click Setting up your experiment code, manually insert the code, copy the code in there.
Now since you (and I) don't want to have a redirect, remove this part at the end of the code <script>utmx('url','A/B');</script>. If your page is templated, you can use a variable and insert your experiment key (not experiment id) where you see var k='########-#'
Now either very few people use the experiments in a client-only fashion or we're totally stupid because it would seem to me that the guide is wrong and there's absolutely no documentation that shows a working client-only setup.
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...
Thanks for reading. I have some codes on my wordpress site, the first one adds an overlay over an image with a color, the article title and a link to go to the project. The second code adds an ajax pagination using jQuery.
The thing is that i have my projects with images and the jquery overlay owrking perfect, but when they click on the previous projects link that calls the ajax pagination, the jquery overlay stops working.
I have been trying different options, but maybe i'm not on the correct way to solve it. Does anyone has a clue?
Thanks in advance.
The codes:
// PORTFOLIO HOVER EFFECT
jQuery('ul.portfolio-thumbs li').hover(function(){
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
});
// POSTS NAVIGATION
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
I've found the solution in the same day and #BrockAdams helped me with the doubts. I'm putting here the code because it can be helpful for someone.
jQuery('ul.portfolio-thumbs li').live('hover', function(event){
if (event.type == 'mouseenter') {
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
} else {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
}
});
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
You can post answers to your own question.
And, you needed to use live()Doc on the hover, because the pagination presumably loads in new portfolio-thumbs lis.
Without the live(), these new lis would have no events attached to them (unless you re-called jQuery('ul.portfolio-thumbs li').hover after every pagination event).
Live is easier, and avoids the pitfall of having multiple copies of the same event-listener attached to an element.
And, yes, you can use both live() calls (or more) on the same page without problems.