Blank image at start of js slideshow - Ruby on Rails - javascript

I'm fairly new so please forgive any lack of knowledge I may have.
I'm using the cycle2 plugin on a project and I've made one slideshow on my index page work fine, there's no issues with it at all as its pulling images from the net.
However I want to do a slideshow on the show page, so that for each product it pulls the product image from the database. I've made it so it does, however when doing so the first image of the slideshow is always empty and continuously trying to load until it changes to the picture from the database.
I'm pretty sure its something in the img src that I'm doing wrong as its getting the image, just getting a blank slide too, any help would be greatly appreciated!
The code so far is;
<div id="slideshow">
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=4000
style="z-index:-1;"
data-cycle-prev="#prev"
data-cycle-next="#next"
>
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<!-- empty element for overlay -->
<img src = <%= link_to image_tag #product.image_url %>>
<!-- prev/next links -->
<div id=outside>
<span id=prev>?</span>
<span id=next>? </span>
</div>
</div>
Thanks, Ben

Use this: <%= image_tag(product.image_url) %>. That's what I used to make mine work.

Related

Why first page is left blank on printing with vue-html2pdf which internally uses html2pdf.js

Hi i'm facing the problem with printing using vue component called vue-html2pdf
The problem as follows:
the pagination does not break the page when content added. on print page becomes 3
the first page is printing as blank on click of download
Here is the setting i'm using for printing:
<vue-html2pdf
:show-layout="false"
:float-layout="true"
:enable-download="true"
:preview-modal="true"
:paginate-elements-by-height="1400"
filename="nightprogrammerpdf"
:pdf-quality="2"
:manual-pagination="false"
pdf-format="a4"
:pdf-margin="10"
pdf-orientation="portrait"
pdf-content-width="800px"
#progress="onProgress($event)"
ref="html2Pdf"
>
Here is a demo: https://codesandbox.io/s/vue-html-to-pdf-example-forked-3lijbr?file=/src/App.vue:95-532
After playing around with your codesandbox, I found solution:
remove section, then the first blank page gone.
<!--
<section slot="pdf-content">
<ContentToPrint />
</section>
-->
<ContentToPrint slot="pdf-content" />
but pagination of the new pdf still looks strange, to fix that remove the in ContentToPrint, than the pdf looks perfect to me.
<template>
<div style="margin: 12px 12px">
<img src="https://picsum.photos/500/300" />
<!-- <div> -->
<p>
<strong
><a href="https://www.nightprogrammer.com/" target="_blank"
>Nightprogrammer.com</a
></strong
I guess the library can't accept too much div.
Here is my modified codesandbox. pdf looks better if you open standalone page (https://1puw7d.csb.app)
https://codesandbox.io/s/vue-html-to-pdf-example-forked-1puw7d?file=/src/App.vue
Just replace the section element by a div and should fix it for you.

Javascript Not Running Until Refresh

I have used this javascript snippet to create a bunch of divs with equal height before and have never had this problem before, but for some reason the code isn't running until I refresh the page. Here is a sample instance:
<div class="container">
<div class="row text-center">
<%= link_to "http://www.manlyartofbbq.com" do %>
<div class="col-sm-6 col-md-4">
<div class="site-preview-box">
<h2>WIP: Manly Art of BBQ</h2>
<h4>Branding, Logo Design, UI/UX Design, Web Development</h4>
<%= image_tag 'portfolio_mab.png', class: "portfolio-image" %>
<p>The Manly Art of BBQ is a humorous website that gives information on a variety of "manly" topics.</p>
<p><strong>This site has a vast array of user-submitted content sorted in a Reddit-like fashion, as well as a few online "tools" that were a lot of fun to develop.</strong></p>
</div> <!-- site preview box -->
</div> <!-- column box -->
<% end %>
<%= link_to "http://www.ocoutreach.com" do %>
<div class="col-sm-6 col-md-4">
<div class="site-preview-box">
<h2>WIP: OC Outreach</h2>
<h4>Branding, Logo Design, UI/UX Design, Web Development</h4>
<%= image_tag 'portfolio_oco.png', class: "portfolio-image" %>
<p>OC Outreach is a non-profit community organization that operates in the Orange County area.</p>
<p><strong>This was a fairly simple site functionality-wise, but it was cool to design every aspect of a site (logos, design, etc.) from the ground up.</strong></p>
</div> <!-- site preview box -->
</div> <!-- column box -->
<% end %>
</div> <!-- row -->
</div> <!-- page container -->
<script>
$( document ).ready(function() {
var heights = $(".site-preview-box").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".site-preview-box").height(maxHeight);
window.onresize = function(){ location.reload(); }
});
</script>
Instead of equally-tall divs, I end up with this:
Then, when I hit refresh (sometimes it takes multiple refreshes), it corrects to this:
Any ideas on how to get this to work before I refresh the page?
ADDITIONAL INFO
This is not solved by the answer for this question. I tried substituting load for ready and it renders the javascript nonfunctional for this purpose.
Make your divs appear after all images are finished loading. The divs are the correct size on reload because at that point all the images are cached by your browser and the JavaScript can pick up the appropriate size.
In jquery change your ready to this:
$(window).on("load", function() {
// weave your magic here.
});
should fix it. If not.
Something like this should help as a rough example.
var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg"
You can give a css width and height to images. So boxes will look always as you wish.
In your case, browser caches images in first time then their appear fix itself in second time because of reading images from browser's cache.

adding a slideshow to emberJS template page

EDIT: Did some more digging around and emberJS doesn't allow inline script execution. How would I go about creating a slideshow? Do I create a component?
I've only started out with emberJS. I've followed the guides on the website by Ember and looked on here to learn, but I've found myself in a bit of a dead end and I need your help!
This is the situation:
I want to add a slideshow to one of my templates. Now, to the best of my abilities I have added the slideshow .js and .css using 'BOWER INSTALL' and then edited my 'ember-cli-build.js' to reference the app.import for those two dependencies.
It's a basic website pages such as 'About Me', 'Services', 'Contact Us'. Nothing fancy. Say I want to add this slideshow to the 'Services' page, at first when I visit the site it loads up with no issues but when I switch between the templates/pages using {{#link-to}} function it disappears and won't load again.
Can anyone explain how I should add inline scripting on templates?
Sorry for the beginners question.
In order for me to run the slide show I need to execute the following script after the DOM elements on the page.
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
The HTML is as follows:
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/350x150/0889d8/000000" />
</li>
<li>
<img src="http://placehold.it/350x150/c1a4f0/ffffff" />
</li>
<li>
<img src="http://placehold.it/350x150/8b4513/000000" />
</li>
</ul>
</div>
I tried to use the slick addon, but ran into issues with it. So I created another ember addon that wraps the jquery unslider plugin. Check out ember-cli-unslider.
See the simple demo.
The un-slider component expects an array of slides. Within its block you must define the HTML content used for each slide.
{{#un-slider slides=model as |slide|}}
<img src="{{slide.url}}"/>
{{/un-slider}}
In the above example, model could look like this:
[
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 1&w=600&h=400' },
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 2&w=600&h=400' },
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 3&w=600&h=400' }
];
You can use an ember addon that already does that: ember-cli-slick
Install it using :
ember install ember-cli-slick
You can use it in your template like this:
{{#slick-slider autoplay=true arrows=false}}
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
{{/slick-slider}}
If you want to learn how to make a slideshow component look at the source code here:
https://github.com/laantorchaweb/ember-cli-slick/blob/master/addon/components/slick-slider.js
This is just a wrapper component for the slick.js plugin . You would do the same for the flexslider plugin.

Background image slideshow not working properly

I am using following theme for one of website (click here). This theme come with one background image and i modified this to multiple background images for 'section' tag <section id="intro" class="intro"></section>
This script doesn't wok properly as it show black screen in between image at time.
codepen example
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
I am using a trick and showing all these image also in another div with it display property, this way helped to to resolve black screen between image transition as all image are cached if i am not wrong if i dont put these image in a hidden div then each image takes time to download.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
Overall you will notice that it breaks, for some reason it some works well in other browser other than FF.
i need to fix this or need another script which can show slid show for a container div as shown in this example and works well with fadein fadeout effect
It looks like that images are being downloaded via a GET request each time JS switches them. Try to cache them somehow so you can save some time on a get/redirect requests.
I think the black screen is caused by the image source, if you look the image source when black screen occurs, it doesn't show an image, and if you navigate to that source through the browser, it gives you an redirect to a different page.
This issue is caused due to incorrect image source...
For ex. this URL is not redirecting to any image..
"http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg"

Full Screen image slider with jquery

I have to make a demo website somewhat similar to http://issuu.com/eb_magazine/docs/ebmag_31/1. The website is coded in flash but I want to do it using javascript and jQuery.
I think I need to do this in two parts, first is a simple image slider to slides between images. I think I can use any jQuery Image slider plugin for that.
The second part where we click on the image and it opens in full screen image slider with a zoom option. I don't know which plugin can be used for that. Is that even possible to do with jQuery? Please suggest any plugins for that
I think http://www.turnjs.com/ is the best solution for your query.
Turn.js is a JavaScript library that will make your content look like
a real book or magazine using all the advantages of HTML5. The web is
getting beautiful with new user interfaces based in HTML5; turn.js is
the best fit for a magazine, book or catalog based in HTML5.
Here's a sample code:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>

Categories