HTML : Photo swipe is not workling - javascript

I am trying to implement photoswipe.js for swipe images in but swipe is not working.
head
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.4.min.js"> </script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady() {
// related functions
alert("check");
$("#Gallery a").photoSwipe();
}
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
body
<ul id="Gallery" class="gallery">
<li><img src="img/img1.jpg" rel="external" alt="" /> </li>
<li><img src="img/img2.jpg" rel="external" alt="" /></li>
</ul>
Can any one please tell me where I made the mistake.
Thanks in advance

I think your cordova loading completed before DOM loads, so add
document.addEvenListener("deviceready", onDeviceReady, true); line
inside document load function.

Related

How to insert jquery code into html?

The website that I am developing has banners, and when the site is viewed on mobile devices, the SWF banner doesn't show. In that case, I need to show an <img> tag, but the jQuery code doesn't work.
My template is something like this:
... (PHP + HTML code)
<script type=”text/javascript”>
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent)) {
</script>
... Show SWF banner
<script type=”text/javascript”>
}
else {
</script>
... Show GIF banner
<script type=”text/javascript”>
}
</script>
But it doesn't work. it shows up both of them instead.
You may need to do this:
Javascript/JQuery:
$(function() {
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent)) {
$("#img").show();
}else{
$("#swf_banner").show();
}
});
HTML:
<img id="img" src=".." style="display:none;"/>
<object id="swf_banner" width="400" height="50" data="bookmark.swf" style="display:none;"></object>

Randomizing start point of Javascript Scrollbox plugin?

I have a set width/height div with an unordered list with 10 li tags, an img tag per li.
I have the images scrolling through vertically using Javascript Scrollbox.
When you land on the page I need to randomize which logo appears in the box first instead of the first li always showing first (and scrolling can continue as normal in order)
Is this possible? If so, can you point me in the right direction?
Here is my code:
HTML inside head:
<script type="text/javascript" src="js/jquery.scrollbox.min.js"></script>
HTML inside body:
<div id="buslogos">
<p>Some of our participating businesses:</p>
<div id="buslogoscroll" class="scroll-img">
<ul>
<li><img src="images/part-bus-logos/abshair-sm.gif" alt="Absolute Hair Inc"></li>
<li><img src="images/part-bus-logos/arena-sm.gif" alt="Arena Tavern"></li>
<li><img src="images/part-bus-logos/davebusters-sm.jpg" alt="Dave & Buster's"></li>
<li><img src="images/part-bus-logos/dunkin-sm.gif" alt="Dunkin' Donuts"></li>
<li><img src="images/part-bus-logos/lazercity-sm.jpg" alt="Lazer City"></li>
<li><img src="images/part-bus-logos/marcos-sm.gif" alt="Marco's Pizza"></li>
<li><img src="images/part-bus-logos/mtimes-sm.gif" alt="Medieval Times"></li>
<li><img src="images/part-bus-logos/stars-sm.gif" alt="Stars and Strikes"></li>
<li><img src="images/part-bus-logos/tomchee-sm.gif" alt="Tom + Chee"></li>
<li><img src="images/part-bus-logos/totalhealth-sm.jpg" alt="Total Health Spa"></li>
</ul>
</div>
</div>
<script>
$(function () {
$('#buslogoscroll').scrollbox({
linear: true,
step: 1,
delay: 0,
speed: 40
});
});
</script>
The jquery.scrollbox.min.js was downloaded from here:
https://github.com/wmh/jquery-scrollbox
Thanks in advance!
Check this out, Let me know if you didn't understand anything.
Live demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://rawgit.com/wmh/jquery-scrollbox/master/jquery.scrollbox.min.js"></script>
<script>
$(function () {
var arrSrc=["http://placehold.it/350x50",
"http://placehold.it/350x60",
"http://placehold.it/350x70",
"http://placehold.it/350x80",
"http://placehold.it/350x90"
];
$('.first img').attr('src',arrSrc[Math.floor((Math.random() * 5) + 0)]);
$('#buslogoscroll').scrollbox({
linear: true,
step: 1,
delay: 0,
speed: 40
});
});
</script>
</head>
<body>
<div id="buslogos">
<p>Some of our participating businesses:</p>
<div id="buslogoscroll" class="scroll-img">
<ul>
<li class="first"><img src=""></li>
<li><img src="http://placehold.it/350x60"></li>
<li><img src="http://placehold.it/350x70"></li>
<li><img src="http://placehold.it/350x80"></li>
<li><img src="http://placehold.it/350x90"></li>
</ul>
</div>
</div>
</body>
</html>

animate image with opicity in javascript doesnt work

This code is suppose to hide image and then show image in slow manner but it is directly show no image and full image
<script type="text/javascript">
var a=1.0;
function trans()
{
document.getElementById("img1").style.opacity=a;
if(a>0)
a=a-0.1;
else
a=1.0;
Window.setTimeout(trans(),1000);
}
</script>
<style>
</style>
</head>
<body onload="trans();">
<img id="img1" src="img/image1.jpg" width="225" height="225" />
</body>
</html>
Use window.setTimeout not Window ... notice the casing
Instead of invoking trans() in your setTimeout, you should pass only the function name trans.
window.setTimeout(trans,1000);
OR if you insist on invoking then wrap it with an anonymouns function.
window.setTimeout(function(){
trans();
}, 1000)
You can try this, "trans()" instead of trans(), the latter is a call.
<script type="text/javascript">
var a=1.0;
function trans()
{
document.getElementById("img1").style.opacity=a;
if(a>0)
a=a-0.1;
else
a=1.0;
window.setTimeout("trans()",1000);
}
</script>
<style>
</style>
</head>
<body onload="trans();">
<img id="img1" src="img/image1.jpg" width="225" height="225" />
</body>
</html>

bxSlider is not working properly

For some reason, I can't make my jQuery work. I've followed every step and nothing! Here's what's happening:
All the styles and JavaScript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"> <\/script>')</script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" type="text/css" />
And my HTML:
<ul id="bxslider">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>
You are initiating the slider using bxslider as class, but in your case you have to use as id selector like:
$(document).ready(function () {
$('#bxslider').bxSlider({
auto: true,
autoControls: true
});
});
Selectors docs: http://api.jquery.com/category/selectors/
Working fiddle: http://jsfiddle.net/IrvinDominin/UV4r4/1/
Also, you would want to load CSS first and then, the JavaScript files.

bxSlider within show/hide divs

My page's content is toggled using different links, showing one div at a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put a picture slider (bxSlider) within one of the divs, newboxes1.
Outside the box, the bxSlider works fine. Within it, the pictures don't show. See live example here.
Here's what my code looks like :
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}</script>
</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
var slider = $('#slidersample').bxSlider({
mode:'fade',
controls: false
});
$('#bx-prev-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#hover-next-g-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#bx-next-sample').click(function(){
slider.goToNextSlide();
return false;
});
$('#hover-next-d-sample').click(function(){
slider.goToNextSlide();
return false;
});
});
});
</script>
</head>
<body>
<div id="left-menu">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br />
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br />
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a>
</div>
<div class="newboxes" id="newboxes1">DIV 1
<!-- SLIDER -->
<div id="slider" style="margin-top: 0px; width="580 px"; height="375 px">
<div class="bx-prev"><div id="bx-prev-sample">←</div></div>
<div class="bx-next"><div id="bx-next-sample">→</div></div>
<div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div>
<div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div>
<ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px">
<li><img src="images/1.jpg" width="580" height="375" /></li>
<li><img src="images/2.jpg" width="580" height="375" /></li>
<li><img src="images/3.jpg" width="580" height="375" /></li>
</ul>
</div>
<!-- SLIDER END-->
</div>
<div class="newboxes" id="newboxes2">DIV 2<br /></div>
<div class="newboxes" id="newboxes3">DIV 3</div>
</body>
</html>
I use
.newboxes {display:none;}
in the CSS so none of the divs are showing when the page is loading. Removing this from the CSS solves the bxSlider issue, as you can see here. However, the content is shown when the page is loaded, while I want all of it to be hidden. Any attempt to use display:block or display:none elsewhere in the code has been unsuccessful.
Can anyone think of a way to fix this? Thank you.
I had the similar problem with bxSlider plugin: when the DIV that contained it was initially hidden display:none, the slideshow would not appear when I make the DIV visible $('#div-id').show();. Only slideshow control buttons appeared. Then I solved the problem like this:
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true
});
$("#processSignUp").click(function() { // button that sets the DIV visible
$("#trainings-slide").show(); // DIV that contain SLIDER
mySlider.reloadSlider(); // Reloads the slideshow (bxSlider API function)
});
});
</script>
As you can see I reloaded the slideshow just after the DIV (that contain the slider) was showed and it worked perfectly. Maybe that can help to solve your problems and to avoid using visibility:hidden and other tricks.
I know this question was asked awhile ago but I have the same issue. I have no idea whats up with bxSlider and display:none. It doesn't seem to read the content if its contained in a div with the display set to none.
I've gotten around it thus far by toggling visibility:hidden and visibility:visible instead of display.
You can use visibility:hidden and visibility:visible, but will some troubles. And you can use height:0px;overflow:hidden;
I`m use last solve
Another solution would be to allow bxslider to load, then hide it once it has.
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true,
onSliderLoad: function() {
$('#trainings-slide').hide();
}
});
});
</script>

Categories

Resources