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.
Related
I am in need of help. I am currently developing my new webstore for my website, and I cannot figure out ho to properly align my text, images and buttons. I have tried many things in order to align them, but I cannot seem to figure out how to do it myself. I'll provide more info if needed. Thanks in advance!
Here is my code and below you can see the result:
Assuming that you just want to align all the items vertically, you can simply give the container a value of text-align:center while giving the containing block a width. So for the purpose of your code it would be something like this. Not that I've changed your markup as you were using inline styling.
The wrapper I've set as display:flex to help it align nicely. You can read about flexbox here
HTML:
<div class="wrapper">
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: left;" title="" src="//dunb17ur4ymx4.cloudfront.net/packages/images/d04fbf5918208479df283e7fa0ad8f0fcc0d7acb.png"/>
<button>helpme</button>
</section>
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: center;" src="//dunb17ur4ymx4.cloudfront.net/packages/images/f6f9b85569cc52ddc9bf5e57b4fd28309093fdcc.png"/>
<button>helpme</button>
</section>
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: center;" src="//dunb17ur4ymx4.cloudfront.net/packages/images/f6f9b85569cc52ddc9bf5e57b4fd28309093fdcc.png"/>
<button>helpme</button>
</section><
</div>
CSS:
.wrapper section {
text-align:center;
justify-content:center;
width:200px;
}
.wrapper {
display:flex;
}
Fiddle
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 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 building a site for a client but I've encountered a strange bug with jQuery's .hide() function
If you check out this sample url and click any one of the thumbnails you'll see the image is aligned to the left. Now if you open or switch to any other browser tab and then go back to the sample url the image is centered...
The image should be centered, and worked just fine until I added this;
$(".single-content-overlay").hide();
to my scripts file...
Anyone have any ideas why this might be happening and how I might be able to fix it?
You have a problem with CSS (probably generated by your slideshow javascript lib). When the browser gets the focus again, the <li>s width are recaldulated. This:
<li class="slide flex-active-slide" style="width: 0px; float: left; display: block;">
<img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>
<li class="slide" style="width: 0px; float: left; display: block;">
<img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>
Becomes this:
<li class="slide flex-active-slide" style="width: 1088px; float: left; display: block;">
<img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>
<li class="slide" style="width: 1088px; float: left; display: block;">
<img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>
The same behavior happens in Chrome, Firefox and IExplorer (all the latest versions). I'm almost certain that this is a issue (or a feature?) with your slideshow lib. Try to define the <li>s width manually to see if the problem continues.
I'm trying to do a responsive image gallery with masonry jquery plugin.
I read many article, including in this forum, but it doesn't work. Many blank spaces appears in the gallery.
I'm trying with Jquery Masonry and a simple css and html
.flow { width: 95%; height: auto; min-height: 500px; margin: 0 auto}
.item {
margin-bottom: 10px;
}
`
<div class="item">
<img src="http://www.smartynet.com.br/flampic/img/1small.jpg" />
</div>
<div class="item">
<img src="http://www.smartynet.com.br/flampic/img/2small.jpg" />
</div>
</div>
I created this JSFiddle.
I'm trying to build a gallery like flickr. There is any other best way?
Please someone could help me?
can you just try the Flex Slider for responsive image gallery
http://flexslider.woothemes.com/ or try
http://lokeshdhakar.com/projects/lightbox2/
or
http://fancybox.net/