I trying to play sound on list hover or mouseenter . this list have img inside the a
attribute
this it html code and js
function playclip()
{
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}
<ul id="nav1" class="widgeticons2">
<li>
<a onmouseover="playclip();" href="Statistics.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" />
asdf2
</a>
</li>
<li>
<a onmouseover="playclip();" href="SMS.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" alt="" />
asdfg1
</a>
</li>
</ul>
once i put the mouse inside a it play sound. Go to image and back to a its play again
how to make sound play only one time until it go out the li itself
html
<audio>
<source src="../Styles/SMSKat/Sounds/Hover.mp3" />
<source src="../Styles/SMSKat/Sounds/click.mp3" />
<source src="../Styles/SMSKat/Sounds/click.ogg" />
</audio>
<ul id="nav1" class="widgeticons2">
<li class="mtrack">
<a href="Statistics.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" />
asdf2
</a>
</li>
<li class="mtrack">
<a href="SMS.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" alt="" />
asdfg1
</a>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
javascript
function playclip(){
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}
$(document).ready(function() {
$('.mtrack').on('mouseenter',function(){
if(!$(this).hasClass('.played')){
playclip();
$(this).addClass('.played');
}
});
$('.mtrack').on('mouseleave',function(){
if($(this).hasClass('.played')){
$(this).removeClass('.played');
}
});
});
Related
Access images and Videos from a specific local folder in UWP Javascript application
We want to create a slider using the images and videos from a specific folder from the device.
Means, As the UWP application starts it should take the content(Assets) from the Specific folder in Uwp javascript application.
Any way to do this.?
for example: we want to get the content from d:/My project data.
<style>
body {
font: normal 0.9em Arial;
color: #ddd;
background: #FFFFFF;
}
header {
display: block;
font-size: 1.2em;
margin-bottom: 100px;
}
header a, header span {
display: inline-block;
padding: 4px 8px;
margin-right: 10px;
border: 2px solid #000;
background: #DDD;
color: #000;
text-decoration: none;
text-align: center;
height: 20px;
}
header span {
background: white;
}
a {
color: #7fa9fe;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Demo 4: jQuery Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/thumbs2.css" rel="stylesheet" />
<link href="css/thumbnail-slider.css" rel="stylesheet" />
<script src="js/thumbnail-slider.js" type="text/javascript"></script>
<script src="thumbnail-slider.js"></script>
<body>
<!--start-->
<div style="padding:260px 0;background:#FFFFFF;">
<div id="thumbnail-slider">
<div class="inner">
<ul>
<li>
<a class="thumb" href="img/1.jpg"></a>
</li>
<li>
<a class="thumb" href="img/2.jpg"></a>
</li>
<li>
<a class="thumb" href="img/3.jpg"></a>
</li>
<li>
<a class="thumb" href="img/4.jpg"></a>
</li>
<li>
<a class="thumb" href="img/5.jpg"></a>
</li>
<li>
<a class="thumb" href="img/6.jpg"></a>
</li>
<li>
<a class="thumb" href="img/7.jpg"></a>
</li>
<li>
<a class="thumb" href="img/8.jpg"></a>
</li>
<li>
<a class="thumb" href="img/9.jpg"></a>
</li>
<li>
<a class="thumb" href="img/10.jpg"></a>
</li>
<li>
<a class="thumb" href="img/11.jpg"></a>
</li>
<li>
<a class="thumb" href="img/2.jpg"></a>
</li>
<li>
<a class="thumb" href="img/3.jpg"></a>
</li>
<li>
<a class="thumb" href="img/4.jpg"></a>
</li>
<li>
<a class="thumb" href="img/5.jpg"></a>
</li>
<li>
<a class="thumb" href="img/6.jpg"></a>
</li>
<li>
<a class="thumb" href="img/7.jpg"></a>
</li>
<li>
<a class="thumb" href="img/8.jpg"></a>
</li>
<li>
<a class="thumb" href="img/9.jpg"></a>
</li>
<li>
<a class="thumb" href="img/10.jpg"></a>
</li>
<li>
<a class="thumb" href="img/11.jpg"></a>
</li>
<li>
<video width="350" height="350" autoplay="autoplay" loop="loop" display="inline-block;">
<source src="img/mcvideo.mp4" type="video/mp4" />
</video>
<li>
<video width="260" height="260" autoplay="autoplay" loop="loop" display="inline-block;">
<source src="img/SampleVideo_640x360_1mb.mp4" type="video/mp4" />
</video>
</li>
<li>
<video width="260" height="260" autoplay="autoplay" loop="loop" display="inline-block;">
<source src="img/small.mp4" type="video/mp4" />
</video>
</li>
</ul>
</div>
</div>
</div>
<!--end-->
<div style="max-width:700px;margin:0 auto 80px;background:#333;">
</div>
</body>
</html>
can you please show me how to use StorageFile API to Access Images and Videos Access images and
After you added broadFileSystemAccess capability, you could use Windows Storage Api to access specific folder such as D disk. Then convent the image file to Base64 data for displaying. You could refer the following.
function ConverToBase64(file, success) {
file.openAsync(Windows.Storage.FileAccessMode.read).then(function (stream) {
var inputStream = stream.getInputStreamAt(0);
var reader = new Windows.Storage.Streams.DataReader(inputStream);
var size = stream.size;
if (size > 0) {
reader.loadAsync(size).then(function () {
var buffer = reader.readBuffer(size);
var base64 = Windows.Security.Cryptography.CryptographicBuffer.encodeToBase64String(buffer);
success(base64);
})
}
});
}
function addimage() {
Windows.Storage.StorageFile.getFileFromPathAsync("D:\\hello.PNG").then(
function (file) {
ConverToBase64(file, function (str) {
var img = document.createElement("img");
img.src = 'data:image/png;base64,' + str;
document.getElementById("myDiv").appendChild(img);
});
}, function (error) {
}
);
}
I have used lightGallery plugin to play youtube, vimeo, and html5 videos. When a user clicks the image videos should play automatically.
Please check the Demo, It's working fine. But the problem is if there are two html5 videos both are playing at the same time. Youtube videos are not like that. When you click the image one youtube video will play at a time and when you slide to next video, the previous video will pause and the new video will play. But html5 all videos are playing at the same time. Please help.
$(document).ready(function() {
$('#html5-videos').lightGallery({});
});
img {
width: 220px;
height: 150px;
}
ul {
list-style: none;
}
li {
display: initial;
}
<link href="https://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.6/js/lightgallery-all.min.js"></script>
<!-- Hidden video div -->
<div style="display:none;" id="video1">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="https://sachinchoolur.github.io/lightGallery/static/videos/video4.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div style="display:none;" id="video2">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="http://sachinchoolur.github.io/lightGallery/static/videos/video2.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<ul id="html5-videos">
<!-- Youtube video -->
<li class="selectoritem video width100" data-src="https://www.youtube.com/watch?v=yp0a1oZQRVM" data-sub-html="Youtube video first">
<a href="" class="thumbnail width100 portimgfullwidth" style="background-image: url(https://img.youtube.com/vi/yp0a1oZQRVM/0.jpg);">
<img class="img-responsive widthauto hide" src="https://img.youtube.com/vi/yp0a1oZQRVM/0.jpg">
</a>
</li>
<li class="selectoritem video width100" data-src="https://www.youtube.com/watch?v=g4o8jfO92CI" data-sub-html="Youtube video second">
<a href="" class="thumbnail width100 portimgfullwidth" style="background-image: url(https://img.youtube.com/vi/g4o8jfO92CI/0.jpg;">
<img class="img-responsive widthauto hide" src="https://img.youtube.com/vi/g4o8jfO92CI/0.jpg">
</a>
</li>
<!-- Html 5 video -->
<li data-sub-html="video caption1" data-html="#video1">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/videos/h-video3-poster.jpg" />
</li>
<li data-sub-html="video caption2" data-html="#video2">
<img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-1.jpg" />
</li>
</ul>
I found the answer on GitHub.
https://github.com/sachinchoolur/lightGallery/issues/598
https://github.com/sachinchoolur/lightGallery/issues/524
I updated lg-video.js and it's working fine.
I am trying to load videos after the page finishes loading. The script I'm using works in firefox and chrome, but throws errors in Edge/IE.
the error is SCRIPT5007: Unable to get property 'append' of undefined or null reference I get it on the full build and the line it indicates is iframe.id = v[n].getAttribute('youtube'); The issue is that it doesn't add the iframe to the page so no videos. The error on codepen is Unable to get property 'src' of undefined or null reference since the iframe is not getting appended to the page. Here is the html/js I'm currently using. I've tried a few variations like v[n].attr(). I tried changing it to data-youtube and using v[n].dataset.youtube. Nothing seems to work in Edge.
codepen working on ff/chrome
<section data-grid="container stack-2" class="m-multi-feature f-align-center" id="m-multi-tiles">
<section data-grid="container">
<ul role="tablist">
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 13" aria-controls="newIconItemImage13 newIconItemContent13">
<span>Skyworld</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 11" aria-controls="newIconItemImage11 newIconItemContent11">
<span>SteamVR</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 12" aria-controls="newIconItemImage12 newIconItemContent12">
<span>SUPERHOT VR</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 14" aria-controls="newIconItemImage14 newIconItemContent14">
<span>Free the Night</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 15" aria-controls="newIconItemImage15 newIconItemContent15">
<span>Minecraft</span>
</a>
</li>
</ul>
<ul id="m-multi-description">
<li id="newIconItemContent13" role="tabpanel" class="f-active">
<h4 class="c-heading-10">VERTIGO GAMES</h4>
<h3 class="c-heading">Skyworld</h3>
<p class="c-paragraph">Manage your economy, build and lead royal armies, rule dragons to restore your kingdom to glory. Battle the forces of evil as you conquer and reunite all Skyworlds in this turn-based strategy game that brings the beloved gameplay of strategy classics to VR.</p>
</li>
<li id="newIconItemContent11" role="tabpanel" >
<!-- <h4 class="c-heading-10">Microsoft</h4> -->
<h3 class="c-heading">Steam®VR</h3>
<p class="c-paragraph">Dive into many of the most popular VR games available today. Experience more than 2,000 titles from the Steam®VR library on Windows Mixed Reality.<sup>11</sup></p>
</li>
<li id="newIconItemContent12" role="tabpanel">
<h4 class="c-heading-10">SUPERHOT TEAM</h4>
<h3 class="c-heading">SUPERHOT VR</h3>
<p>
The iconic VR FPS is here; time moves only when you do.
</p>
</li>
<li id="newIconItemContent14" role="tabpanel">
<h4 class="c-heading-10">JAUNT</h4>
<h3 class="c-heading">Free the Night</h3>
<p class="c-paragraph">A magical interactive VR journey that invites you to blow out city lights and return the stars back into the night sky.</p>
</li>
<li id="newIconItemContent15" role="tabpanel">
<h4 class="c-heading-10">MICROSOFT</h4>
<h3 class="c-heading">Minecraft</h3>
<p class="c-paragraph">Get right inside the world of Minecraft with mixed reality. Build, explore and battle mobs - do all the things you know and love - but from a fresh perspective.</p>
</li>
</ul>
<div class="c-carousel f-multi-slide" role="region" aria-label="Images">
<div class="background-skew"></div>
<div itemscope itemtype="http://schema.org/ItemList">
<ul>
<li id="newIconItemImage13" data-f-theme="dark" role="tabpanel" class="f-active">
<picture class="c-image">
<source srcset="assets/video/skyworld.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:1400px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:1084px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:768px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:540px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:0)">
<img srcset="assets/video/skyworld.jpg" src="assets/video/skyworld.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video3','youtube3')"></a>
</li>
<div id="video3" class="lightbox" onclick="hideVideo('video3','youtube3')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="SN20mKCMEe8" youtube="youtube3">
<!-- <iframe id="youtube3" width="960" height="540" src="https://www.youtube.com/embed/SN20mKCMEe8?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video3','youtube3')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage11" data-f-theme="light" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1400px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1084px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:768px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:540px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:0)">
<img srcset="assets/video/steam-vr-1600.jpg" src="assets/video/steam-vr-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video','youtube')"></a>
</li>
<div id="video" class="lightbox" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="dXOVk5SNBRU" youtube="youtube">
<!-- <iframe id="youtube" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video','youtube')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage12" data-f-theme="light" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:1400px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:1084px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:768px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:540px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:0)">
<img srcset="assets/video/superhot-1600.jpg" src="assets/video/superhot-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video2','youtube2')"></a>
</li>
<div id="video2" class="lightbox" onclick="hideVideo('video2','youtube2')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="A1jothqmqHw" youtube="youtube2">
<!-- <iframe id="youtube2" width="960" height="540" src="https://www.youtube.com/embed/A1jothqmqHw?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video2','youtube2')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage14" dat1a-f-theme="dark" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/free-the-night.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:1400px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:1084px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:768px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:540px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:0)">
<img srcset="assets/video/free-the-night.jpg" src="assets/video/free-the-night.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video4','youtube4')"></a>
</li>
<div id="video4" class="lightbox" onclick="hideVideo('video4','youtube4')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="tlKQJcH0mgY" youtube="youtube4">
<!-- <iframe id="youtube4" width="960" height="540" src="https://www.youtube.com/embed/tlKQJcH0mgY?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video4','youtube4')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage15" dat1a-f-theme="dark" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/minecraft-thumb.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1400px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1084px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:768px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:540px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:0)">
<img srcset="assets/video/minecraft-thumb-1259.jpg" src="assets/video/minecraft-thumb-1259.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video5','youtube5')"></a>
</li>
<div id="video5" class="lightbox" onclick="hideVideo('video5','youtube5')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="dXOVk5SNBRU" youtube="youtube5">
<!-- <iframe id="youtube5" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video5','youtube5')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
</ul>
</div>
</div>
</section>
//lazy load youtube vids
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?showinfo=0";
iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.id = v[n].attributes['youtube'].value;
v[n].append(iframe);
console.log(v[n].getAttribute('youtube') + 'youtube');
}
});
// Function to reveal lightbox and add YouTube autoplay
function revealVideo(div, video_id) {
var video = document.getElementById(video_id).src;
document.getElementById(video_id).src = video + '&autoplay=1'; // adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div, video_id) {
var video = document.getElementById(video_id).src;
var cleaned = video.replace('&autoplay=1', ''); // removing autoplay form url
document.getElementById(video_id).src = cleaned;
document.getElementById(div).style.display = 'none';
}
I ended up getting it to work by using iframe.setAttribute('id', v[n].getAttribute('youtube')); not sure why this works and not v[n].attributes['youtube'].value;
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?showinfo=0";
iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.setAttribute('id', v[n].getAttribute('youtube'));
v[n].appendChild(iframe);
}
});
I trying to play sound on list hover or mouseenter . this list have img inside the a/> attribute
this it html code and js
function playclip()
{
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}
<ul id="nav1" class="widgeticons2">
<li>
<a onmouseover="playclip();" href="Statistics.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" />
<span">إحصائيات
</span>
</a>
</li>
<li>
<a onmouseover="playclip();" href="SMS.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" alt="" />
<span>النظام
</span>
</a>
</li>
</ul>
once i put the mouse inside a/> it play sound. Go to image and back to a/> its play again
how to make sound play only one time until it go out the li/> itself
function playclip(){
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}
$(document).ready(function() {
$('.mtrack').on('mouseenter',function(){
if(!$(this).hasClass('.played')){
playclip();
$(this).addClass('.played');
}
});
$('.mtrack').on('mouseleave',function(){
if($(this).hasClass('.played')){
$(this).removeClass('.played');
}
});
});
<audio>
<source src="../Styles/SMSKat/Sounds/Hover.mp3" />
<source src="../Styles/SMSKat/Sounds/click.mp3" />
<source src="../Styles/SMSKat/Sounds/click.ogg" />
</audio>
<ul id="nav1" class="widgeticons2">
<li class="mtrack">
<a href="Statistics.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" />
asdf2
</a>
</li>
<li class="mtrack">
<a href="SMS.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" alt="" />
asdfg1
</a>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
I am using jQuery-ui for it's tab feature and also using bxSlider to slide images/content within only the first tab. However, when I click on the second tab the bxSlider "prev" and "next" options are still in my container. I tried using event.stopPropagation(), event.preventDefault() and stop() to stop the function, after realizing those didn't work I tried to create a function like this:
(function() {
$('#ab').click(function() {
$('#showcase').bxSlider({
controls: false,
});
});
});
where '#ab' is the tab and #showcase is the list element the images are located in. This function wouldn't exactly stop the bxSlider from being active, it would simply just hide the controls. However this did not work either.
Does anyone have any idea how this can be done?
Here is my HTML:
<div class="container">
<div id="tabs">
<ul>
<li><a id="sh" href="#showcase">Resumes</a></li>
<li><a id="ab" href="#about">About</a></li>
</ul>
<div id="showcase_container">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
<div id="about">
<span class="ab_title">Portfolio</span>
<ul id="portfolio_list">
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
And here is my JavaScript:
//initialize tabs
$(document).ready(function() {
$('#tabs').tabs();
});
//initialize slider
$(document).ready(function(){
$('#showcase').bxSlider({
hideControlOnEnd: true,
infiniteLoop: false,
});
});
Any help would be greatly appreciated! If this cannot be done can someone please redirect me to a similar image/content slider so I can make this work?
Wrap the ul tag used for the slider in another div (called showcaseTab) or whatever. The bxslider will then be contained to that tab and the arrows should show and hide the correct way.
<div id="showcaseTab">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
</div>