I have a fully working rhinoslider and lightbox2. The images slide but are also clickable, when there clicked the nice lightbox2 pops up. But for some reason the captions in the slider won't display when the other link is above it.
My code:
<ul id="slider"><li><img src="images/1.jpg" alt="" title="test" /></li> </ul>
Does anyone know why the captions won't display? And is there a solution to this problem?
http://rhinoslider.com/
http://lokeshdhakar.com/projects/lightbox2/
First of all you should fix your markup.
<ul id="slider">
<li>
<a href="images/1big.jpg" rel="lightbox[roadtrip]" title="test">
<img src="images/1.jpg" alt="" title="test" />
</a>
</li>
</ul>
If the caption won't work afterwards, please make sure you enabled them in the settings of Rhinoslider.
If they still won't work try to set the captions manually: http://rhinoslider.com/tricks/html-captions/
Related
I need help in getting the first images from a list of reviews. I have to get just the first images from the first five reviewers. And the reviews look something like this.
<div class='feedback item'>
<dl class='buyer-review'>
<dd class='photo-list'>
<ul>
<li> <img> </li>
<li> <img> </li>
<li> <img> </li>
</ul>
</dd>
</dl>
<dl class='buyer-additional-review'>
<dd class='photo-list'>
<ul>
<li> <img> </li>
<li> <img> </li>
<li> <img> </li>
</ul>
</dd>
</dl>
</div>
Sometimes there is an additional review, and sometimes none. Sometimes, the image can be found in the additional review and not in the main review. The thing that I need to do is get just one image from each reviewer.
I tried doing something like this:
//div[position()<6]/dl/dd//ul/li[1]/img
This gets the images from the first five reviewers, but sometimes it returns more than 5 images if there's an image in the main review and in the additional review.
So I tried doing something like this:
//div[position()<6]/dl[1]/dd//ul/li[1]/img
But sometimes it returns less than 5 images if the image is located in the additional review and not in the main review.
Essentially, I just need to get one image per reviewer, and it doesn't matter if it's from the main review or from the additional review.
thank you in advance!
Try this : //div/dl[position()<6]/dd/ul/li[1]/img
you have to take position of dl not div as it seems from your xml.
Try these:
(//div[position()<6]//img)[1]
//div[position()<6]/dl[.//img][1]//img
I try to study a Bootstrap 3 last three months.
All fine, but I would like to put in my navbar the additional image (in right side of it).
In my opinion, to insert a picture directly in HTML code like:
picture
- bad idea, and I created a with a background picture, specified through CSS, but the picture does not appear on the page ...
How can I do it?
And possible whether to do it at all?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Follow this guide
http://getbootstrap.com/components/#navbar-brand-image
To have an additional image on the other side of the menu, you just need to put it as part of the link menu. See example:
http://jsbin.com/mupobo/edit?html,output
I'm currently creating a image gallery (using Zurb Foundation as Framework) and would like to show the zoom icon on image hover (like this example here: http://codepen.io/Twikito/pen/Jeaub). But I would like the icon to be a font (Font Awesome) icon and not just one but 3 individual clickable icons.. Would that be possible?
I've put a quick JSfiddle together using font-awesome. The CSS is hacked together but demonstrates what's possible. It should give you a starting point to experiment with.
<a href="#" title="" class="image">
<img src="http://www.lyricis.fr/wp-content/uploads/2010/04/kickass-film-still-01.jpg" alt="">
</a>
<div class="cn">
<div class="inner">
<i class="icon-zoom-in large"></i>
<i class="icon-cloud-download large"></i>
<i class="icon-comment large"></i>
</div>
</div>
Note: The JSfiddle above uses font-awesome.css called externally from bootstrapcdn.com
6 of my images (png and animted gif on hover) fail to load on IE8 only, I've tested on most browsers on mac and windows and IE8 is the only one where the images don't load. They actually appear on IE7, I've been checking the web for solutions or similar problems but I can't seem to find the right solution.
Here's the link to that page: http://tinyurl.com/8ydbp6y
heres the html of that specific section
<ul class="about-icons">
<li id="about-love"><img src="images/about/icon-thankyou.png" onmouseover="this.src='images/about/icon-thankyou.gif'" onmouseout="this.src='images/about/icon-thankyou.png'"/></li>
<li id="about-japan"><img src="images/about/icon-japan.png" onmouseover="this.src='images/about/icon-japan.gif'" onmouseout="this.src='images/about/icon-japan.png'"/></li>
<li id="about-icecream" class="no-margin-right"><img src="images/about/icon-icecream.png" onmouseover="this.src='images/about/icon-icecream.gif'" onmouseout="this.src='images/about/icon-icecream.png'"/></li>
</ul>
<br/>
<div id="about-whymochiko" ><img src="images/about/whymochiko.png" alt="Why Mochiko"/></div>
<br/>
<ul class="about-icons">
<li id="about-flavors"><img src="images/about/icon-flavors.png" onmouseover="this.src='images/about/icon-flavors.gif'" onmouseout="this.src='images/about/icon-flavors.png'"/></li>
<li id="about-ingredients"><img src="images/about/icon-ingredients.png" onmouseover="this.src='images/about/icon-ingredients.gif'" onmouseout="this.src='images/about/icon-ingredients.png'"/></li>
<li id="about-milk" class="no-margin-right"><img src="images/about/icon-milk.png" onmouseover="this.src='images/about/icon-milk.gif'" onmouseout="this.src='images/about/icon-milk.png'"/></li>
</ul>`
Thanks in advance!
edit
I checked IE8 image reports and apparently it adjust the width and height of my images to 0px. I have no idea why that happened :| and I have no idea how to fix it
I think this might be a bug in IE with JavaScript. A possible solution would be to have the image loaded then toggle the animations visibility using JavaScript instead?
Since there are no tabs in jQuery Mobile yet, I'm trying to use the navbar to get a similar effect. Here's my HTML code:
<div data-role="navbar">
<ul>
<li><a data-page="desc" href="#" class="ui-btn-active">Description</a></li>
<li><a data-page="reviews" href="#">Reviews</a></li>
<li><a data-page="qanda" href="#">Q&A</a></li>
<li><a data-page="parts" href="#">Parts&Services</a></li>
</ul>
</div>
<div class="panes">
<div data-page="desc">Howdy desc</div>
<div data-page="reviews">Reviews</div>
<div data-page="qanda">You gots questions?!</div>
<div data-page="parts">Parts n stuff</div>
</div>
The problem is, for the life of me I cannot get any click handler to fire off on the iPad. I've tried attaching $.click() to the navbar li, the a tag.. NOTHING works. It works fine on the desktop and I can detect clicks in order to show/hide pages in the "panes" div. But on the iPad (our target), it does nothing. Totally stumped here. Am I missing something?
Try using the tap event rather than click: http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html