So I'm trying to use the JavaScript image gallery framework Galleria. http://galleria.io/
There is a page on how to install the Flickr plugin but it is quite unclear as to what we should be doing in between the #galleria div and where to place the linking script.
Here's what I have (which isn't working, just giving me a black box)
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="geordie.css" />
<script type="text/javascript" src="geordie.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.min.js"></script>
<script src="plugins/flickr/galleria.flickr.min.js"></script>
<title>Home</title>
<meta charset="UTF-8"/>
</head>
<body>
<?php
//header
include("header.php");
?>
<div id="content">
<div id="galleria">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
flickr: 'search:galleria'
});
</script>
</div>
<div id="footer">
</div>
</body>
</html>
Also wondering how to link to a specific person's Flickr account?
In your javascript section -- you can place this in your header or at the bottom of the page or wherever you normally place your javascriopt code -- you should:
load jquery
load the galleria script (galleria-1.2.8.min.js)
load the galleria flickr plugin script (plugins/flickr/galleria.flickr.min.js)
Then, in a document.ready() block:
load the galleria theme you're using (classic, twelve, folio, etc.)
use a jquery selector to attach the gallery and set your options.
Here's an example based on your HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="geordie.css" />
<script type="text/javascript" src="geordie.js"></script>
<title>Home</title>
<meta charset="UTF-8"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./galleria/galleria-1.2.8.min.js"></script>
<script type="text/javascript" src="./galleria/plugins/flickr/galleria.flickr.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Galleria.loadTheme('./galleria/themes/classic/galleria.classic.min.js');
$("#galleria").galleria({
responsive: true,
height: .57,
imageCrop: false,
thumbCrop: 'height',
carousel: false,
showInfo: true,
swipe: true,
easing: 'galleriaOut',
transition: 'pulse',
flickr: 'search:leica',
flickrOptions: {
max: 10
}
});
});
</script>
<style>
#galleria
{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<?php
//header
include("header.php");
?>
<div id="content">
<div id="galleria"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Note: The example code above also sets a number of options to make the gallery responsive and work with mobile swipe gestures (set "responsive" and "swipe" to true). Also, you should set the width and height of the gallery container (#galleria) in a css style block or in your stylesheet so galleria knows how to size it correctly -- if you want galleria to automatically resize the gallery responsively, set the height ratio (.57 in the example) in the galleria options. See the Galleria docs -- http://galleria.io/docs/ for more details on options.
To use the flickr plugin to display results of a search, just specify a search term and optionally set a "max" number of images to show (I think the detault is 30). In the example above, max is set to 10:
$("#galleria").galleria({
// your other galleria options here...
// set flickr plugin options here:
flickr: 'search:leica',
flickrOptions: {
max: 10
}
});
To display a flickr user's public photos, do
$("#galleria").galleria({
// your other galleria options here...
// set flickr plugin options here:
flickr: 'user:library_of_congress',
flickrOptions: {
max: 10
}
});
To display a photoset, do
$("#galleria").galleria({
// your other galleria options here...
// set flickr plugin options here:
flickr: 'set:72157618541455384',
flickrOptions: {
max: 10
}
});
You can also display photos by tags (use the "tags" option). The options are outlined on the plugin documentation page:
http://galleria.io/docs/plugins/flickr/
Related
Basically I'm trying to get a plugin to work which opens up a webpage as an overlay rather than taking you away from the current page you are on. I cannot get the demo to work properly. It is demonstrated here:
http://jquerytools.github.io/demos/overlay/external.html
with a working demo here:
http://jquerytools.github.io/demos/overlay/external.htm
I can get this working perfectly for other pages which I host (relative paths), but I would like the overlay to open, for example, www.google.com - when I try this the overlay is simply blank. I am at a loss!
<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
Do *not* reference CSS files and images from flowplayer.org when in
production Enjoy!
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" type="text/css"
href="/media/css/standalone.css"/>
<link rel="stylesheet" type="text/css"
href="/media/css/overlay-apple.css"/>
<style>
/* use a semi-transparent image for the overlay */
#overlay {
background-image:url(/media/img/overlay/transparent.png);
color:#efefef;
height:450px;
}
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height:441px;
overflow-y:auto;
}
</style>
</head>
<body><!-- external page is given in the href attribute (as it should be) -->
<a href="external-content.htm" rel="#overlay" style="text-decoration:none">
<!-- remember that you can use any element inside the trigger -->
<button type="button">Show external page in overlay</button>
</a>
<!-- another link. uses the same overlay -->
<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
<button type="button">Show another page</button>
</a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
</body>
</html>
I am trying to create a full page interface using the excellent jQuery UI Layout plugin.
but unfortunately west side unable to resize with mouse which i have mentioned in below image. i am not able to find any solution for it.
Below is my code which i used:
<div class="ui-layout-west">
<%#include file="abc.jsp"%>
</div>
Below is my sample image of west pane.
I found a solution, It looks like you have to include js for jquery ui. you can then set resizable option like below according to your need.
<html>
<head>
<script src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery-ui-latest.js"></script>
<script src="jquery.layout-latest.js"></script>
<script>
$(document).ready(function () {
$('body').layout({
applyDefaultStyles: true,
resizable: true,
east__resizable:false,
north__resizable:false,
south__resizable:false,
});
});
</script>
</head>
<body>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
</html>
I want to install the gallery and instead of using flash I wish to use this jQuery plugin. I cannot figure out how do I install and use it since it is distributed as .zip archive with two .js files inside and no index file or .css at all.
Here's plug in features demo, which I would like to achieve.
$("#container").gridalicious({
animate: true,
animationOptions: {
queue: true,
speed: 200,
duration: 300,
effect: 'fadeInOnAppear',
complete: onComplete
}
});
As per the source code...
The CSS is set in the JS itself, no need for an external style sheet.
If you'll scroll down http://suprb.com/apps/gridalicious/, you will see how to initialize it. It appears to just be a collection of divs with the class item inside of the initialized container.. <div id="container"> for example.
Update:
<!doctype html5>
<html>
<head>
<title>Test of plugin</title>
<script type="text/javascript" src="path/to/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.grid-a-licious.min.js"></script>
</head>
<body>
<div id="container">
<!--I assume it asks for divs with the "item" class, but it may be added automatically.-->
</div>
<script type="text/javascript>
//The initialize code printed above. Has parameters (read:options) you can tweak.
</script>
</body>
</html>
In JQuery Mobile 1.4 panels can be external, fixed and responsive which led me to try to create a persistent sidebar using a panel. Everything seems to work great except that the panel is closed every time a page transitions. The panel is then opened again when the new page is shown.
jsfiddle: http://jsfiddle.net/egntp/
I would like for the panel to remain on the page during page transition similar to the way persistent toolbars work.
Any ideas? I looked into the panel's beforeClose() event (http://api.jquerymobile.com/panel/#event-beforeclose) to try to prevent it from closing, but I didn't know how to proceed.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css" />
<style type="text/css">
.ui-panel-dismiss{display:none;}
#p1, #p2{margin-left:17em;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){$("#sidebar").panel();});
$(document).on("pageshow", ":jqmData(role=page)", function() {
$("#sidebar").panel("open");
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="panel" data-animate="false" data-position-fixed="true" data-swipe-close="false" id="sidebar">
<h1>sidebar</h1>
Page 1<br />
Page 2
</div>
<div id="p1" data-role="page">
My page 1
</div>
<div id="p2" data-role="page">
My page 2
</div>
</body>
</html>
I'm trying to do similar things, playing around with mild success here and there....try starting with this and see how far you can take it...
.ui-panel-closed {
width: 17em !important;
visibility: visible !important;
}
The reason this may work is because all jQuery Mobile is doing when you open or close a panel is they are modifying the css classes of the panel div. One thing they do is toggle a couple css classes, ui-panel-open and ui-panel-closed.
The above css ensures that even though they add the ui-panel-closed class to the panel div, the panel remains open.
You can do this in jQuery mobile 1.4 onwards. Just place the panel outside your page (i.e. data-role="page").
Note that external panels need to be initialized manually. So just do the following:
$(document).on( "pageshow", "[data-role='page']", function() {
$( "your_panel_selector" ).panel({ animate: true });
});
So excuse me for being really new to this....but I shall try my best to detail the prob.
I have a script running on page for fancybox which is this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.0.4"></script>
<!-- Optionaly add button and/or thumbnail helpers -->
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=2.0.4"></script>
<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=2.0.4"></script
ul class="list">
<li>
<a class="various fancybox.iframe" href="http://www.topholidayrecipes.com">Iframe</a>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
NOW PROB IS THIS SCRIPT -->
* This script causes my drop down menu (that uses cufon replace function) to be static. And I need this script for the fancy box, but adding this disables the animation affect of the drop down.
The buttons located at the top right of the page works originally at: www.topholidayrecipes.com
And here is a page that uses the fancy box (link located in the recipes box named "iframe") but here the menu is static: http://topholidayrecipes.com/artichokes-recipes.html
Please help me with this.....I will be very grateful : )
You have a little bug in your js code:
._shadowBox()
that is creating this error:
Error:
shadowBox is not a function
Source File: http://topholidayrecipes.com/artichokes-recipes.html
Line: 717
and that breaks the rest of your js code (the animation affect of the drop down included).
Maybe you forgot to delete that line after unloading shadowbox and moving to fancybox
yes i tried by removing those lines of codes, but i discovered i dont need those codes anyways. what i discovered is this line of code in particular that seems to cause problems directly with the drop down:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
i have even downloaded the javascript from google directly and called it in my page another way using:
<script type="text/javascript" src="js/jquery.google.js"></script>
they both run the same thing and the fancy box works as it should. but i noticed that it is this particular line used for the fancybox that's causing problem with my dropdown menu. as soon as i remove this line of code the drop down works!