prettyPhoto product slider - How to center an image - javascript

I am trying to set up a WooCommerce site (https://storetest.rigwald.com/?cmp_bypass=test), which uses a product slider based on prettyPhoto.js. The problem is that the images are not centered in the middle of the slider, they are displayed to the left slide of the slider canvas/window. Is there a way to force the images to be centered in the slider? The theme creators appear to have no concept of their own product, simply telling me to change the image size for any products shown in the slider to 800x512, even though product photos are supposed to be 600x600 or 800x800. They are just attempting to have me fill the slider "canvas", so the off-center images aren't noticable.
I am not a coder. I can poke around Chrome developer tools and the theme editor in Woocommerce/Wordpress, which is how I found out the slider is using prettyPhoto.
Thank you for your help with this!

Looking at your theme it seems that all you need is some css to fix the problem.
I have created an action that inserts some inline style that should help with that issue.
add_action('wp_head', 'bt_custom_inline_style');
function bt_custom_inline_style () {
?>
<style>
.big-slider .home-slider li {
display: flex;
justify-content: center;
}
</style>
<?php
}
You can copy paste this code to your functions.php file

Related

How To Make A Loading Screen with Material Framework?

I am pretty sure there are many articles on this. In fact, I have seen many that I have used before. The thing is, I am using Material Design by Google. So they have loading elements already in the framework. It looks something like this:
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
Previously I have had trouble with this kinda thing. If someone could help me out, that would be great.
Here is the link to what the loading animation looks like:
https://getmdl.io/components/index.html#loading-section (it is the spinner).
MDL spinner on page load solution
MDL just provides the spinner and it's up to the developer to integrate it into the page for what ever your need's may be. In this case you want to use it on page load.
Placing the spinner
To create a loading spinner you first need to place a <div class="mdl-spinner mdl-js-spinner is-active"> at the top of your document. I suggest right above the closing </head> tag.
Centering the spinner.
To center the spinner you can do it with flex box like so.
Place the spinner inside a container above the closing </head>
HTML
<div class="spinner">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</div>
CSS
Centering the spinner with flexbox. The spinner is set to display:none to hide it from view atm . Adding a class of spinner-on and giving it the display property of flex that we trigger on with jQuery when we want to show it.
$spinner-size:100px;
html, body, .spinner{
height:100%;
overflow: hidden;
}
.mdl-spinner{
height:$spinner-size;
width:$spinner-size;
}
.spinner{
position:relative;
display: none;
align-items: center;
justify-content: center;
}
.spinner-on {
display: flex;
}
Trigger with jQuery
With jQuery we trigger our spinner-on class which brings spinner into view. Then we use fading functions to fade in the spinner and fade it out after a set amount of time. Overflow is also set se we can now scroll the page.
$(function() {
var overflow = $('body,html, .spinner');
$(".spinner").addClass('spinner-on');
$(".spinner").fadeOut(2000, function() {
$("body").fadeIn(2000);
overflow.css('overflow','visible');
});
});
DEMO

Using bootstrap grid with thumbnail grid with expanding preview

I'm creating a site and am using this bootstrap based theme as a starting base. I've also incorporated the very nice Thumbnail Grid with Expanding Preview as described in this Codrops tutorial.
What I'm trying to do is keep the portfolio grid that you can see in the theme where all the preview images are responsive bootstrap col-lg-4 col-sm-6 elements so that they will expand & shrink to fill the full browser width and adjust the number of elements per row depending on screen width.
The JS that drives the thumbnail grid with expanding preview effect is grid.js and I had thought that if I made the following adjustments that it would apply the same effect:
var Grid = (function() {
// grid selector
var $selector = '#og-grid',
// list of items
$grid = $( $selector ),
// the items
$items = $grid.children( '.grid-item' ),
// ... etc ...
i.e.: I've set items to be .grid-item instead of li and updated the bootstrap divs so that they have this class too.
I've uploaded a snapshot of where I'm at right now here which basically has the thumbnail grid with expanding preview effect implemented as per the Codrops tutorial, but I'm hoping to be able to keep the responsive benefits associated with the original theme's portfolio section. Does anyone have any suggestions as to how I might be able to achieve what I'm hoping to do? Please just ask if further clarification is required on what I'm trying to figure out.
As suggested by #KarlDawson, I just set up some media queries and the items rendered as expected:
#media (min-width: 768px) {
.og-grid li {
width: 50%;
}
}
#media (min-width: 1200px) {
.og-grid li {
width: 33.33333333333%;
}
}

Z-Index on Fixed element outside of FullPage.js

I'm trying to create what I think would be a cool content effect, whereby a dark semi-transparent background covers the entire screen while certain content rises above it, thus creating a highlight effect. I'm a massive JS amateur but I've been using fullPage.js (https://github.com/alvarotrigo/fullPage.js/) to create a scrolling content area, and also used a small drop down jQuery within the FullPage. I set up a function to bring my darkness div to the foreground, and it covers the entire screen as I expected, however, the drop down list within the fullPage simply won't rise above it, no matter what I try.
CSS of the darkness div:
#darkness {
background:rgba(0, 0, 0, 0.5);
display:none;
height:100%;
left:0;
position: fixed;
top:0;
width:100%;
z-index:10;
}
This is my JS function:
function thedarkside () {
console.log ('the dark side');
$('#darkness').fadeTo(200, 1);
}
All of that works as intended. However I can't get my drop down #dd to have a z-index higher than darkness div. This is the general structure of the FullPage.js:
Darkness -->
<-- Darkness
Fullpage -->
Section -->
Form -->
Dropdown -->
<-- Dropdown
<-- Form
<-- Section
<--Fullpage
I set the z-index of drop down to something ridiculous like 100, as I don't want any of the other elements to be above the darkness div. I really only want Dropdownto be above. Anyway if anyone could help me achieve this affect I'd really appreciate it. I'm ok if the solution lies in JS as opposed to CSS.
Thanks,
Mike
It took the JSFiddles for me to discover why it wasn't happening. I had to turn off the css3 flag on start of the FullPage.js and now it works.
Hope this helps anyone else who experiences something similar.

jquery .hide() function - Hide mobile, Display Desktop

I'll try my best to set up my scenario so that you can understand my question.
My site is currently taking advantage of css media queries to span between screen resolutions. I have a main drilldown menu that can not be hidden on page load, otherwise the menu will not correctly calculate it's height, and will not display properly.
As a way to still be able to hide this menu when needed, I have found a workaround that hides the menu, yet still allows the menu to correctly calculate it's height on page load.
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
This is great for pages that do not require the main menu to be displayed initially on both mobile and desktop resolutions. However, for my product pages this solution will not work. I need the menu to hide on load for mobile resolutions, but also display on load for desktop resolutions. Can anyone think of a solution that will work? I'm stumped. Here is the HTML:
<div class="drill-down-wrapper hide-menu hide-on-load hide-pd-page">
<div id="drilldown-breadcrumbs" class="breadcrumbs skin-colorful"></div>
<div id="drilldown" class="skin-colorful">
<!-- #Include virtual="Menu.txt" -->
</div>
</div>
Use media queries to hide and show the menus based on screen resolutions.
Rather than jQuery, try using CSS to show/hide elements. You can use the display rule to do so. Just as an example:
.hide-menu-on-load {
display: none;
}
#media screen and (max-width: 680px) {
.hide-menu-on-load {
display: block;
}
}
Note: display: none removed the element from the flow of the page. visibility: hidden keeps the element's flow on the page, yet simply removes it from view

How to display disappearing Pagination Box

Good day guys. I just wanna ask from you how can I make the pagination control box as shown in the image below appear.This will appear only when I hovered in the testimonial div. The control is along with the theme features(wordpress) and it seems it don't have the option to make it appear by default. I tried to apply styles Opacity:1 and Visibility:visible but these didn't work. I think it is on the javascript and I don't know how to trace down its code. This is the link of the site is http://67.222.16.144/~lasikoma/.
Any help would greatly appreciated.
<style>
.ether-ctrl-wrap {
display: block !important;
}
</style>
Add this style somewhere convenient.

Categories

Resources