Add a link to dynamic slider caption - javascript

I have a slider that created by amazingslider plugin. It works good but is there a way to add a link (href) to caption of each image? I tried but the link does not show in the slider caption.
Here is my snippet :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.worldinbag.com/js/amazingslider.js"></script>
<script src="http://www.worldinbag.com/js/initslider-1.js"></script>
<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:804px;margin:0px auto 59px; overflow:hidden;">
<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
<ul class="amazingslider-slides" style="display:none;">
<li>
<img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="This is a caption This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption "
/>
</li>
<li>
<img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="This is a caption" />
</li>
</ul>
<ul class="amazingslider-thumbnails" style="display:none;">
<li>
<img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" />
</li>
<li>
<img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" />
</li>
</ul>
</div>
</div>


What you can do is to add a link tag to the caption attribute. This works if you are using single quotes or escaped double quotes:
<a href='#your-url'>your caption</a>
With this method it's only possible to insert links to the caption, not to link the whole caption itself.
And another hint: Try not to use inline styles, better use the classes and ids you already use to apply your styles.
#amazingslider-wrapper-1 {
display: block;
position: relative;
max-width: 804px;
margin: 0 auto;
overflow: hidden;
}
#amazingslider-1 {
display: block;
position: relative;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.worldinbag.com/js/amazingslider.js"></script>
<script src="http://www.worldinbag.com/js/initslider-1.js"></script>
<div id="amazingslider-wrapper-1">
<div id="amazingslider-1">
<ul class="amazingslider-slides" style="display:none;">
<li>
<img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="<a href='#'>This is a link</a> This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption "
/>
</li>
<li>
<img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="<a href='#'>This is a link</a>" />
</li>
</ul>
<ul class="amazingslider-thumbnails" style="display:none;">
<li>
<img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" />
</li>
<li>
<img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" />
</li>
</ul>
</div>
</div>

Related

Flexslider main image open in fancybox

I want to open main image in fancybox when click on main image in flexslider.
If possible that when click on main image and open it in fancybox with all thumbnail as like display in flexslider with prev and next button.
How to do it possible? Is there any parameter in flexslider or need to do customization?
Please help me. I mention code here.
Thanks
=> Code :
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox.css"/>
<script src="modernizr.js"></script>
<script src="jquery.flexslider.js"></script>
<style type="text/css">
#import "https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css";
body { font-family: avenir, sans-serif; }
#slider .slides img {
width: 450px;
height: 300px;
margin: 0 auto;
}
.container{
max-width: 50%;
margin : 0 auto;
}
#carousel .flex-active-slide img {
opacity: 1;
}
#carousel img {
opacity: 0.65;
}
.flex-direction-nav .flex-next { right: 0 !important; margin-right: -40px; }
.flex-direction-nav .flex-prev { left: 0 !important; margin-left: -40px; }
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; cursor: pointer;}
</style>
<script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 70,
itemMargin: 10,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
$('#carousel li').click(function() {
$('#carousel li').removeClass('flex-active-slide')
$(this).addClass('flex-active-slide');
});
</script>
</head>
<body>
<!-- Include jQuery library and Flexslider script -->
<!-- Place somewhere in the <body> of your page -->
<div class="container">
<div id="slider" class="flexslider" onclick="func(this)">
<ul class="slides">
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<li>
<img src="7.jpg" />
</li>
<li>
<img src="8.jpg" />
</li>
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<li>
<img src="7.jpg" />
</li>
<li>
<img src="8.jpg" />
</li>
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</div>
</body>
</html>

fancyBox works with any slider/carousel, you just have to iniatialise using .selector option and you have to tweak this to suit your needs, e.g., this selector has to return visible links and has to exclude duplicates. Something like this:
$().fancybox({
selector : '.slides li:not(.clone) a'
});
Here are demos using
Slick - https://codepen.io/fancyapps/pen/pdbrjx
OwlCarousel2 - https://codepen.io/fancyapps/pen/mqvOoz
Swiper - https://codepen.io/fancyapps/pen/eWVyVg
flexslider - https://codepen.io/fancyapps/pen/QQdXwx

How Do I make a <div> slide into view when a button is clicked?

I have a page that has a background wallpaper with 100% width and its 100vh height. The page has 3 buttons on it and one of the buttons is located at the extreme left side of the screen. When I click that button, I am hoping the div would slide to the right to cover the entire page.
I had tried using slide toggle but my div is currently located at the bottom of my title page so when it toggles, the div toggles vertically--not horizontally.
My title page is 100vh but the div I'm trying to slide into place doesn't have a fixed height.
#title {
width: 100%;
background-image: url(../Images/Arthur%20and%20Merlin%202%20updated.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
position: relative;
display: inline-block;
}
#characters {
width: 100%;
display: inline-block;
}
<div id="maincontainer">
<header id="title">
<h1>Arthur and Merlin</h1>
<h3>Battle For Camelot</h3>
<div id="titlebutton">Join The Battle
</div>
<input id="checkboxforplaces" type="checkbox">
<label id="toplaces" for="checkboxforplaces">
<img src="Icons/castle.png">
</label>
<input id="checkboxforchar" type="checkbox">
<label id="tocharacters" for="checkboxforchar">
<img src="Icons/helmet.png">
</label>
</header>
<section id="characters">
<div id="firstrow">
<article id="arthurbox">
<a id="arthur" href="#">
<img src="Images/Arthur/Arthur%201.jpg" </a>
</article>
<article id="merlinbox">
<a id="merlin" href="#">
<img src="Images/Merlin/merlin%202.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="secondrow">
<article id="morganabox">
<a id="morgana" href="#">
<img src="Images/Morgana/Morgana1.jpg">
</a>
</article>
<article id="youngmordredbox">
<a id="youngmordred" href="#">
<img src="Images/YoungMordred/Mordred2.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="thirdrow">
<article id="utherbox">
<a id="uther" href="#">
<img src="Images/Uther/Uther.jpg">
</a>
</article>
<article id="gaiusbox">
<a id="gaius" href="#">
<img src="Images/Gaius/Gaius-15hdg5a.jpg">
</a>
</article>
<div id="clear"></div>
</div>
</section>
</div>

I think this jsfiddle may be useful for you.
$(document).ready(function(){
$('#hide').click(function(){
var hidden = $('.hidden');
hidden.hide('slide', {direction: 'left'}, 400);
});
$('#show').click(function(){
var hidden = $('.hidden');
hidden.show('slide', {direction: 'left'}, 400);
});
});
https://jsfiddle.net/ZQTFq/3372/
Modify the code depending on your needs.

why css break of arrow using jQuery mobile?

When I make a simple demo of pop up having 2 or 3 items my triangle arrow is visible on the bottom.
http://jsfiddle.net/TFX6p/8/
When I add more items and set height and overflow:auto; my triangle arrow does not display, why?
http://jsfiddle.net/TFX6p/12/
<div data-role="page" id="MainPage">
<div data-role="popup" id="Mainnavpanel" data-theme="b" data-arrow="b">
<ul data-role="listview">
<li> Close
</li>
<li>Page1
</li>
<li>Page2
</li>
<li>Page3
</li>
<li> Close
</li>
<li>Page1
</li>
<li>Page2
</li>
<li>Page3
</li>
</ul>
</div>
<div data-role="header" id="MainPageheader" data-position="fixed" data-tap-toggle="false" data-fullscreen="false">
<h1>Header</h1>
</div>
<div data-role="content">content</div>
<a href="#Mainnavpanel" data-rel="popup" data-role="button" >openpopup</a>
</div>

Scroll on ul element will not work, try to apply width-height on outer div#Mainnavpanel-popup like,
#Mainnavpanel-popup{
width: 300px;
height: 200px;
overflow: auto;
}
Demo
Updated if it should be visible then apply css on class ui-listview like,
.ui-listview{
width: 300px;
height: 200px;
overflow: auto;
}
Updated Demo

Responsive Design: Below 768px , my banner images are very stretched. I tried height=auto, but IE9 didn't display them at all then

Responsive Design: Below 768px , my banner images are very stretched. I tried height=auto, but IE9 didn't display them at all then.
So, how can I make the height not stretch and look decent?
I'm using: Bootstrap 3.1.1, jQuery 1.11, and FlexSlider (the images in question are in a FlexSlider Carousel)
My web page is at:
http://www.amleo.com/
My HTML is:
<section class="slider">
<div class="container White_BG">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8">
<!--Slider Start-->
<div class="flexslider" id="mainslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 1200%; margin-left: -1514px;">
<li class="clone" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/Search.aspx?ss=Leonard+Fertilizer" title="Leonard Fertilizer Stakes and Tablets">
<img src="http://cdnll.amleo.com/images/art/1438_leonard-fertilizer-web.jpg" width="770" height="322" title="Leonard Fertilizer Stakes and Tablets" alt="Leonard Fertilizer Stakes and Tablets">
</a>
</li>
<li class="" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/deer/a/84/kc/4G14Pw/" target="_blank" title="Tenex Deer Fencing Sale">
<img src="http://cdnll.amleo.com/images/art/1441-Deer-Fencing.jpg" width="770" height="322" title="Tenex Deer Fencing Sale" alt="Tenex Deer Fencing Sale">
</a>
</li>
<li style="width: 757px; float: left; display: block;" class="flex-active-slide">
<a href="http://www.amleo.com/polysample/a/29_31/" target="_blank" title="OW Poly Sample">
<img src="http://cdnll.amleo.com/images/art/1433_ow-plus-web.jpg" width="770" height="322" title="OW Poly Sample" alt="OW Poly Sample">
</a>
</li>
<li style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/quickorder.aspx" title="Quick Order Form">
<img src="http://cdnll.amleo.com/images/art/1441-quick-order-content-web.jpg" width="770" height="322" title="Quick Order Form" alt="Quick Order Form">
</a>
</li>
<li style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/Search.aspx?ss=Leonard+Fertilizer" title="Leonard Fertilizer Stakes and Tablets">
<img src="http://cdnll.amleo.com/images/art/1438_leonard-fertilizer-web.jpg" width="770" height="322" title="Leonard Fertilizer Stakes and Tablets" alt="Leonard Fertilizer Stakes and Tablets">
</a>
</li>
<li class="clone" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/deer/a/84/kc/4G14Pw/" target="_blank" title="Tenex Deer Fencing Sale">
<img src="http://cdnll.amleo.com/images/art/1441-Deer-Fencing.jpg" width="770" height="322" title="Tenex Deer Fencing Sale" alt="Tenex Deer Fencing Sale">
</a>
</li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging">
<li><a class="">1</a></li>
<li><a class="flex-active">2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ol>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="#">Previous</a></li>
<li><a class="flex-next" href="#">Next</a></li>
</ul>
</div>
<!--Slider End-->
</div>
<!--Side Banner-->
<div class="col-md-3 hidden-md hidden-sm hidden-xs visible-lg" style="border:4px;padding-left:0px!important;">
<a href="http://www.amleo.com/careers/a/66/" title="AM Leonard Careers">
<img src="http://cdnll.amleo.com/images/art/Career_ad_2014.jpg" width="379" height="321" alt="AM Leonard Careers">
</a>
</div>
<!--End Side Banner-->
</div>
</section>

In flexslider.css it reads:
.flexslider .slides img { ... }
It looks like you need to add height: auto; and then use javascript to remove the height attribute that the slider is applying to the images.
Something along the lines of:
jQuery('.slides img').attr('height', '');

Use
.flexslider .slides img{ width:auto;}
If you do not want to stretch an image.

how to scroll the page?

when I run the below code, the page doesn't scroll, and doesn't show all of my page container. first I used Ajax but my menu didn't work. then I had to use Iframe tag. but it has a problem too. I try to discover the problem but I didn't succeed. can anybody help me to solve this?
<div id="maincontainer" style="position: fixed; width: 80%; height:500px; right: 10%; ">
<table style="background-color: rgb(100, 100, 100); border-radius: 5px;" dir="rtl">
<tr>
<td style="width: 90px; height: 30px;">صفحه اصلی</td>
<td style="width: 60px; height: 30px;">پروفایل</td>
</tr>
</table>
<div id="three" style="font-family: 'B Homa'; font-size: large;">
<ol>
<li data-slide-name="slide-one">
<h2>
<span>مدیریت مدیران</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/1.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-two">
<h2>
<span>مدیریت فرم ها</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/2.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-three">
<h2>
<span>مدیریت فرهنگی</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/3.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-four">
<h2>
<span>مدیریت آپلود سنتر</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/4.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-five">
<h2>
<span>مدیریت اخبار</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/5.jpg" alt="image" />
</div>
</li>
</ol>
<noscript>
<p>
Please enable JavaScript to get the full experience.
</p>
</noscript>
</div>
<div>
<ul class="menu">
<li><span class="l"></span><span class="r"></span><span class="t">مديريت کاربران</span>
<ul>
<li>کاربران فعال</li>
<li>کاربران بلاک</li>
<li>تمام کاربران</li>
<li>کاربران تایید نشده</li>
</ul>
</li>
<li><a href="#"><span class="l"></span><span class="r"></span>
<span class="t">مديريت آپلودسنتر</span></a>
<ul>
<li>نمایه جدید</li>
<li>لیست نمایه ها</li>
<li>دسته بندی جدید</li>
<li>لیست دسته ها</li>
<li>آیتم جدید</li>
<li>لیست آیتم ها</li>
</ul>
</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentcolumn"><%--<div id="newContent" style="float:left; width: 100%; height: 615px; direction: rtl; ">
</div>--%>
<iframe id="frame" runat="server" style="width: 1095px; height: 1600px;"></iframe>
</div>
</div>
<div id="stickybar" class="expstickybar">
</div>
<div style="text-align: center; padding-top: 3px">
<b>Copyright (c)</b>
</div>
<!-- LeftPanel Plugin -->
<div class="float">
<div class="moduletable">
<p>
برنامه امروز
</p>
</div>
</div>
<script language="javascript" type="text/javascript">
//$(document).ready(function () {
// $('#accordion').accordion();
//});
function ChangeSrc(trg) {
var frm = document.getElementById("frame");
if (frm) {
frm.src = trg;
}
}
</script>
<script type="text/javascript">
(function ($, d) {
$('#three').liteAccordion({ autoPlay: true, theme: 'dark', rounded: true, enumerateSlides: true, firstSlide: 1, easing: 'easeInOutQuart' });
})(jQuery, document);
</script>
</div>

Please, just remove the css property position: fixed; from maincontainer div.
As you can see at this sample that I made from you sample html code, I just remove that property.
You could also play around with the css property overflow:auto; that controls when to show the scroll, or show/hide the content beyond the limited area of a div.

Categories