After installing the template, there was a problem with displaying images on the listing. I will just add that everything was fine on the old template, I reloaded all the pictures, and as I upload them, they all have a dimension of 800x800 px. How can I fix this problem?
Here is the image:
And here is the link to view problem.
Add the following CSS rules in your global.css:
#media(min-width:992px) {
.products-block.grid.first-in-line {
clear: left
}
.rtl .products-block.grid.first-in-line {
clear: right
}
}
Related
I'm having an issue with owlcarousel. When I use large images with items:1 everything works well and each slide contains 1 image. But when I use smaller images the items:1 option is ignored and the images display 4 per slide.
owlcarousel is version 2.3.4 as are the corresponding CSS files.
$(document).ready(function(){
$(".news-post-gallery").owlCarousel({
navigation : false, // Show next and prev buttons
autoplay:false,
items: 1,
loop:false,
margin: 10,
center: true,
nav: true,
navText: [
"<div>Left</div>",
"<div>Right</div>"
],
responsive:{
0:{
items:1,
}
}
});
});
My first guess is that this is a CSS issue. Mind you even the small images are not that "small", the large images that I used were like half my screen width.
Edit: navText is being ignored as well when small images are used.
The issue was another carousel being initialized targeting the owl-carousel class. This ended up initializing the one I needed with the wrong settings. The carousels initializations were coming from different templates so the result was only visible in the source once the page was loaded.
Adding $(...).owlCarousel('destroy'); before i initialized mine solved the problem.
Does anyone use Gemini by Yandex for testing css regression?
I faced with the following problem: need to test scroll in some page, but as I know, gemini capture whole page and show only that part which you set by adding .setCaptureElements('someElement').
E.g. I set capture element as html (which has 100% height) and my content is very huge, but gemini screenshot show up only cut over part of page without possibility to scroll cause page hasn't scroll as such...
Maybe some of you faced with same problem and have cool solution?
Thanks!
I had the necessity to make a screenshot of the page that has scrolling. I need the screenshot of the whole page and made changes which let me did it:
Used .setCaptureElements only for the element where is scrolling exist (not the whole body).
Added line compositeImage: true in configuration file.
gemini.suite('App-Name', function(test) {
test.setUrl('/')
.setCaptureElements('body')
.capture('Full Page', (actions) => actions.wait(2000))
});
//You can also use
.setCaptureElements('html') , if .setCaptureElements('body') is not working perfect for you.
You need to add this code in .gemini.js
browsers: {
'chrome-desktop': {
desiredCapabilities: {
browserName: 'chrome',
compositeImage: true,
screenshotMode: 'fullpage',
}
}
I am using to this slider on my website: http://flickity.metafizzy.co
The images load in squashed, but on refresh it sometimes appear as it should. I have decreased the images size, because I thought perhaps it was a loading issue, but that didn't help. I then added imagesLoaded, and that also did nothing.
I've attached a screenshot of how the images load. thanks!
Check that you are using flickity.pkgd.js and not just flickity.js.
Check that your option is set correctly
// with jQuery
$('.gallery').flickity({
imagesLoaded: true
});
-
// or with vanilla JS
new Flickity( '.gallery', {
imagesLoaded: true
});
-
<!-- or in HTML -->
<div class="gallery js-flickity" data-flickity-options='{ "imagesLoaded": true }'></div>
I'm trying to generate a PDF following the instructions given in http://railscasts.com/episodes/153-pdfs-with-prawn-revised
I'm able to put a background image on a specific page by doing this:
image "#{Rails.root.to_s}/public/document_assets/1_cover.png", :at => [bounds.left - 30, bounds.top + 50], :fit => [#width, #height]
I also got an image to render on the background of multiple pages at once using:
repeat(2..3) { canvas { image("#{Rails.root.to_s}/public/document_assets/1_bg.png", :at => bounds.top_left, :fit => [#width, #height]) } }
but that renders the image on top of everything else on the page, so no text or other content is visible.
I can't seem to figure out how to set the background image property as described in the Prawn documentation. Does anyone know how to do this?
Thanks!
I figured out the problem. You can set the background option in the PDF class where the margins get set in the railscast example. My issue was that the image I was using was not the right size. When I sized it to 8.5x11" and 72px per inch, it worked.
I made a vertical carousel which consists of images that when clicked should be visible fullscreen. But the problem is i'm not able to figure out how to make sure the fullscreen images are preloaded or something and works like the thumbnail images(getting preloaded).
I'm not sure what approach to follow for preloading the fullscreen images using css background and how to make sure the images fadeIn or just some transition when i click on the thumbnail in the carousel.
Please have a look at the following link where my code is uploaded.
http://www.lluvia.me/slideshow/carousel.html
If its convenient,feel free to check the script by checking the source.
Help would be appreciated. Thanks!
Found this post and figured it might help you, Preloading images with jQuery
Try and post some of the code in your body for future reference. :)
Quick and easy:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
Or, if you want a jQuery plugin:
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();
Alternatively, if you want to stick purely with CSS check out this page: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/ You can just have the background image be positioned off screen then come on screen when needed.
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }