I've tried unsuccessfully to implement the layout in the attached image. When apllied div with table setting IE brokes, if elements are floated when captions are more than one line the layout is broken again. Any suggestion will be greatly appreciated.!
Layout image:
Here is the CSS
.thumbsHolder {clear:both;float:left;width:100%;overflow:hidden;}
.thumbsHolder ul#prodThumbs {padding-top:20px;margin:0 auto;list-style-type:none;text-align:center;}
.thumbsHolder ul#prodThumbs li {float:left;padding:0 7px;min-height:150px;}
.thumbsHolder ul#prodThumbs li a {font-family:Arial, Helvetica, sans-serif;font-weight:normal;text-decoration:none;font-size:70%;}
HTML
<div class="thumbsHolder">
<ul id="prodThumbs">
<li><img src="thumb1.jpg" /> <!-- image width and height may differ -->
<p>Caption</p></li>
<li><img src="thumb2.jpg" />
<p>Longer caption</p>
</li>
<li><img src="thumb3.jpg" />
<p>Even longer caption</p>
</li>
<li><img src="thumb4.jpg" />
<p>Longer caption</p>
</li>
<li><img src="thumb5.jpg" />
<p>Caption this time is a sentence that goes three rows</p>
</li>
<li><img src="thumb6.jpg" />
<p>Caption this time is a sentence that goes three rows</p>
</li>
<li><img src="thumb7.jpg" />
<p>Caption this time is a sentence that goes three rows</p>
</li>
<li><img src="thumb8.jpg" />
<p>Caption this time is a sentence that goes three rows</p>
</li>
<li><img src="thumb9.jpg" />
<p>Since we have a wider image at first row, this row must be centered</p>
</li>
<li><img src="thumb10.jpg" />
<p>Longer caption</p>
</li>
<li><img src="thumb11.jpg" />
<p>Here text also goes down, so if we float layout breaks</p>
</li>
<li><img src="thumb12.jpg" />
<p>Caption</p>
</li>
<li><img src="thumb13.jpg" />
<p>Longer caption</p>
</li>
<li><img src="thumb14.jpg" />
<p>This is a centered image</p>
</li>
<li><img src="thumb15.jpg" />
<p>This is out last image</p>
</li>
</ul>
</div>
You should know what the maximum size of a thumbnail will be when generated on your site, there must be some limit. Why not wrap your tag into a div set that divs height to the max of a thumbnail. Then align the img in the div. Then you have your p tag below for captions
Related
I want popover on hover of product images in WordPress, i used popover.js also include js and css of bootstrap. my WordPress theme has included bootstrap.
here is my product image code,
<img class="alignnone size-full wp-image-134" src="Projektorer-research.jpg" alt="Projektorer-research" width="268" height="150" />
here i used data-content="test" for example, actually i want to display unordered list over there.
Are you initializing your Popovers? You must initialize them yourself with JS like in the example Snippet.
See docs working example.
$(function() {
$('[data-toggle="popover"]').popover();
});
body,
html {
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" data-toggle="popover" data-trigger="hover" data-content="test">
<img class="alignnone size-full wp-image-134" src="http://placehold.it/350x150" alt="..." width="268" height="150" />
</a>
i think you are trying to display custom(html) content in your popover, if you do like below you can set any content in your popover.
<div id="popover_content" class="row company-logo" style="display: none">
<ul>
<li><img src="images/alico-logo.png" alt=""/></li>
<li><img src="images/national.png" alt=""/></li>
<li><img src="images/traveller.png" alt=""/></li>
<li><img src="images/progressive.png" alt=""/></li>
<li><img src="images/formost.png" alt=""/></li>
<li><img src="images/the.png" alt=""/></li>
<li><img src="images/circle.png" alt=""/></li>
</ul>
</div>
<a id="popx" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="">Click to toggle popover</a>
and initialize your popover like this:
<script>
$(function () {
$('#popx').popover({
html: true,
content: function () {
return $('#popover_content').html();
}
});
;
})
</script>
I want to use custom images as tabs to show and hide divs like this: http://jqueryui.com/tabs/
I also alternate images for the tab that is active but don't know how to implement them properly.
This guy was close but the code is messy and doesn't quite work: http://jsfiddle.net/5FVb7/1/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
This is all of the scripting that the jQuery UI site seems to suggest is needed?
This is my html:
<div id="tabs">
<ul>
<li><img src="img/bt1.png" /></li>
<li><img src="img/bt4.png" /></li>
<li><img src="img/bt2.png" /></li>
<li><img src="img/bt3.png" /></li>
</ul>
<div id="tab1"><p> Words go here innit </p></div>
<div id="tab4"><p> Testa texta </p></div>
<div id="tab2"><p> eeyyeeeeee </p></div>
<div id="tab3"><p> Cheap as chips </p></div>
</div>
My CSS so far is just for positioning and some style - no functionality is present.
I think I'm probably missing something.
Moved your html to FIDDLE, added some net images, and everything works OK.
If you want specific images, you'll have to photoshop them, resize them to fit.
Is this what you're looking for?
HTML for one of the resized images
<li><a href="#tab2"><img height='42' width='42'
src="http://www.twitip.com/wp-content/uploads/2008
/11/twitter-button-small.png" /></a></li>
I was asking if the following is possible. I have a HTML5 article tag, with inside that a figure and figcaption tags. The caption is overlapping the image. The figure should be clickable, but I want some other links in the caption that linked to another page, like a categorie page.
How should my markup looks like.
Now I have the following, but than the a first a tag will be immediately closed after it's opening the a tag.
<li class="grid_12 blog-post">
<a href="#">
<figure class="post-thumb">
<img src="images/blog-thumb.png" alt="Post thumbnail">
<figcaption class="entry-post">
<span class="capitalize">Entry</span>
<h1 class="entry-title">
Fris. Responsive. Retina Ready.
</h1><!-- End h1 .entry-title -->
<ul class="entry-meta">
<li class="author">
By Casper Biemans
</li>
<li class="published">
On September 1, 2012
</li>
<li class="entry-categories">
In Digital Art
</li>
<li class="comment-count">
With 22 Comments
</li>
<li class="permalink">
<img src="images/permalink_icon.png" alt="Permalink post">Permalink
</li>
</ul><!-- End ul.entry-meta -->
</figcaption><!-- End figcaption.entry-post -->
</figure><!-- End figure.post-thumb -->
</a>
</li><!-- End li.grid_12 blog-post -->
Is it possible to have a liquid navigation bar with the links having images. I am trying to have a responsive link with an image on the left and text on the right. If the size of the window changes then the button (link) will change size too. I would prefer to do this with CSS.
What I have tried so far is to have the following:
<div style="height:62px;margin-left:60px;border:solid 1px #FFFFFF;">
<ul class="main_nav">
<li>
<a href="#me">
<img src="img/avatar/me.png" alt="me">
Me
</a>
</li>
<li>
<a href="#guide">
<img src="img/avatar/spotlight.png" alt="guide">
Guide
</a>
</li>
<li>
<a href="#downloads">
<img src="img/avatar/downloads.png" alt="downloads">
Downloads
</a>
</li>
</ul>
<div>
I'm trying to create an area that can be changed dinamically with arrows, so I'm opting for the html5 slideshows.
I tried to make this work http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/ but it isn't working, this is what I tried to do http://jsfiddle.net/frHV5/
Hope you can help me, thanks in advance
First: you haven't copied the entire JavaScript.
Then the security problem comes. You can use canvas to edit images only on local level.
This means the following wont work:
<li><img src="http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/img/photos/1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
<li><img src="http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
<li><img src="http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>
But this will:
<li><img src="1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
<li><img src="2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
<li><img src="3.jpg" width="620" height="320" alt="Power Station" /></li>
In summary: Just copy correctly the javascript, the CSS, copy the images to you machine, edit the URLs in the html and that's it.