I have used wow slider in my web page. It is working fine. But I am facing one problem.
The css is
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:960px;
margin:0 auto;
z-index:100;
border:none;
text-align:left; /* reset align=center */
}
#wowslider-container1 .ws_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container1 .ws_images a{
width:100%;
display:block;
color:transparent;
}
#wowslider-container1 .ws_images img{
width:100%;
border:none 0;
max-width: none;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
HTML is:
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="images/amazing_sunset.jpg" alt="amazing sunset" title="amazing sunset amazing sunset amazing sunset amazing sunset" /></li>
<li><img src="images/apple_tree.jpg" alt="apple tree" title="apple tree"/></li>
<li><img src="images/beutiful_landscape.jpg" alt="beutiful landscape" title="beautiful landscape"/></li>
<li><img src="images/lightbox-btn-prev.gif" alt="nature" title="nature" width="63" height="32"/></li>
</ul>
</div>
<!-- Generated by WOWSlider.com v2.2 -->
</div>
If the client wants to upload a small size the image is not re-sized. But he upload a large size the image is resized. Totally he is not want to set the width and height. Please refer the last li. The image size is 63*62. But it is automatically re-sized to 500px. Please help me.
Within the WowSlider application (paid version), you have the option to set the height and width of the slider (either preset or custom). It appears that you have selected a width of 960px.
You also have the option to preserver an image's aspect ratio and/or stretch small images. Click on the wrench icon, click on Images, and you'll see the option on the right.
One note -- your client has an incredibly small image if it is only 63px by 62px. If you stretch that up to 960px wide, it is going to be incredibly distorted and pixelated. In this instance, I would request a higher quality image from the client.
Related
I want to make responsive image slider for my website using Jquery and Javascript.
<div>
<ul>
<li>
<img src="#" alt="Slider Image" />
</li>
<li>
<img src="#" alt="Slider Image" />
</li>
<li>
<img src="#" alt="Slider Image" />
</li>
</ul>
</div>
My question is how to set the image width.
I set image width for 100% and height for auto.
I set div width for 100%, but when I resize the screen, the image is not responsive.
I want to learn from scratch instead using plugins possible.
How can I solve this problems?
You can achieve this by simply setting in your CSS something like this:
img {
display:block /*fix inline gap - optional*/
max-width:100%; /* the trick is here - setting max-width instead of width */
height:auto;
}
See snippet below with your code:
img {
display: block;
max-width: 100%;
height: auto;
}
/*demo styles*/
ul {
padding: 0;
margin: 0;
}
li {
margin: 0;
list-style: none
}
<div>
<ul>
<li>
<img src="//lorempixel.com/1600/900/sports" alt="Slider Image" />
</li>
<li>
<img src="//lorempixel.com/1600/900/city" alt="Slider Image" />
</li>
<li>
<img src="//lorempixel.com/1600/900/food" alt="Slider Image" />
</li>
</ul>
</div>
no need to use jQuery/JavaScript
Bro ,my advice to you is to use the plugin called bxSlider ( fully responsive ) slider. Easy for use and easy understandable.You can set modes, make adaptiveHeight...and much more options I personally was trying to make my own slide , after hours of a lot nervous I've decided to use that plugin. click here for downloading bxSlider !
Here's a fiddle of what you are looking for - assuming it's not a background image.
https://jsfiddle.net/WebDevelopWolf/u6vompp2/
Basically, the code you need to make your images responsive is:
img {
width:100%;
height:auto;
}
If it's a background image though then the you'll need:
div {
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
background:url('http://www.abstract-thinking.co.uk/img/logo.jpg')
}
that is because you haven't given a width and height for your image
so for your div, you have given width:100% and height:auto, (if you want you can give any px or % value for your div)
then for your image inside the div give width and height for it
(div img says images inside the div tag)
div img{
width:100%;
height:100%
}
in here, child element takes the full widh and height of it's parent element.hope this will help to you.
I am trying to create a div that has a fading background image with another fixed image ontop of this. The svg image I am trying to add ontop of the doesn't stay fixed with the div, It also fades in and out with the background. How can i stop the img fading and keep centered in the div? I have tried using absolute position but when the page is in mobile view the image moves offscreen,
This is what i have currently.
<div class="slideme" id="slideme">
<img style="max-width: 90%; "src="img/header-logo.svg" class="img-responsive">
</div>
CSS:
#slideme{
position:relative;
width:100%;
height:200px;
}
#slideme div{
position:absolute;
width:100%;
height:200px;
}
The problem is that when you fade out the div, you fade out also the contents of that div. Basically, all goes away, including your second svg image which is contained by the #slidme div which also have the other image as background.
First, you should probably refactor your code to look more like this:
<div class="main-slider-container">
<img style="max-width: 90%; "src="img/header-logo.svg" class="img-responsive">
<div class="slideme" id="slideme"></div>
</div>
CSS
.main-slider-container{
position:relative;
}
#slideme div{
position:absolute;
width:100%;
height:200px;
top:0px;
right:0px;
z-index:0;
}
> img {
position:absolute;
width:100%;
height:200px;
top:0px;
left:0px;
z-index:1;
}
With this structure, you can individually, hide the #slideme div without affecting the svg image
I'm trying to get a navigation div to sit in the middle between an image and the right page but also in a way that if the browser is resized, will still maintain the relation. I'm quite positive I know how to do it with a relative positioning but I would like to have the navigation fixed.
[img] nav |right side of viewport
#wrapperNav {
position: fixed;
top: 45%;
right: 50%;
z-index:999;
}
Code: http://jsfiddle.net/LLtnZ/3/
Flexbox has support in most newer desktop and mobile browsers and really dispenses with a lot of the hackiness involved in trying to maintain alignment and positioning with varying screen sizes; it flexes.
For the carousel you describe I would start with the below HTML, based on what you provided in your fiddle:
<div id="wrapper">
<nav class="nav nav--ready">
<div class='nav__center'>
<div class="nav__link nav__link--active">
<a class="nav__link-bullet" href="#one">1</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#two">2</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#three">3</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#four">4</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#five">5</a>
</div>
</div>
</nav>
<div class='carousel'>
<img src="" alt=""/>
</div>
</div>
#wrapper is a flexbox, .nav is too, so is .nav__center. #wrapper is set to flex-direction: row-reverse; so as to display navigation on the right, if we added another element to #wrapper it would display to the right of .nav. .nav itself is set to flex-direction: row;, though it only has one child: .nav__center, its flexbox styles of justify-content: space-around; and align-items: center; keep the nav buttons aligned at its center no matter what. Within .nav, .nav__center is set to flex-direction: column; so its contents display top to bottom, and these styles align-self: stretch; justify-content: space-around; distribute each .nav__link element evenly from top to bottom.
Here is a fiddle. Notice that navigation stays glued to the right side of the carousel. I set a minimum width on .nav so that it won't disappear even when the display is really tiny.
Here is a quick guide you can probably get through in ten minutes with a cup of coffee.
You need to add position: relative; to your container which in this case is the nav html element.
http://jsfiddle.net/LLtnZ/4/
This might help. So if your image is is 90% width and centered, that will leave 10% left of pagespace, 5% on either side of the image.
If I understand your drawing correctly, the that would mean you'd want the container your nav is in to be
width: 5%
position:fixed;
top: 50%;
right:0;
margin-top -150px; // half the height
height: 300px;
text-align:center;
The 5% width will take up the entire space to the right, but using text-align:center will get items in the middle, as per your "equal" annotation on your drawing.
If you need a jsFiddle let me know
Here's a fiddle: http://jsfiddle.net/47Q9p/
I'am working on mobile version of an existing site and i can't resolve the issue with links in the menu.
The problem occurs only on stock android browser. On Chrome, firefox, safari and even IE the site works fine. All other links on the site are working fine. Here is the link to the site if you would like to test it --> www.antiqpalace.com.
code description:
original site had a "main menu" and "left menu" and i moved some elements from "left menu" to "main menu". Then I redesigned the main menu to specification and hide it with display:none. If you click on menu button JS changes display to block.
What I have tried:
changing parent div position to absolute. that did not work, there were major scrolling issues.
adding JQ .click events to a elements. the result was un-changed. everything still works on chrome... but links remain unclickable in stock android browser.
i add css --> a{background-color:blue} to see what happends on phone and links are positiond fine, just un-clickable.
I have googled that there was/is issue with links and -webkit-transform but i don't have that line in my CSS.
HTML:
<div> ---> whit a fix position and display none
<ul class="menu" style="height: 644px;">
<li class="first leaf menu-mlid-808">
<a href="/about-antiq-palace-hotel-ljubljana.html" >Antiq Palace Hotel
</a>
<img class="DD_right_arrow" src="[some src]">
</li>
<li class="expanded active-trail active menu-mlid-817">
<a href="javascript:show_sub_menu(2)" class="active-trail active">Rooms & Suites
</a>
<ul class="menu" style="height: auto; top: 70.84px;">
<li class="first leaf menu-mlid-823">
<a href="/double-bedroom-residential-suite-one-or-two.html" >Double Bedroom Residential Suite for One or Two
</a>
<img class="DD_right_arrow" src="[some src]">
</li>
.....
</ul>
<div onclick="show_sub_menu(2)" class="A_DD_submenu">
<img class="DD_right_arrow" src="[some src]">
</div>
</li>
.....
</ul>
CSS:
ul{
margin:0 1.5%;
padding:0;
border:none;
width:97%;
height:91%;/* js adds inline height of ful win height -51 px example(height:644px;)*/
display:block;
float:left;
overflow-y:scroll;
}
ul li,
ul li.first {
padding:0;
margin:0;
height:auto;
width:100%;
background:none;
background-color:rgba(196,154,69,1);
display:block;
float:left;
border-bottom:dotted 1px rgb(214,184,124);
position:relative;
z-index:10000;
}
ul li a{
width:70%;
display:block;
font-size:11.5px;
font-weight:bold;
padding: 23px 7%;
text-decoration:none !important;
float:left;
text-align: left;
color: white !important;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif !important;
letter-spacing:2px;
line-height: 16px;
z-index: 10000000000;
position: relative;
}
ul li ul{
width: 100%;
margin: 0;
overflow-y: hidden;
display:none;
}
ul li ul li{
background-color:rgb(126,118,104) !important;
z-index:1000;
margin-bottom: 0 !important;
}
I don't know if it's ok to respond to my own question but I have solved the issue and don't know where to post the solution.
Actual error:
Actual error was an issue with position fixed and links inside that . Andriod browser displays links but are un-clickable. Visuali everything looks ok just does not work.
Fix:
I changed the position of the element to static and added com css to rewrite old css.
Design issue:
This is not a optimal fix because the menu is inserted in the page and not on top of it. I'm not sure which browsers have issues with fixed positioning so I added code to CSS file. If you have a similar problem you can indentify the browser and add code only to that browser
Here is link to css an at the bottom I added the code that fixed this problem.
http://www.antiqpalace.com/sites/www.antiqpalace.com/themes/antiqpalace/css/antiq_mobile.css
I'm working on a portfolio site for my wife's lighting design business. The jQuery cycle plugin seems to provide the functionality I want, but even after reviewing the examples on Mike Alsup's site, I'm stumped. Really, I just don't have the background with JavaScript to pull this off myself.
I want to build a slideshow, controlled with a pager function, using thumbnails for navigation. The main slides and the thumbnails are totally different aspect ratios (to maintain the layout), so I can't use cycle to generate the thumbnails for me. The slides include an image and a caption. I'd like to preserve as much of the existing markup as possible.
Here is the slideshow content:
<div id="slideshow" />
<div class="first">
<img src="../_/img/projects/shootingstar-1.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-2.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-3.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-4.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-5.jpg" alt="" />
<p class="credit">caption here</p>
</div>
Here is the thumbnail/navigation content. I tried to use a consistent naming convention for the images:
<div id="slidenav">
<li><img src="../_/img/projects/shootingstar-1t.jpg" alt="" /></li>
<li><img src="../_/img/projects/shootingstar-2t.jpg" alt="" /></li>
<li><img src="../_/img/projects/shootingstar-3t.jpg" alt="" /></li>
<li><img src="../_/img/projects/shootingstar-4t.jpg" alt="" /></li>
<li><img src="../_/img/projects/shootingstar-5t.jpg" alt="" /></li>
</div>
And finally, my styling, in case that is helpful in some way:
#slidenav {display: block; float: right; width: 200px;}
#slidenav li {list-style: none; float: left;}
#slidenav li img {padding: 2px; border: 1px solid #999; margin: 0 0 8px 8px;}
#projectcopy {display: block; float: right; width: 220px;}
#projectcopy p {font-size: 12px; color: #666; line-height: 16px; margin: 0 10px 20px 16px; text-align: right;}
#projectcopy ul {list-style: none; margin: 0 10px 20px 16px;}
#projectcopy ul li {font-size: 11px; color: #666; line-height: 14px; text-align: right; margin-bottom: 10px;}
I have an example posted here:
http://pritchardlighting.com/nova/portfolio/sample-project.html
You can see that I currently just have a simple cycle set up on the slides. Please ignore the mess. Obviously, this is still in dev.
I would really appreciate any help. This has to be something that others have tried to do. I'm just having a hard time making my way through the examples I've seen so far. They all assume (rightly so) a baseline understanding of JS that I just don't possess.
please refer to this demo to have your question answered:
remove all divs you have wrapped around your content to cycle (the child elements of div#slideshow. they prevent cycle from working as the script cycles everything within ONE div).
remove p.credit for the same reason. otherwise the script cycles it and you run into trouble if you have no matching thumbnail (see 3.)
make sure, the number of thumbnails {*t.jpg} matches precisely the number of img in {div#slideshow}. thats the point that makes it work. mismatch leads to a non working script.
use exactly the jquery markup from the demo and replace {pager: '#nav',} with {pager: '#slidenav',}
if still not working check with firebug if the script loads. if yes, try first to make the cycle {div#slideshow} running before you move forward to the linked thumbnails.