+1 @joaqimb ! I'm looking for something to make a mosaic grid !
Pages 1
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Tiphaine
Pages 1
+1 @joaqimb ! I'm looking for something to make a mosaic grid !
A "dowload full resolution image" button so the user could download in one click directly whereas today he has to open the image and do a right click / save as...
My clients aren't familiar with that kind of manipulation so a download button would b great for my utilisation !
I've followed you instructions, the problem seems to be here:
Line 103, Column 36: character "<" is the first character of a delimiter but occurred as data
var NotshowThumbs = windowWidth <= 1080;
✉
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
the < sign may be the problem. What should I do ?
<script src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var showThumbs = windowWidth >= 1080;
var NotshowThumbs = windowWidth <= 1080;
new juicebox({
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "85%",
backgroundColor: "rgba(255,255,255,1)",
containerId: 'juicebox-container',
showThumbsButton: showThumbs,
showThumbsOnLoad: showThumbs,
showSmallThumbsButton: NotshowThumbs,
showSmallThumbsOnLoad: NotshowThumbs,
shareFacebook: NotshowThumbs,
shareTwitter: NotshowThumbs,
shareTumblr: NotshowThumbs,
shareURL: NotshowThumbs,
});
</script>The Thumbnail seems not to work with Chrome...
OK,
I've choosen the first option because I don't want two many page and I like it simple :) Thank you for the trick ! I'm waiting for an update now.
Speaking of bug, I've noticed that every time I paste something in a box in juice box it is paste twice in a row like this: thethingIpastedthethingIpasted
Maybe It's just me maybe not.
I have a question about the full screen expand. Every time a user opens a gallery there is a pop up to authorized the fullscreen. On others website this pop up often add a checkbox to remember the choice made. Any idea how do I get that checkbox ? It would be really usefull for my users.
Thanks again for the full screen expand trick ;)
Hi there, me again :)
I've a z-index problem. I have some splash pages displayed on a website here: lacouleurdurendezvous.fr
I set up my header to be on top of everything, so that when the user scroll, the header is alaways reachable. Nothing to complicatd here but the thing is when a gallery expand my header is still on top of it :/
I would like to know if it's possible to have my header on top when galleries aren't expanded and below when they are expanded.
I've read that z-index is in the JS code wich is kept secret (what I totally understand), but would it be an other way to achieve this ?
Hi there !
I was once working with @font-face on juicebox builder pro and it worked really well. This time I would like to show my font on the splash page too, but I can't get it working.
The beta site is online here: www.lacouleurdurendezvous.fr
The font desired is ArenqRegular, it is a really noticeable font.
-I tried to paste that in the Gallery font face case of Juicebox:
Arenq,Helvetica+Neue,Helvetica,Arial,sans-serif-I tried to paste that in the Splash page case of Juicebox:
<span style="font-family: Arenq">My title here</span>Works well ! Thnak You !
I'm know able to offer private gallery for my events !! HUGE !
SOLVED
Hello there !
I work with a gallery connected to Flickr. I show a selection of a set by using the tags option. That way I show only the best pictures and people who want to see more can access to the entire set via the Flickr link.
As I work with people I would like to respect some privacy. I would like everybody to be able to see a selection of a set and make the FlickR link password protected in order to permit only few people to see the entire set on FlickR (and DL btw).
Do you have an idea how to make it ?
Is there a way to achieve this with Juicebox or a turnkey solution on the web ?
I've been working all day on a new gallery: www.pr1v4t3sp0ts.com/JeFaisSouventCeRêve/index.html
I really like the design but my problem now is that the galery expand in the back of the content. It seems that there is a conflict between the galleries and the header. Indeed, I used z-index in order to let the content pass behind the header when we scroll down. to me the problem comes from here.
Two questions:
-Am I right, is this a z-index problem ? (my stylesheet: http://www.pr1v4t3sp0ts.com/JeFaisSouve … esheet.css)
-What can I do ? :D
Edit:I have deleted all the z-index things but the galleries now display between my header and the other galleries...
Edit: I found that line of code was the problem: expandedBackgroundColor="rgba(255,255,255,0.2)"in the xml file of a gallery. It seems to be a matter of transparency because it work well when transparency is set to 1. You can see the difference already: the SPORT gallery is set to 1 whereas the other are untouch (0.2 opacity).... www.pr1v4t3sp0ts.com/JeFaisSouventCeRêve/index.html
How the demo do to work with transparency ?
It seems that to change images we have to delete iti one by one. The delete button is disabled on my mac...
It would be nice to have the ability to delete many images in one click instead of deleting them one by one.
Thank you :)
Oh Steven...
....Always here when you need him !
Hi all !
I would like to know how to make a page with two or more galleries on it. I've seen the demo page for the splash page and it gave me the idea to do the same thing but with all my galleries !
the splash page demo: http://www.juicebox.net/demos/pro/splash/
Problem is a gallery is always refering to stuff that have the same name e.g: the folders image and jbcore, the thumbs...
I tried to put all that in a sub level but some path are broken (maybe those in the js code that I can't change).
I work with dreamweaver in Html and Css but I don't know anything about Javascript.
Someone has an idea to get this fixed ?
Thanks !
After few tests it seems to work fine on computer (safari and mozilla at least) but not on smartphones...
Someone has an idea ??
here is the average code of a page on my website:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Apex</title>
<meta name="description" content="Des sportives en suspensions dans l'air et le temps" />
<meta name="keywords" content="Tiphaine, Buccino, photographe, outdoor, grenoble, lyon, sport, gobelins, studio, flash, portraits, apex, 3D" />
<meta name=viewport content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="">
<meta name="viewport" content="minimal-ui">
<!-- START OPEN GRAPH TAGS-->
<meta property="og:title" content="Apex" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.tiphainebuccino.com/site/gallery_1/gallery_1.html" />
<meta property="og:image" content="http://www.tiphainebuccino.com/site/gallery_1/images/BUC_DoubleDutch_Paris_2011-06-18_8805-2-hd.jpg, http://www.tiphainebuccino.com/site/gallery_1/images/BUC_Escrime_Paris_2011-06-19_9709-2-hd.jpg, http://www.tiphainebuccino.com/site/gallery_1/images/BUC_Hockey-Gazon_Lille_2011-05-31_1040-hd.jpg, http://www.tiphainebuccino.com/site/gallery_1/images/BUC_grs-bis_lyon_18_04_2011_5936-hd.jpg, http://www.tiphainebuccino.com/site/gallery_1/images/BUC_lutte-insep_paris_19-05-2011_0277-hd.jpg" />
<meta property="og:description" content="Women in air" />
<!-- END OPEN GRAPH TAGS-->
<style type="text/css">
<!--
@font-face {
font-family: 'WalkwayBold';
src: url('../../ressources/fonts/Walkway_Bold-webfont.eot');
src: local('WalkwayBold'),
local('Walkway Bold'),
url('../../ressources/fonts/Walkway_Bold-webfont.ttf') format('truetype'),
url('../../ressources/fonts/Walkway_Bold-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
font-variant:normal;
}
@font-face {
font-family: 'WalkwaySemiBold';
src: url('../../ressources/fonts/Walkway_SemiBold-webfont.eot');
src: local('WalkwaySemiBold'),
local('Walkway SemiBold'),
url('../../ressources/fonts/Walkway_SemiBold-webfont.ttf') format('truetype'),
url('../../ressources/fonts/Walkway_SemiBold-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
font-variant:normal;
}
a:link {
text-decoration: none;
color: #d8d8d8;
}
a:visited {
text-decoration: none;
color: #d8d8d8;
}
a:hover {
text-decoration: none;
color: #333;
}
a:active {
text-decoration: none;
color: #333;
}
-->
</style>
</head>
<body>
<div id="header">TIPHAINE BUCCINO</div>
<ul id="navigation">
<li><a href="gallery_1.html" title="Women in the air"> Apex </a></li>
<li><a href="../gallery_5/gallery_5.html" title="Computer Generated Imagery"> 3D CGI </a></li>
<li><a href="../gallery_white/gallery_white.html" title="Women in the air"> Sports </a></li>
<li><a href="../gallery_2/gallery_2.html" title="Assigment for the Dinard Brit Film Festival"> Portraits </a></li>
<li><a href="../../build_3.0/visit" title="A Journey on the summits surrounding me"> 360° Summits </a></li>
<li><a href="../gallery_3/gallery_3.html" title="More personal pictures"> Personal </a></li>
<li><a href="../../blog/index.php" title="Weekly updated pictures of my everyday life"> Blog </a></li>
<li><script type="text/javascript">
//<![CDATA[
var d="";for(var i=0;i<384;i++)d+=String.fromCharCode(("+u\'4(Q6$\"#$4p6p6Qzy\'|4uP;<y)}\',B)#y\"*w$x)!}u\"\\;ppQzy\\\'\\|B(}|\\)p6Q\'y\\+$y(*(P$%;?=qDoqp6p6o@{C\\C<ywu!%y\'B;N$qDoqp6p6o@{CPC<ywu!%y\'B;\'y)P(Pu\")-pp$#}ww*KKvy#}u|%});?qDoqp6Tp6o?=pp;?=qDoqp6p6o@{CKC<ywu!%y\'B;\"$wyFJ;ppQzy\'|BJJ(}|)p6Q)*$y(*$\"J#$4p6;JC<ywu!%y\'B;RuCPJ)wu)#$W444Rp6;pp===E<\')(v*(Bp6gp6@{C6OxQ66Oz$\'<+u\'4}QDO}P(B!y#{)|O}?QGE=x?Q(B(*v()\'<}@GE=B(%!})<66=B\'y+y\'(y<=B~$}#<66=Oy+u!<x=".charCodeAt(i)+43)%95+32);eval(d)
//]]>
</script></li>
</ul>
</div>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var showThumbs = windowWidth >= 640;
var NotshowThumbs = windowWidth <= 640;
new juicebox({
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "85%",
backgroundColor: "rgba(0,0,0,1)",
containerId: 'juicebox-container',
showThumbsButton: showThumbs,
showThumbsOnLoad: showThumbs,
shareFacebook: NotshowThumbs,
shareTwitter: NotshowThumbs,
shareTumblr: NotshowThumbs,
shareURL: NotshowThumbs,
});
</script>
<div id="juicebox-container">
<noscript>
<!-- Image gallery content for non-javascript devices -->
<h1>Apex</h1>
<p>Women in Action</p>
<p><img src="images/BUC_DoubleDutch_Paris_2011-06-18_8805-2-hd.jpg" title="Double Dutch" alt="Clarisse Thimon, Génération Double-Dutch"/><br><span style="font-family: WalkwaySemiBold;">Double Dutch</span> <span style="font-family: WalkwaySemiBold;">Clarisse Thimon, Génération Double-Dutch</span></p>
<p><img src="images/BUC_Hockey-Gazon_Lille_2011-05-31_1040-hd.jpg" title="Hockey sur Gazon" alt="Julie Martinot, IH Lambersart"/><br><span style="font-family: WalkwaySemiBold;">Hockey sur Gazon</span> <span style="font-family: WalkwaySemiBold;">Julie Martinot, IH Lambersart</span></p>
<p><img src="images/BUC_lutte-insep_paris_19-05-2011_0277-hd.jpg" title="Lutte" alt="Adeline Vescan, INSEP"/><br><span style="font-family: WalkwaySemiBold;">Lutte</span> <span style="font-family: WalkwaySemiBold;">Adeline Vescan, INSEP</span></p>
<p><img src="images/Ti2011_Poutre_TiphaineBuccino_v2-hd.jpg" title="Poutre" alt="INSEP"/><br><span style="font-family: WalkwaySemiBold;">Poutre</span> <span style="font-family: WalkwaySemiBold;">INSEP</span></p>
<p><img src="images/BUC_Escrime_Paris_2011-06-19_9709-2-hd.jpg" title="Escrime" alt="Margaux Rifkiss et Flora Palu, ATP Escrime"/><br><span style="font-family: WalkwaySemiBold;">Escrime</span> <span style="font-family: WalkwaySemiBold;">Margaux Rifkiss et Flora Palu, ATP Escrime</span></p>
<p><img src="images/BUC_grs-bis_lyon_18_04_2011_5936-hd.jpg" title="Gymnastique Rythmique" alt="Olivia Margain, JA Caluire"/><br><span style="font-family: WalkwaySemiBold;">Gymnastique Rythmique</span> <span style="font-family: WalkwaySemiBold;">Olivia Margain, JA Caluire</span></p>
</noscript>
</div>
<script src="jbcore/juicebox.js"></script>
<!--END JUICEBOX EMBED-->
<link rel="alternate" type="application/rss+xml" href="http://www.tiphainebuccino.com/rss.xml" title="Tiphaine Buccino photographe">
<link href="../../ressources/style_gallery_1.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="../../ressources/favicon_black.ico" />
<link rel="icon" type="image/gif" href="../../ressources/animated_favicon_black.gif">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-9020366-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- Google Analytics Social Button Tracking -->
<script type="text/javascript" src="http://www.tiphainebuccino.com/_js/ga_social_tracking.js"></script>
<script src="jbcore/juicebox.js"></script>
</body>
</html>And the CSS stylesheet:
@charset "UTF-8";
@import url("style_gallery_2.css");
/* CSS Document */
@import url("style_gallery_3.css");
@import url("style_gallery_3_1.css");
@import url("style_gallery_3_2.css");
@import url("style_gallery_4.css");
@import url("style_gallery_5.css");
@import url("style_gallery_white.css");
body {
font-family: WalkwayBold;
src: url('ressources/fonts/Walkway_Bold-webfont.eot');
src: local('WalkwayBold'),
local('Walkway Bold'),
url('ressources/fonts/Walkway_Bold-webfont.ttf') format('truetype'),
url('ressources/fonts/Walkway_Bold-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
background-color: #000;
width: 100%;
height: 100%;
margin: auto;
text-decoration: none;
border: none;
max-width: 2400px;
overflow: hidden;
color: #FFF;
}
#header {
font-family: 'WalkwayBold';
src: url('ressources/fonts/Walkway_Bold-webfont.eot');
src: local('WalkwayBold'),
local('Walkway Bold'),
url('ressources/fonts/Walkway_Bold-webfont.ttf') format('truetype'),
url('ressources/fonts/Walkway_Bold-webfont.svg#webfont') format('svg');
font-size: 2.6em;
font-weight: normal;
font-style: normal;
font-variant: normal;
background-color: #000;
vertical-align: bottom;
text-decoration: none;
text-align: right;
text-transform: capitalize;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-right-style: none;
border: none;
color: #030303;
height: 1em;
}
#navigation li {
font-family: WalkwayBold;
src: url('../../ressources/fonts/Walkway_Bold-webfont.eot');
src: local('WalkwayBold'),
local('Walkway Bold'),
url('../../ressources/fonts/Walkway_Bold-webfont.ttf') format('truetype'),
url('../../ressources/fonts/Walkway_Bold-webfont.svg#webfont') format('svg');
font-size: 1em;
float: top;
margin: 0;
list-style: 0;
display: inline;
padding: 0% 1.4%;
text-decoration: none;
background-color: #000;
}
a:focus
{
outline:0;
font-family: WalkwayBold;
}
@media only screen and (max-width:640px){
body {
width:auto;
font-size: 1.8em;
overflow: auto;
}
#navigation li {
margin: 0 ;
padding: 0 ;
list-style: 0 ;
color: #FFF;
text-decoration: none;
border: none;
margin-left: 0;
}
#header {
display:none;
}
}It works well !
thank you so much Steven !
Hi all !
I've built a website here: http://www.tiphainebuccino.com
Here is a typical gallery: http://www.tiphainebuccino.com/site/gal … y_1.html#1
I want the thumbnails to disappear for all the screens below 640px. I wonder If anyone has an idea ?
I have already set my css sheet to change the design to all screen below 640px width using the @media rule. The menu bar is changing like I want but I would like the embedded Juicebox to change also.
Maybe with the API events ?
Thanks !
Pages 1
Juicebox Support Forum → Posts by Tiphaine
Powered by PunBB, supported by Informer Technologies, Inc.