I am trying to implement a carousel using impress.js similar to http://demo.tutorialzine.com/2012/02/css3-product-showcase/#/music.
I tried developing it but facing some problem like when clicked on left or right icon, the screen is moving upwards and downwards. The work that i have done is uploaded in my server. Link:
http://think360apps.co.in/evdt/issued/index.html#intro
Also the code is given below:
<div class="animate-slider">
<div id="impress" class="impress-not-supported">
<div id="intro" class="step" data-x="0" data-y="0">
<h2>Introducing Galaxy Nexus</h2>
<p>Android 4.0<br /> Super Amoled 720p Screen<br /> 1.2 GHz Dual Core CPU<br /> 32 GB of storage<br /> Fast Camera</p>
<img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
<h2>Simplicity in Android 4.0</h2>
<p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel to Android. Simple layouts with subtle animations and delightful flourishes make everything feel alive. </p>
<img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
<h2>Connect & Share</h2>
<p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing with mobile devices just as easy at it is in person. </p>
<img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>
<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
<h2>Instant Upload</h2>
<p>Your photos upload themselves with Instant Upload, which makes it much easier to share them with family and friends.</p>
<img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>
<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
<h2>Jam on with Google Music</h2>
<p>Google Music makes discovery, purchase, and listening effortless and fun. Store your entire collection for free, and stream your music to your Galaxy Nexus, computer, or other Android devices.</p>
<img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>
Please let me know where i am doing wrong.Please help.
You should have this code to control the button:
<script>
$("#arrowRight").click(function () {
impress().next();
});
$("#arrowLeft").click(function () {
impress().prev();
});
</script>
By the way, the link you've given is invalid.
Related
I am trying to make a website for my friend's Graphic Design company.
I keep getting this bug where the <img> and <video> just displays my container without any Images/Video in it just a black box. Not even my alt's?? I've never had this happen before.
I do have quite a lot of stuff going on in my stylesheet; including beizer transformations on the container, would that be a problem as it was working, but I changed the image dimensions.
My question is, how do I debug this/ how do I get it to just display my photos in my container.
Edit: I'm 2nd year CompSci but am new to HTML/CSS
My image and mp4 is in the same directory of my index.html in the img and vids folder:
website/img/Sunburnt.jpg
website/vids/statuspr.mp4
website/index.html
<div class="col project-wrap">
<div class="col__item project">
<div class="project__count"><span class="project__count-current reveal">02</span><span class="project__count-total reveal">/ 28</span></div>
<a class="project__image noselect" target="_blank" href="#">
<div class="project__image-container plane plane--media">
<!-- The preferred img, mp4s -->
<img src="/img/Sunburnt.jpg" alt="Sunburnt Breakfast Rave" />
<video src="vids/statuspr.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
</div>
</a>
<div class="project__meta">
<h3 class="project__meta-title plane">Canberra Rave Scene</h3>
<div class="project__meta-tags">
<div class="reveal"><span>Social Media</span><span>Entertainment</span><span>Rave</span>
</div>
<div class="reveal"><span>Visuals</span><span>DJ</span>
</div>
</div>
</div>
</div>
</div>
I cant comment so i try as an answer even though its not 100% clear:
Just looking at your code:
you use a / before the img folder only with the image.
If you're not looking at the file from a server, this will give a 404..
debug using F12, and look at network errors or console errors
So I was able to fix this by creating a new container (project__image-container2) which used a less intricate implementation of CSS in my stylesheet.
I also changed up my src from data-src and just including my images and videos in my project. The combination of these two solutions did solve my problem - that I could not display images and videos withing these containers - however, my website now loads said videos and images quite slowly. However that is something I can try and fix later.
<!-- Project 1: Sunburnt Breakfast -->
<div class="section section--work" data-label="Project 01">
<div class="col project-wrap">
<div class="col__item project">
<div class="project__count"> <span class="project__count-current reveal">02</span><span class="project__count-total reveal">/ 28</span></div>
<a class="project__image noselect" target="_blank" href="website-I-don't-want-the-world-to-know-about">
<div class="project__image-container2 plane">
<video src="vids/visualsTrim.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
<noscript>
<video src="vids/visualsTrim.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
</noscript>
</div>
</a>
<div class="project__meta">
<h3 class="project__meta-title plane">Canberra Rave Scene</h3>
<div class="project__meta-tags">
<div class="reveal"><span>Social Media</span><span>Entertainment</span><span>Rave</span>
</div>
<div class="reveal"><span>Visuals</span><span>DJ</span>
</div>
</div>
</div>
</div>
</div>
<button class="section__nav section__nav--left noselect clickable"><span class="text--giant text--bold"><span>Back</span></span></button>
<button class="section__nav section__nav--right noselect clickable"><span class="text--giant text--bold"><span>Next</span></span></button>
</div>
I hope that this helps anyone facing this niche problem out there. DM me or comment and I will try to help you through it if you are struggling with this issue too.
Thank you to everyone who helped me get here. Love my stackoverflow community !!! Yall the best xx
Background:
I administer an Amazon shop for a category that is unsupported by the Amazon bulk upload tool. The shop contains (once this question is resolved) +150 individual products with 6-9 preview images each and in 6 EU sites (huge manual upload effort).
I decided to use Selenium and my basic python skills to automate the upload.
Problem:
All works perfectly fine except for image upload. I had used this code in the past to send images into an input field:
driver.find_element_by_css_selector('input[type="file"]').send_keys('path/to/local/image')
Modifying this to fit to the image upload page in question:
driver.find_element_by_id('main_image_url').send_keys('path/to/local/image')
Returns a sea of red:
File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages/selenium/webdriver/remote/errorhandler.py", line 192, in check_response
raise exception_class(message, screen, stacktrace)
ElementNotVisibleException: Message: element not visible
(Session info: chrome=53.0.2785.116)
(Driver info: chromedriver=2.23.409710 (0c4084804897ac45b5ff65a690ec6583b97225c0),platform=Mac OS X 10.11.6 x86_64)
Also tried:
I have read around a bit but my knowledge of Javascript is null so I have blindly tried a few javascript snippets to make the element visible first to no avail.
driver.execute_script('document.getElementById("main_image_url").style.visibility = "visible";')
I've also read some solutions involving trying to navigate the actual dialogue window with complicated combinations of send_keys() but sound like trouble.
I'm on a Mac and using the Chrome driver.
Any tips much appreciated
HTML element of page:
<div id="main_image_url-wrapper" class="a-row a-spacing-medium input-container">
<div data-attribute-name="main_image_url"
data-image-index="0" class="a-row a-grid-vertical-align a-grid-center ilui-image-input-container image-not-selected hide-remove-button ilui-post-attribute">
<input id="main_image_url" name="main_image_url"
value="" cssClass="image-source-of-truth"
type="hidden" autocomplete="off"
/>
<div class="a-row">
<label for="main_image_url" class="label">
<span class="attribute-label-text">Main Image
<span class="a-size-base a-color-tertiary a-text-italic a-text-normal">
(required)
</span> </span> <span class="a-declarative"
data-action="a-popover" data-a-popover="{"name":"attributeHelpmain_image_url","inlineContent":"The URL where a main image of the product is located. It's important that this is supplied for all products."}">
<span class="help-icon"></span> </span>
</label>
</div>
<div class="a-row ilui-image-wrapper ilui-visualization-element">
<span class="a-declarative" data-action="image-select-main_image_url"
data-image-select-main_image_url="{}"
id="image-container-declarative">
<div tabindex="0" class="ilui-image-select-container">
<div id="image-camera-icon" class="icon-container">
<i class="icon"></i>
<ul class="a-nostyle a-vertical error-list image-error-list"></ul>
</div>
</div>
</span> <img src="" class="ilui-img-thumbnail"
/>
<div class="image-loading-overlay a-hidden">
<div class="a-section upload-progress-meter image-progress-bar">
<div class="a-meter" aria-label="0%">
<div class="a-meter-bar"
style="width: 0%;"></div>
</div> <span class="percentage"></span> </div>
</div> <span class="a-declarative" data-action="image-remove-button-main_image_url"
data-image-remove-button-main_image_url="{}">
<div tabindex="0" class="remove-image-button">
<i class="a-icon a-icon-close"></i>
</div>
</span> </div>
</div>
For this code in mobile if i touch and move body it does not move but if touch header or footer and move it scrolls could any one please help...
But in my(iphone) or some mobiles it works it does not work in some other mobiles
You can check by using browser emulator it does not work there
I sense the problem is in modernizr.js could any one please help
<div class="vs-wrapper">
<section id="section-1">
<div class="vs-content">
<div id="portfolio-content" class="center-text">
<div class="portfolio-page">
<div class="portfolio-group">
<a class="portfolio-item" href="images/paper.jpg">
<img src="images/paper.jpg" alt="image 1">
<div class="detail">
some text or ptag goes here
</div>
</a>
</div>
</div>
</div>
</section>
</div>
My aim is to keep 2 images side by side in large screens and one above another in small screens.The problem what I have done is doing the opposite.In large screens images are coming one above another and in small screens images are coming side by side.
Please see this fiddle.
This is my html code
<!--nav bar-->
<div class="container">
<div class="row">
<div class="col-md-18">
<div >
<img src="http://www.computerhope.com/logo.gif" alt="Logo" class="round"> my user
</div>
</div>
<div class="col-md-6">Recently purchased
<div id="slideshow">
<span class="images">
<div class="box img-responsive">
<img src="http://lorempixel.com/150/100/abstract" />
<span class="caption simple-caption">
<p>Review</p>
</span>
</div>
<div class="box img-responsive">
<img src="http://lorempixel.com/150/100/food" />
<span class="caption simple-caption">
<p>Review</p>
</span></div>
</span>
<a class="next" href="#">Next</a>
</div>
</div>
</div>
</div>
I have not posted the js codes because I feel its not necessary But if you want then please check the fiddle
Please see the screenshot,
Add img-responsive class to image tag and not div tag. Also col-lg-18 not possible to have 18 columns unless you have customised it, by default 12 is the max columns u can have.
i have create a app. in phoneGap. it work fine on iphone but in android click event not work.
have any idea what is wrong in my code
this is my html:-
<div id="logInScreen">
<div class="logInScreen">
<a class="main_logo" href="#"><img src="logo.png" alt=""/></a>
<p class="main_text">Digital Discount Vouchers <br /> On Your Phone</p>
<div id ="divRegister" class="main_reg" onclick="GeneralTransit('#register')">Register</div>
<div id ="divNotNow" class="main_reg" onclick="GeneralTransit('#t_featured')">Not Now...</div>
<div id ="divLogin" class="main_reg" onclick="GeneralTransit('#login')">Login</div>
<div class="main_forgot" onclick="GeneralTransit('#login_fog')">FORGOT PASSWORD?</div>
<p class="main_text2">IN ORDER TO PURCHASE ADDITIONAL VOUCHERS <br /> YOU NEED TO BE REGISTERED</p>
<p class="main_text3">POWERED BY YALLAMOB.COM</p>
</div>
</div>
there is also some other div's that hide and show on conditions .
I thought it was the missing ';' (GeneralTransit('#register');)
But it works here with and without the';': http://jsfiddle.net/ZVFgW/11/
Your problem is likely somewhere else.
Did you debug it using Chrome or Firefox+Firebug?