I have downloaded and implemented some jquery code that makes a photo gallery on my website from an instagram hashtag. I have been trying to edit this code so that clicking on the images in the gallery show up in a lightbox rather than following a link back to instagram.
Here is the the source for the code: http://www.jqueryscript.net/social-media/jQuery-Plugin-To-Create-An-Endless-Instagram-Gallery-embedstagram.html
The Lightbox code I have been using is fancybox: http://www.jqueryscript.net/lightbox/Responsive-jQuery-Lightbox-With-Amazing-CSS3-Effects-Fancy-Box-2.html
On my site the necessary components are loaded for both Jqueries and the function is run like so:
<script>
$(document).ready(function(){
$(".ins_popup").fancybox({
openEffect : 'fade',
closeEffect : 'fade'
});
});
</script>
I have found the href in the original gallery jquery that links to instagram and edited it to include the class 'ins_popup' like so:
function renderPhotos(data) {
$.each(data.data, function (i, photo) {
photo = '<li class="photo"><img src="' + photo.images.standard_resolution.url.replace(/\\/, "") + '"></li>';
This does not seem to work however and the link now just opens an enlarged version of the picture rather than opening it in fancybox. I have tested each of the components (fancybox / hashtag gallery) separetly without problem, I just can't seem to get them to talk to one another.
And the associated code:
<!DOCTYPE html>
<html>
<head>
<title>Embedstagram jQuery Plugin Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- Include CSS Fies -->
<link href="https://www.googledrive.com/host/0B_9gRWttmryISVpkTGFhVV8yajQ" rel="stylesheet" type="text/css" >
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css">
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include fancybox library -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script>
$(document).ready(function(){
$(".ins_popup").fancybox({
openEffect : 'fade',
closeEffect : 'fade'
});
});
</script>
</head>
<body>
<div class="jquery-script-clear"></div>
<h1 style="margin:150px auto 30px auto;">Embedstagram jQuery Plugin Demo</h1>
<div id="embedstagram"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://www.googledrive.com/host/0B_9gRWttmryIbE0yNUJaeHNOQVk"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#embedstagram').embedstagram({
client_id: '6f3244d01df94bb98785d04861561307',
hashtag: '#neverlutionsoundsystem' ,
thumb: 'tile'
});
});
</script>
</body>
</html>
and the Jquery for the gallery which I have edited:
/*global jQuery, window*/
(function ($) {
$.fn.embedstagram = function (options) {
var $this = this,
next_url = '';
var settings = $.extend({
client_id: '',
username: '',
hashtag: '#neverlutionsoundsystem',
count: 20,
responsive: true,
load_more: true,
thumb: 'default',
theme: 'default'
}, options);
settings.hashtag = settings.hashtag.replace('#', '');
$this
.addClass('embedstagram')
.addClass('thumb-' + settings.thumb)
.addClass('theme-' + settings.theme)
.append('<ul></ul>')
.append('Loading..');
var $photos = $this.find('ul'),
$button = $this.find('#function-button');
function resize() {
if (settings.responsive) {
var e = $this.width();
var $photo = $('.photo');
if (1024 >= e && e > 768) {
$photo.css({'width': '25%', 'padding-bottom': '25%'});
} else if (768 >= e && e > 570) {
$photo.css({'width': '33.3%', 'padding-bottom': '33.3%'});
} else if (570 >= e && e > 400) {
$photo.css({'width': '50%', 'padding-bottom': '50%'});
} else if (400 > e) {
$photo.css({'width': '100%', 'padding-bottom': '100%'});
} else {
$photo.css({'width': '20%', 'padding-bottom': '20%'});
}
}
}
function renderPhotos(data) {
$.each(data.data, function (i, photo) {
photo = '<li class="photo"><img src="' + photo.images.standard_resolution.url.replace(/\\/, "") + '"></li>';
$photos.append(photo);
return i <= (settings.count);
});
}
function getUrl(user_id) {
var modifier;
if (user_id) {
modifier = 'users/' + user_id;
} else if (settings.hashtag) {
modifier = 'tags/' + settings.hashtag;
}
if (next_url) {
return next_url;
}
return 'https://api.instagram.com/v1/' + modifier + '/media/recent/?&client_id=' + settings.client_id + '&count=' + settings.count;
}
function getPhotos(user_id) {
$button.text('Loading..');
$.ajax({
type: "GET",
dataType: 'jsonp',
url: getUrl(user_id),
success: function (data) {
if (data.meta.error_message) {
var error_message = 'Error: ' + data.meta.error_message.toLowerCase();
$button.text(error_message).addClass('error');
return false;
}
if (!settings.load_more) {
$this.addClass('hide-load-more');
}
$button.text('Load More');
renderPhotos(data);
next_url = data.pagination.next_url;
if (!next_url) {
$button.text('No more images').addClass('disabled');
}
resize();
},
error: function () {
$button.text('Error: unknown').addClass('error');
}
});
}
if (settings.username) {
$.ajax({
type: "GET",
dataType: 'jsonp',
url: 'https://api.instagram.com/v1/users/search?q=' + settings.username + '&client_id=' + settings.client_id,
success: function (data) {
if (data.meta.error_message) {
var error_message = 'Error: ' + data.meta.error_message.toLowerCase();
$button.text(error_message).addClass('error');
return false;
}
if (data.data.length) {
var num_items = data.data.length - 1;
$.each(data.data, function (i, user) {
if (settings.username === user.username) {
var user_id = user.id;
getPhotos(user_id);
return false;
}
if (i === num_items) {
$button.text('Error: no users found').addClass('error');
}
});
} else {
$button.text('Error: no users found').addClass('error');
}
},
error: function () {
$button.text('Error: unknown').addClass('error');
}
});
} else if (settings.hashtag) {
getPhotos();
} else {
$button.text('Error: missing username or hashtag').addClass('error');
}
$button.click(function (e) {
e.preventDefault();
if (!$(this).is('.disabled, .error')) {
getPhotos();
}
});
$(window).on('load resize', resize);
};
}(jQuery));
If you need to see any of the other code please ask! Any help is much appreciated as you may have well guessed - I'm new to all of this
Thanks!
when you are calling the fancybox, images may not have been loaded to the DOM. call the fancybox plugin after the image load, not on the $(document).ready();
function renderPhotos(data) {
$.each(data.data, function (i, photo) {
photo = '<li class="photo"><img src="' + photo.images.standard_resolution.url.replace(/\\/, "") + '"></li>';
$photos.append(photo);
return i <= (settings.count);
});
$(".ins_popup").fancybox({
openEffect : 'fade',
closeEffect : 'fade'
});
}
Also I see in your sample website that you have included jquery twice in the page
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Remove the 2nd Jquery include. this might be the issue.
Related
Sorry for poor English, it is my second language.
I am trying to fix a code from codepen that uses jQuery. It is a code for carousel that slides auto. However, when I try to move these code to my own file, my html does not show up carousel. There is no error on console log.
Here is my HTML header
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<script src="main.js"></script>
</head>
This is the javascript file(main.js) that I am trying to use
var sliderTeam = (function(document, $) {
'use strict';
var $sliderTeams = $('.slider--teams'),
$list = $('#list'),
$listItems = $('#list li'),
$nItems = $listItems.length,
$nView = 3,
autoSlider,
$current = 0,
$isAuto = true,
$acAuto = 2500,
_init = function() {
_initWidth();
_eventInit();
},
_initWidth = function() {
$list.css({
'margin-left': ~~(100 / $nView) + '%',
'width': ~~(100 * ($nItems / $nView)) + '%'
});
$listItems.css('width', 100 / $nItems + '%');
$sliderTeams.velocity({ opacity: 1 }, { display: "block" }, { delay:1000 });
},
_eventInit = function() {
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element){
window.setTimeout(callback, 1000 / 60);
};
})();
window.requestInterval = function(fn, delay) {
if( !window.requestAnimationFrame &&
!window.webkitRequestAnimationFrame &&
!window.mozRequestAnimationFrame &&
!window.oRequestAnimationFrame &&
!window.msRequestAnimationFrame)
return window.setInterval(fn, delay);
var start = new Date().getTime(),
handle = new Object();
function loop() {
var current = new Date().getTime(),
delta = current - start;
if(delta >= delay) {
fn.call();
start = new Date().getTime();
}
handle.value = requestAnimFrame(loop);
};
handle.value = requestAnimFrame(loop);
return handle;
}
window.clearRequestInterval = function(handle) {
window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) :
window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
clearInterval(handle);
};
$.each($listItems, function(i) {
var $this = $(this);
$this.on('touchstart click', function(e) {
e.preventDefault();
_stopMove(i);
_moveIt($this, i);
});
});
autoSlider = requestInterval(_autoMove, $acAuto);
},
_moveIt = function(obj, x) {
var n = x;
obj.find('figure').addClass('active');
$listItems.not(obj).find('figure').removeClass('active');
$list.velocity({
translateX: ~~((-(100 / $nItems)) * n) + '%',
translateZ: 0
}, {
duration: 1000,
easing: [400, 26],
queue: false
});
},
_autoMove = function(currentSlide) {
if ($isAuto) {
$current = ~~(($current + 1) % $nItems);
} else {
$current = currentSlide;
}
console.log($current);
_moveIt($listItems.eq($current), $current);
},
_stopMove = function(x) {
clearRequestInterval(autoSlider);
$isAuto = false;
_autoMove(x);
};
return {
init: _init
};
})(document, jQuery);
$(window).load(function(){
'use strict';
sliderTeam.init();
});
This is the codepen:
https://codepen.io/fixcl/pen/KwpKvb
Did I add the wrong version of js file? Or did I miss something else?
Edited:
main.js is connected to html file. I can check with the code from main.js
console.log($current);
Edited2: This is my body of html file
<body>
<div class="slider--teams">
<div class="slider--teams__team">
<ul id="list" class="cf">
<li>
<figure class="active">
<figcaption>
<img src="https://odium.kr/assets/css/images/symbol-cernium.png">
<h2>Billie</h2>
<p>Head of Team</p>
</figcaption>
</figure>
</li>
<li>
<figure>
<figcaption>
<img src="https://odium.kr/assets/css/images/symbol-arcus.png">
<h2>Roger</h2>
<p>Art Director</p>
</figcaption>
</figure>
</li>
<li>
<figure>
<figcaption>
<img src="https://odium.kr/assets/css/images/symbol-odium.png">
<h2>Wendy</h2>
<p>Designer</p>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</body>
you should put the main.js before body close tag, since you need to start execute main.js after DOM element is ready.
please check the plnkr for detail:
https://plnkr.co/edit/CuN7q7j6lrQE57DH?open=lib%2Fscript.js&preview
<body>
...
<script src="main.js"></script>
</body>
I would like if I scroll bottom of .dropdown-menu, load more 7 row in database. I don't know why not using this script.
I'm using bootstrap css and js.
I tried the bootstrap-select.js with live search, but I have 2000 row in "town" database, and bootstrap-select doesn't have "load more" function.
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="bootstrap.js"></script>
<style>.dropdown-menu{height: auto;max-height: 150px;overflow-x:hidden;}</style>
<div class="dropdown">
<input class="dropdown-toggle" data-toggle="dropdown" id="live" placeholder="Town">
<ul class="dropdown-menu"></ul>
</div>
<script>
$(document).ready(function () {
var limit = 7;
var start = 0;
var action = 'inactive';
var location = $('#live').val();
$('.dropdown-menu').hide();
function search() {
var limit = 7;
var start = 0;
var action = 'inactive';
var location = $('#live').val();
if (location != '') {
$('.dropdown-menu').show();
$.ajax({
url: "search.php",
type: "POST",
data: {location:location, limit:limit, start:start},
cache: false,
success: function(data) {
$('.dropdown-menu').html(data);
if(data == '') {
$('#load').text('No more data.');
action = 'active';
} else {
$('#load').text('Loading...');
action = 'inactive';
}
$('.dropdown-menu li a').click(function() {
$('.dropdown-menu li a').removeClass('active');
$(this).addClass('active');
var active = $('li a.active').html();
$('#live').val(active);
});
}
});
} else {
$('.dropdown-menu').hide();
$('.dropdown-menu li a').removeClass('active');
}
};
if (action == 'inactive') {
action = 'active';
$('#live').on('keyup change', search);
}
$(window).scroll(function(){
if ($(window).scrollTop() + $(window).height() > $(".dropdown-menu").height() && action == 'inactive') {
action = 'active';
start = start + limit;
setTimeOut(function(){
$('#live').on('keyup change', search);
}, 1000);
}
});
});
</script>
search.php:
<?php
$connect = mysqli_connect("localhost", "root", "", "mydb");
$location = $connect->real_escape_string($_POST["location"]);
if (isset($_POST["location"])) {
$data = mysqli_query($connect, "SELECT * FROM towns WHERE town LIKE '%".$location."%' ORDER BY id LIMIT ".$_POST["start"].", ".$_POST["limit"]."");
$data_count = mysqli_num_rows($data);
if ($data->num_rows === 0) {
echo '<li>No data!</li>';
} else {
while ($row = mysqli_fetch_array($data)) {
echo '<li>'.$row["town"].'</li>';
}
echo '<div id="load"></div>';
}
}
?>
Maybe this is not neatly finished code, but I've added a loadMore button & attached search function to the click event of it.
The modified HTML code:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="bootstrap.js"></script>
<style>.dropdown-menu{height: auto;max-height: 150px;overflow-x:hidden;}</style>
</head>
<body>
<div class="dropdown">
<input class="dropdown-toggle" data-toggle="dropdown" id="live" placeholder="Town">
<ul class="dropdown-menu"></ul>
<button type="button" id="loadMore" style="display: none;"></button>
</div>
<script>
function search() {
if (location != '') {
$('.dropdown-menu').show();
$.ajax({
url: "search.php",
type: "POST",
data: {location:location, limit:limit, start:start},
cache: false,
success: function(data) {
$('.dropdown-menu').html(data);
if(!data) {
$('#load').text('No more data.');
action = 'active';
} else {
$('#load').text('Loading...');
action = 'inactive';
}
$('.dropdown-menu li a').click(function() {
$('.dropdown-menu li a').removeClass('active');
$(this).addClass('active');
var active = $('li a.active').html();
$('#live').val(active);
});
start = start + limit;
$('#loadMore').show();
}
});
} else {
$('.dropdown-menu').hide();
$('.dropdown-menu li a').removeClass('active');
}
}
$(document).ready(function () {
limit = 7;
start = 0;
action = 'inactive';
location = $('#live').val();
$('.dropdown-menu').hide();
if (action == 'inactive') {
action = 'active';
$('#loadMore').on('click', search);
$('#live').on('keyup change', search);
}
$(window).scroll(function(){
if ($(window).scrollTop() + $(window).height() > $(".dropdown-menu").height() && action == 'inactive') {
action = 'active';
start = start + limit;
setTimeOut(function(){
$('#live').on('keyup change', search);
$('#loadMore').on('click', search);
}, 1000);
}
});
});
</script>
</body>
</html>
So I have a MVC code that generates something like this
<div class="photoset">
<img />
<img />
</div>
<div class="photoset">
<img />
<img />
<img />
</div>
And I'm trying to make a jQuery to infinite scroll and as the user is scrolling, it generates more photosets.
I was somewhat successful in doing that but, after I generate more photosets with my infinite scroll, the newly added code won't work with my previous jQuery plugin to navigate between images.
Here is the jQuery code to navigate:
jQuery
$(document).ready(function () {
$('.photoset').each(function () {
$(this).data('counter', 0);
$items = $(this).find('img')
$(this).data('numItems', $items.length);
$(this).closest('.row').prev('.row').find('.nav-informer').text($(this).data('counter') + 1 + " de " + $(this).data('numItems'));
if (($items.eq(0).width() / $items.eq(0).height()) < 1) {
$(this).css({
width: "445",
height: "667",
margin: "auto"
});
}
});
var showCurrent = function (photoset) {
$items = photoset.find('img');
var counter = photoset.data('counter');
var numItems = $items.length;
var itemToShow = Math.abs(counter % numItems);
$items.fadeOut(1000);
$items.eq(itemToShow).fadeIn(1000);
};
/* ---------------------------------------------- /*
* Prev
/* ---------------------------------------------- */
$('.prev').on('click', function () {
var photoset = $(this).closest('.row').prev('.row').find('.photoset');
photoset.data('counter', photoset.data('counter') - 1);
if (photoset.data('counter') < 0)
photoset.data('counter', photoset.data('numItems') - 1);
photoset.closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));
showCurrent(photoset);
});
/* ---------------------------------------------- /*
* Next
/* ---------------------------------------------- */
$('.next').on('click', function () {
var photoset = $(this).closest('.row').prev('.row').find('.photoset');
photoset.data('counter', photoset.data('counter') + 1);
if (photoset.data('counter') > photoset.data('numItems') - 1)
photoset.data('counter', 0);
photoset.closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));
showCurrent(photoset);
});
});
And the Ajax function to call for more photosets, passing the page number:
Ajax
var page = 0,
inCallback = false,
hasReachedEndOfInfiniteScroll = false;
var ulScrollHandler = function () {
if (hasReachedEndOfInfiniteScroll == false &&
($(window).scrollTop() == $(document).height() - $(window).height())) {
loadMoreToInfiniteScrollUl(moreRowsUrl);
resizeNewElements();
}
}
function loadMoreToInfiniteScrollUl(loadMoreRowsUrl) {
if (page > -1 && !inCallback) {
inCallback = true;
page++;
$(".loading").show();
$.ajax({
type: 'GET',
url: loadMoreRowsUrl,
data: "pageNum=" + page,
success: function (data, textstatus) {
if (data != '') {
$(".infinite-scroll").append(data);
}
else {
page = -1;
}
inCallback = false;
$(".loading").hide();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
}
}
function showNoMoreRecords() {
hasReachedEndOfInfiniteScroll = true;
}
And this is the function that calls the infinite scroll:
$(function () {
$(".loading").hide();
});
var moreRowsUrl = '#Url.Action("index", "home")';
$(window).scroll(ulScrollHandler);
I did some research but couldn't stabilish a reason why my code doesn't work, tried some things but did not have success. If anyone could help me, would be great! Thanks in advance, and sorry for any mistake, I'm extremely new with jQuery and Ajax.
You can try with the event delegation for the click event on .prev and .next elements:
$(document).ready(function(){
$(document).on('click', '.prev', function(){.....});
$(document).on('click', '.next', function(){.....});
});
I create a pop-up dialog box which lift up on left bottom while user scroll page.
You can see it live here- http://uposonghar.com/jobs/odesk/daniel/new/
My problem is it does not smoothly lift up first time, then it is ok. Anyone please suggest any idea to fix it. Need to make smoothly lift up.
My code
<div id="scrolltriggered" style="width: 310px; left: 10px; bottom: 10px;">
<div id="inscroll">
x<a href="http://www.google.com" target="_blank"><img src="images/buyersguide.png" alt="Free Resources" height="235" width="310">
</a>
</div>
</div>
<script type="text/javascript">
var stb = {
hascolsed: false,
cookieLife: 7,
triggerHeight: 30,
stbElement: ""
};
</script>
Javascript Code-
if (typeof stb === "undefined")
var stb = {};
jQuery(document).ready(function () {
jQuery("#closebox").click(function () {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'-210px' }, 700, function () {
jQuery('#scrolltriggered').hide();
stb.hascolsed = true;
jQuery.cookie('nopopup', 'true', { expires: stb.cookieLife, path: '/' });
});
return false;
});
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
stb.boxOffset = '';
if (stb.stbElement != '') {
stb.boxOffset = jQuery(stb.stbElement).offset().top;
}
jQuery(window).resize(function () {
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
});
jQuery(window).scroll(function () {
stb.y = jQuery(window).scrollTop();
stb.boxHeight = jQuery('#scrolltriggered').outerHeight();
stb.scrolled = parseInt((stb.y + stb.windowheight) / stb.totalheight * 100);
if (stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":hidden") && stb.hascolsed != true) {
jQuery('#scrolltriggered').show();
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'10px' }, 700, function () {
});
}
else if (!stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":visible") && jQuery('#scrolltriggered:animated').length < 1) {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':-stb.boxHeight }, 700, function () {
jQuery('#scrolltriggered').hide();
});
}
});
jQuery('#stbContactForm').submit(function (e) {
e.preventDefault();
stb.data = jQuery('#stbContactForm').serialize();
jQuery.ajax({
url:stbAjax.ajaxurl,
data:{
action:'stb_form_process',
stbNonce:stbAjax.stbNonce,
data:stb.data
},
dataType:'html',
type:'post'
}).done(function (data) {
jQuery('#stbMsgArea').html(data).show('fast');
});
return false;
});
});
(function(stb_helpers) {
stb_helpers.showBox = function(scrolled, triggerHeight, y) {
if (stb.isMobile()) return false;
if (stb.stbElement == '') {
if (scrolled >= triggerHeight) {
return true;
}
}
else {
if (stb.boxOffset < (stb.windowheight + y)) {
return true;
}
}
return false;
};
stb_helpers.isMobile = function(){
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
) {
return true;
}
else return false;
}
})(stb);
i think you need css changes, copy paste the following in your aspx
<div style="width: 310px; left: 10px; bottom: -225px; display: none;" id="scrolltriggered">
Hope it Helps
All you need to do is add the following line to your document ready as the First line
$("#scrolltriggered").css({bottom: -235});
This will make sure that the popup is scrolled to the bottom by 235px. If you need it to scroll variably add the Elements height by using jquery selector.
See the Fiddle Here
I have a problem that I need to sort out in javascript I believe, but dont know how to begin with it, so hopefully someone from the javascript community may be able to help please.
Basically, the following code allows me to load 10 images into a slideshow carousel.
However, these images are either 600px x 400px Portrait or 400px x 600 Landscape. The problem I have is that the Landscape images
are vertically aligned to the top of the container.
I have managed to get around this by creating two classes in my CSS file image-P & image-L
image-L has a "padding-top:100px " which successfully vertially aligns the landscape images in the centre.
What I'd like to do is for the code to check which images are landscape and then create
return '<img src="Images/' + item.url + '" class="image-L" alt="" />';
and anything else use
return '<img src="Images/' + item.url + '" class="image-P" alt="" />';
many thanks in advance.
Cheers Rob.
<script type="text/javascript">
var mycarousel_itemList = [
{ url: "Image1.jpg" },
{ url: "Image2.jpg" },
{ url: "Image3.jpg" },
{ url: "Image4.jpg" },
{ url: "Image5.jpg" },
{ url: "Image6.jpg" },
{ url: "Image7.jpg" },
{ url: "Image8.jpg" },
{ url: "Image9.jpg" },
{ url: "Image10.jpg" }
];
function mycarousel_itemLoadCallback(carousel, state) {
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item) {
return '<img src="Images/' + item.url + '" class="image-L" alt="" />';
};
jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
});
});
You could try loading the image into JavaScript [1] with the Image class [2] and check the height/width of the image itself to determine which class to apply, but this would slow things down if you did it at load time. (I don't know if the browser would cache the file or not for when you went to display it later).
It seems like it'd be better to wait and apply the style after the image has been added to the document/displayed.
You could probably use jQuery to get the height of the (browser) view and the height of the image then absolutely position the image to be centered. (That'd be more flexible if you wanted to use different image sizes later).
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
http://www.w3schools.com/jsref/dom_obj_image.asp
My solution:
<script type="text/javascript">
function preloader() {
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0] = "Images/image1.jpg"
images[1] = "Images/image2.jpg"
images[2] = "Images/image3.jpg"
images[3] = "Images/image4.jpg"
images[4] = "Images/image5.jpg"
images[5] = "Images/image6.jpg"
images[6] = "Images/image7.jpg"
images[7] = "Images/image8.jpg"
images[8] = "Images/image9.jpg"
images[9] = "Images/image10.jpg"
// start preloading
for (i = 0; i <= 9; i++) {
imageObj.src = images[i];
}
}
</script>
<script type="text/javascript">
var mycarousel_itemList = [
{ url: "Images/Image1.jpg" },
{ url: "Images/Image2.jpg" },
{ url: "Images/Image3.jpg" },
{ url: "Images/Image4.jpg" },
{ url: "Images/Image5.jpg" },
{ url: "Images/Image6.jpg" },
{ url: "Images/Image7.jpg" },
{ url: "Images/Image8.jpg" },
{ url: "Images/Image9.jpg" },
{ url: "Images/Image10.jpg" }
];
function mycarousel_itemLoadCallback(carousel, state) {
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item) {
return '<img src="' + item.url + '" class="image" alt="" />';
};
jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
});
});
</script>
<%# Page Title="" Language="C#" MasterPageFile="~/rwmSite.master" AutoEventWireup="true"
CodeFile="Portfolio.aspx.cs" Inherits="Portfolio" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.jcarousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mycarousel_itemList = [
{ url: "Image1.jpg" },
{ url: "Image2.jpg" },
{ url: "Image3.jpg" },
{ url: "Image4.jpg" },
{ url: "Image5.jpg" },
{ url: "Image6.jpg" },
{ url: "Image7.jpg" },
{ url: "Image8.jpg" },
{ url: "Image9.jpg" },
{ url: "Image10.jpg"}];
function mycarousel_itemLoadCallback(carousel, state) {
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item) {
var x = new Image(); x.src = item.url;
while (!x.complete)
if (x.height <= 400)
return '<img src="../Images/' + item.url + '" class="image-L" alt="" />';
else
return '<img src="../Images/' + item.url + '" class="image-P" alt="" />';
};
jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<div id="wrap" align="center">
<div class=" jcarousel-skin-tango">
<div class="jcarousel-container jcarousel-container-horizontal">
<div class="jcarousel-clip jcarousel-clip-horizontal">
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
</ul>
</div>
<div class="jcarousel-prev jcarousel-prev-horizontal">
</div>
<div class="jcarousel-next jcarousel-next-horizontal">
</div>
</div>
</div>
</div>
</asp:Content>