I am new to Jquery, and I am trying to figure out to create a Photo set grid that when you click the pictures get bigger using a jquery plugin that I found online. My code looks like this.
<script>
$('.photoset-grid-lightbox').photosetGrid({
highresLinks: true,
rel: 'withhearts-gallery',
gutter: '2px',
onComplete: function() {
$('.photoset-grid-lightbox').attr('style', '');
$('.photoset-grid-lightbox a').colorbox({
photo: true,
scalePhotos: true,
maxHeight:'90%',
maxWidth:'90%'
});
}
});
</script>
</head>
<body>
<div class="photoset-grid-lightbox" data-layout="131" style="visibility: hidden;">
<img src="images/InspirationalQuote.jpg" />
<img src="images/jakachu-tiger.jpg" />
<img src="images/Japanese_Painting_by_trinifellah.jpg" />
</div>
The link to the plugin:
http://stylehatch.github.io/photoset-grid/
Any help would be gladly accepted. Thank you!
EDIT: Here is a link to the jsfiddle http://jsfiddle.net/DamianG/6UjsB/
Assuming this is the end result you're looking for, you need to make sure:
Your jQuery library is included in the of your document
Your photoset-grid JS is included in the of your document, after
jQuery
Then, include the following, wrapped in jQuery's document.ready check, as #pl4g4 suggested, included afterwards:
<script type="text/javascript">
$(function() {
$('.photoset-grid-lightbox').photosetGrid({
highresLinks: true,
rel: 'withhearts-gallery',
gutter: '2px',
onComplete: function () {
$('.photoset-grid-lightbox').attr('style', '');
$('.photoset-grid-lightbox a').colorbox({
photo: true,
scalePhotos: true,
maxHeight: '90%',
maxWidth: '90%'
});
}
});
});
</script>
I'm guessing the photoset-grid didn't load? This would be because the contents of your element get loaded first, then whatever's in the body. By wrapping your code with
$(document).ready( function() { /* your code here */ });
or the shorthand
$(function(){ /* your code here */ });
You ensure the browser reads your javascript, but defers running your $.photosetGrid() block of code until after the HTML of the page has been rendered. Otherwise, jQuery can't see the Document Object Model, so $('.photoset-grid-lightbox').length will return 0 - there's no such element on the page, as demonstrated here.
A bit more info on jQuery(document).ready();
Related
i have initialized script cam and now i want to hide it with javascript on the go and enable it back. setting the visibility of the div to hidden or display to none doesn't help. making the div hide using jquery makes the scriptcam not to work. please help
$(document).ready(function () {
$('#getUserInfo').hide();
$("#webcam").scriptcam({
fileReady: fileReady,
cornerRadius: 0,
cornerColor: 'e3e5e2',
onError: onError,
promptWillShow: promptWillShow,
showMicrophoneErrors: false,
showDebug: true,
onWebcamReady: onWebcamReady,
setVolume: setVolume,
timeLeft: timeLeft,
fileName: 'demo982102',
connected: showRecord,
maximumTime: 15,
width: 600,
height: 450
});
});
Try jQuery's detach().
http://api.jquery.com/detach/
It will remove the div from the DOM. When you want it back, use appendTo().
$("#webcam").detach();
I found the solution by setting the width to 0 of the div which the player is in :D
I would like to get this animation using jQuery:
I have tried the following and it is not working:
<script>
$(function () {
$("#b").click(function () {
$("r").animate({
width: 50}, 2000)
});
});
</script>
<div id="b"><div id="r"></div></div>
It's $("#r"), not $("r"). You're selecting the ID, like $("#b")
You need to do a few things here, like add height also. You also need to ensure you have the CSS setup correctly to begin with
DEMO http://jsfiddle.net/363vE/
$("#b").click(function(){
$("#r").animate({
height:200,
width: 200
}, "medium");
});
this is a tricksy one, i am not even sure on how to word the title for this.
so what i have is a bit of a mix up i have a jQuery function called slideonlyone, that toggles divs and within the divs i have a jQuery plugin called the royalSlider(content slider).
what happens is when i first load up the page i have the one div un-toggled by default and the royalSlider plugin works fine. the moment i toggle the page to another div with the royalSlider plugin, it fails to load that plugin.
the head of my page looks like this:
<head>
<link rel="stylesheet" href="/css/system.css" type="text/css">
<link rel="stylesheet" href="/css/royalslider.css" type="text/css">
<link rel="stylesheet" href="/css/default/rs-default-inverted.css" type="text/css">
<script src="/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/js/jquery.royalslider.js" type="text/javascript"></script>
<script src="/js/systems_jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function slideonlyone(thechosenone) {
$('.systems_detail').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
</script>
</head>
the royalSlider is called in a seperate file i load called 'systems_jquery.js'
jQuery(document).ready(function($) {
var rsi = $('#slider-in-laptop').royalSlider({
autoHeight: false,
arrowsNav: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'bullets',
imageScaleMode: 'fill',
imageAlignCenter: true,
loop: false,
loopRewind: false,
numImagesToPreload: 6,
keyboardNavEnabled: true,
autoScaleSlider: true,
autoScaleSliderWidth: 486,
autoScaleSliderHeight: 315
}).data('royalSlider');
$('#slider-next').click(function() {
rsi.next();
});
$('#slider-prev').click(function() {
rsi.prev();
});
});
the html looks like this
i have this as a type of brief summary- when they click on the div is loads the slideonlyone function which toggles the products details
<a href="javascript:slideonlyone('beagle_box');">
<div class="system_box">
<h2>BEE management systems</h2>
<p>________________</p>
</div>
</a>
This is the product details div.
<div class="systems_detail" id="sms_box">
<div class="laptopBg">
<img src="/images/laptop.png" class="imgBg" width="707" height="400">
<div id="slider-in-laptop" class="royalSlider rsDefaultInv">
<img src="/images/1.jpg">
<img src="/images/2.jpg" data-rsvideo="https://vimeo.com/45778774">
<img src="/images/3.jpg">
<img src="/images/4.jpg">
</div>
</div>
</div>
as you can see that apart of the details is the royalSlider it shows screen shots of the product. but since its only just appearing the images are not loaded into the slider and images are displayed under each other as if the plugin is broken but when i inspect the element and go to the console i can see that its not broken. so i suspect that the royalSlider is going to need to reload when ever i toggle the div so that it finds the IDs again??
is it possible to reload the royalSlider function when ever i toggle/slide some content from my slidonlyone function?
NOTE: if i toggle the div and the slider drops its content if i reload the page it picks them up again. so its definitely the royalSlider needing to reload once i have toggeld the div -- or reload the page once i have toggled the page.
Well if you want to run 'royalSlider' again than just wrap whole thing in a function. Then just run it at the time you think you need to reload it ('documentReady' or 'click', etc):
royalSliderReload = function() {
var rsi = $('#slider-in-laptop').royalSlider({
autoHeight: false,
arrowsNav: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'bullets',
imageScaleMode: 'fill',
imageAlignCenter: true,
loop: false,
loopRewind: false,
numImagesToPreload: 6,
keyboardNavEnabled: true,
autoScaleSlider: true,
autoScaleSliderWidth: 486,
autoScaleSliderHeight: 315
}).data('royalSlider');
$('#slider-next').click(function() {
rsi.next();
});
$('#slider-prev').click(function() {
rsi.prev();
});
}
$(document).ready(function(e) {
royalSliderReload();
});
function slideonlyone(thechosenone) {
$('.systems_detail').each(function (index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
royalSliderReload(); // slider will reload here
} else {
$(this).slideUp(600);
}
});
}
Twitter's embed code is a big clunky if you ask me. It appears you have to load the js and put the js embed code (javascript) in the page where you want it in order for it to show up. I would like to load the js right before the end of my </body> and also put the js script in there as well. I would then like to just place an empty div anywhere on my page and the twitter feed will display there. Like <div id='twitter_feed'></div> Is that possible adjusting the code that Twitter gives us?
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('example').start();
</script>
My question is not how to using different tools to render a feed. My question is how do I make the above code that twitter provides and write it in a way that it will render in a div that I specify.
After reading though this...http://www.dustindiaz.com/twitter-widget-doc I found that you can specify an id.
This sounds like what you want, using jQuery tweets plugin found on http://plugins.jquery.com/project/jQuery-Tweets
HTML
<div id="tweets">
</div>
jQuery
$('#tweets').tweets({
tweets:4,
username: "jquery"
});
or using your current widget http://jsfiddle.net/mazlix/dZ2aP/
<div class="content_up_here">
There's so much stuff here.
</div>
<script>twitterwidget();</script>
<div class="content_down_here">
Lorem and Ipsum sitting in a tree. D O L O R S I T.
</div>
var username = "username";
$.getJSON("http://twitter.com/statuses/user_timeline/"+username+".json?callback=?",
function(data) {
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
$("#tweet").html(replaceURLWithHTMLLinks(data[0].text));
});
The above script will parse links and usernames and make them actual links. All you need to do is have a div with the id of #tweet. Make sure you load jQuery too. This also get only one lastest tweet.
I thought I had this worked out, but unfortunately it does not work in FF or Chrome. I have a list of images that I would like displayed as a slideshow with carousel on my page. When the user clicks on the larger image I would like it to open a full size image in a lightbox. Here is the code that works in IE:
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/galleria.js" type="text/javascript"></script>
<script src="Scripts/galleria.classic.js" type="text/javascript"></script>
<script src="Scripts/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[rel=test]').colorbox();
$('#exteriorSlideShow_gallery').galleria({
max_scale_ratio: 1,
image_crop: false,
height: 210,
transition: 'fade',
extend: function() {
this.bind(Galleria.LOADFINISH, function(e) {
$(e.imageTarget).click(this.proxy(function(e) {
e.preventDefault();
$('a[rel=test]').eq(this.active).click();
}));
});
}
});
});
</script>
In the above, "this.active" represents the index of the image in which the carousel is currently on. Since it is in the same order the links below are displayed in, it corresponds to the correct link I would like to have clicked.
<div id="exteriorSlideShow_gallery">
<img src='/Images/THUMB1.gif' />
<img src='/Images/THUMB2.gif' />
<img src='/Images/THUMB3.gif' />
</div>
Anyone know why this wouldn't work in anything but IE?
EDIT
For the time being I have put in a work around. If the browser is IE I call the code as above else I use $.colorbox({ 'href': urloflargeimage }). This doesn't allow grouping of the images for anything but IE, but at least I have a lightbox up.
Galleria strips most of your container content after grabbing necessary data, but it leaves it hidden in IE because of a loading bug. That is why your hack works in IE but not elsewhere.
I'm not sure how colorbox works, but it looks like it cannot take a normal array of URLs and assign it as a group of images and then call each box manually onclick. But you might be able to do something like this (hack):
var box = $('a[rel=test]').clone().colorbox(); // save the colorbox array
$('#exteriorSlideShow_gallery').galleria({
extend: function() {
this.bind(Galleria.LOADFINISH, function(e) {
var index = this.active;
$(e.imageTarget).bind('click', { active: this.active }, function(ev) {
box.eq(ev.data.active).click();
});
});
}
});
I have solved this. You have to put the links outside the galleria container, separate from the images, then click them when an image is clicked. Like so:
$(document).ready(function(){
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$('a[rel="lightbox"]').colorbox();
var targ;
$("#gallery").galleria({
autoplay: 6000,
transitionSpeed: 1000,
transitionInitial: 'fade',
width: 958,
height: 443,
imageCrop: 'width',
minScaleRatio: 1,
extend: function() {
this.bind(Galleria.IMAGE, function(e) {
$(e.imageTarget).css('cursor','pointer');
$(e.imageTarget).click(this.proxy(function() {
targ = $(e.imageTarget).attr('src');
$('a[href="'+targ+'"]').click();
}));
});
}
});
});
and the HTML looks like:
<div id="gallery">
<img src="images/jqIm4.jpg" />
<img src="images/jqIm5.jpg" />
</div>
<div id="source">
</div>
The script tag is missing a quote character. Is it like that in your actual source? If so, that could seriously upset Firefox.
Specifically
<script type="text/javascript>
should be
<script type="text/javascript">