I am using flexslider.
It is very easy to implement and customizing.
Now my every slide is a link.
is there any way to put to links for a single slide?
that needs to redirect to PAGE1 when click the left side of the image and must redirect to PAGE2 when click the right side.
Thanks in advance dear seniors...
I've found the answer.
The following method is working
<div class="flexslider">
<ul class="slides">
<!-- slide1 -->
<li>
<img src="images/slider/2.jpg" alt="" usemap="#map2" />
<map name="map2">
<area shape="rect" coords="494,2,961,745" href="http://www.john-anthony.com/mens/jeans/" alt=""/>
<area shape="rect" coords="0,4,482,749" href="http://www.john-anthony.com/vivienne-westwood/blazer-jackets/burgundy/jacket-waistcoat-check/vw024-a13-bur/" alt=""/>
</map>
</li>
</ul>
</div>
I've found the answer. The following method is working
<div class="flexslider">
<ul class="slides">
<!-- slide1 -->
<li>
<img src="images/slider/2.jpg" alt="" usemap="#map2" />
<map name="map2">
<area shape="rect" coords="494,2,961,745" href="http://www.john-anthony.com/mens/jeans/" alt=""/>
<area shape="rect" coords="0,4,482,749" href="http://www.john-anthony.com/vivienne-westwood/blazer-jackets/burgundy/jacket-waistcoat-check/vw024-a13-bur/" alt=""/>
</map>
</li>
</ul>
</div>
Related
Using a basic <ul> and <li> within asp.net project with input controls, can't figure out why <ul> will not expand to full browser width? The <ul> will expand with wider <li> content.
<ul data-role="listview" id="ul-edit-picks" data-divider-theme="a" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("FDID")%>' Font-Bold="True" Font-Size="Medium"></asp:Label>
: Selections</h2>
</li>
<li>1st Week:
<asp:TextBox ID="CHOICE1TextBox" runat="server" Text='1st Week' ReadOnly="True"></asp:TextBox><br />
<asp:HiddenField ID="CHOICE1HiddenField" runat="server" Value='<%# Bind("CHOICE1")%>' />
</li>
<li>2nd Week:
<asp:TextBox ID="CHOICE2TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox><br />
<asp:HiddenField ID="CHOICE2HiddenField" runat="server" Value='<%# Bind("CHOICE2")%>' />
</li>
...
<li>
<asp:Button ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
Text="Update Selections" ToolTip="Click to change your selections..."></asp:Button>
<asp:Button ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel"></asp:Button>
</li>
</ul>
Screen Shots:
Try with data-inset="false" on < ul >
ok the problem was in the <FormView> of the .net section of my page, see: asp.net formview generates table at fixed width 259px
it's seems the default width of 259px is auto generated in the form based on content size.
Im just really new at this, i dont even know how to use CSS, anyway, this is the html that i want to fix, I WANT THE BOXES that has links in them to be highlighted or something when mouse is on it.
<img class="aligncenter wp-image-351" src="http://gms-wga.org/wp-content/uploads/2014/08/WGA-Organogram.jpg" alt="WGA Organogram" usemap="#wga" width="1126" height="1122" />
<map name="wga"> <area title="" alt="" coords="135,131,479,228" shape="rect" href="/about-us/program-implementation-structure/wga-coordinators-and-focal-points/" target="" /> <area title="" alt="" coords="152,299,457,415" shape="rect" href="/about-us/program-implementation-structure/wga-coordinators-and-focal-points/" target="" /> <area title="" alt="" coords="642,132,949,227" shape="rect" href="/about-us/program-implementation-structure/wga-co-chairdirector/" target="" /> <area title="" alt="" coords="662,303,911,394" shape="rect" href="/about-us/program-implementation-structure/adb-officer/" target="" /> <area title="" alt="" coords="290,512,837,742" shape="rect" href="/about-us/program-implementation-structure/wga-secretariat/" target="" /> </map>
Sadly you can't do it with just html. If you want interactivity like that you will have to learn Jquery. Our just javascript in order to do that. A good place to learn it is www.codeacademy.com/
Why dont you use a background image and transparent <div> tags so that it will highlight when you hover? Only if you are okay with using them :)
I am looking for a tabbed navigation menu which caters for images as the tabitems.
So I have something like this:
<div class="menu">
<a href="#">
<img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" />
</a>
<a href="#">
<img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" />
</a>
<a href="#">
<img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/>
</a>
<a href="#">
<img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" />
</a>
<a href="#">
<img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" />
</a>
</div>
I have tried a few jquery/css ones but I cannot find one that gives me a nice style for a tab that contains images?
Try jQuery UI tabs.
Checkout the code on http://jqueryui.com/demos/tabs/#default
Replace Navigation Items in the demo ie.,
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
with your contents, like...
<ul>
<li>
<img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" />
</li>
<li>
<img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" />
</li>
<li>
<img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/>
</li>
<li>
<img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" />
</li>
<li>
<img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" />
</li>
</ul>
Size of the images should be suitable for your tab.
Hope you can understand... :)
If I have a lightbox gallery, is it possible to link one of the images to an external website? So that the other images are treated as the regular lightbox, but if you click on one of the images you are sent to an external webpage?
This solution doesn't work:
<div id="gallery" style="display:inline;">
<ul>
<li>
<a href="http://www.linktohere.com" >
<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
</a>
</li>
</ul>
</div>
Are there any ways to work around this problem?
Thanks.
<htm>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#gallery a').next().lightBox();
});
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="gallery" style="display:inline;">
<ul>
<li>
<a href="http://www.linktohere.com" >
<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image2.jpg" title="title one">
<img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image3.jpg" title="title two">
<img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
</a>
</li>
</ul>
</div>
</body>
</html>
You can use the function .next() to take the next element, all others will be selected exempt the first one.
the use of query like this is more common and it'll be usually be more readable.
I am trying to get an image on the right hand side but it always appear as an arrow.
<ul data-role="listview" data-theme="g">
<li>
<a href="#">
<img src="../Images/play_button.gif" width="16" height="16" class="ui-li-icon" />
<span>Item 1</span>
<span class="ui-li-count">12</span>
</a>
<a href="#">
// I want an image to appear here
</a>
</li>
<li>
<img src="../Images/play_button.gif" width="16" height="16" class="ui-li-icon" />
<span>Item 2</span>
<span class="ui-li-count">9</span>
</li>
</ul>
I'm not sure exactly what is wrong with the layout you're using for the list view,
I would study the documentation and compare it to your code
http://jquerymobile.com/demos/1.0a1/#docs/lists/index.html
If you wanna replace those jqm icons with your icons, read this:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/buttons/buttons-icons.html
See if the "custom icons" section would help you.
I found this as an overview of the list: http://www.youtube.com/watch?v=YaZhS_8vaYo It shows the arrows because the entire contents is wrapped in an <a>, I think if you put the link inside an H3, it will become more contained and not show the error. The only thing I haven't figured out is a custom icon; you may be able to just float it.
I viewed the page source and found it very helpful...
lists-split.html
looks like this.
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a>Purchase album
</li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a>Purchase album
</li>
</ul>