How to move the Thumbnails & the photo caption to top in Galleria

I am working on a click-able gallery using the coding found on jQuery Galleria 1.0b from
http://galleria.aino.se/
Similar coding can be found on here;
http://monc.se/kitchen/146/galleria-a-javascript-image-gallery#comments
I would like to move the thumbnails and the photo captions to the top, rather than having it at the bottom. Much apperciated any help. I cannot read coding as i am new to these things. My HTML coding as follows;
<link href="test/galleria.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="test/jquery.min.js"></script>
    <script type="text/javascript" src="test/jquery.galleria.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
        $('ul.gallery_demo').galleria({
            history   : true, // activates the history object for bookmarking, back-button etc.
            clickNext : true, // helper for making the image clickable
            insert    : '#main_image', // the containing selector for our main image
            onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
                // fade in the image & caption
                image.css('display','none').fadeIn(1000);
                caption.css('display','none').fadeIn(1000);
                // fetch the thumbnail container
                var _li = thumb.parents('li');
                // fade out inactive thumbnail
                _li.siblings().children('img.selected').fadeTo(500,0.3);
                // fade in active thumbnail
                thumb.fadeTo('fast',1).addClass('selected');
                // add a title for the clickable image
                image.attr('title','Next image >>');
            onThumb : function(thumb) { // thumbnail effects goes here
                // fetch the thumbnail container
                var _li = thumb.parents('li');
                // if thumbnail is active, fade all the way.
                var _fadeTo = _li.is('.active') ? '1' : '0.3';
                // fade in the thumbnail when finnished loading
                thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
                // hover effects
                thumb.hover(
                    function() { thumb.fadeTo('fast',1); },
                    function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
    </script>
    <style media="screen,projection" type="text/css">
    /* BEGIN DEMO STYLE */
    *{margin:0;padding:0}
    body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80% /140% georgia,serif;}
    h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
    a{color:#348;text-decoration:none;outline:none;}
    a:hover{color:#67a;}
    .caption{font-style:italic;color:#887;}
    .demo{position:relative;margin-top:2em;}
    .gallery_demo{width:702px;margin:0 auto;}
    .gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
    .gallery_demo li div{left:240px}
    .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
    #main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
    #main_image img{margin-bottom:10px;}
    .nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
    .info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
    .info p{margin-top:1.6em;}
    </style>
</head>
<body>
<h1>Galleria Demo 01</h1>
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
    <li><img src="test/img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="test/img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
    <li class="active"><img src="test/img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
    <li><img src="test/img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="test/img/lightning.jpg" alt="Lightning" title="Black & White"></li>
    <li><img src="test/img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="test/img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
    <li><img src="test/img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="test/img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p>
</div>
The CSS coding as follows;
.galleria{list-style:none;width:200px}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
.galleria_main div{display:none;}
.galleria_main div.active{display:block;}
* html .galleria li div span{width:400px} /* MSIE bug */

Looks like you are talking about taskbar, See:
* http://www.sevenforums.com/tutorials/1066-taskbar-move-location-desktop-screen.html

Similar Messages

How to move floats to the next page?

Hi All,
Can anyone help me on this?
How to move floats to the next page the same position?
Thanks in advance

@Learner – you can duplicate the object to the next page and remove the original.
If the original one is anchored you also have to account for its position, because duplicating an anchored object will move it.
Here an example for duplicating a selected object to the same page.
//DuplicateAnchoredObject_SELECTION_SNIPPET.jsx
//Uwe Laubender
* @@@BUILDINFO@@@ DuplicateAnchoredObject_SELECTION_SNIPPET.jsx !Version! Fri Apr 12 2013 07:53:31 GMT+0200
var sel = app.selection[0];
var x = sel.geometricBounds[1];
var y = sel.geometricBounds[0];
//The duplicate() method without an optional argument:
var dup = sel.duplicate();
//NOW: the duplicated objects is at the inner border of the page
//To move it to its original position we need the following:
var xd = dup.geometricBounds[1];
var yd = dup.geometricBounds[0];
dup.move(undefined,[x-xd,y-yd]);
That snippet can be enhanced for duplicating to a certain page, because the duplicate() methods can take arguments like "Page", "Layer", "Spread" etc. For details see the DOM documentation at:
http://www.jongware.com/idjshelp.html
One caution here: to make that work the way you want with facing pages, you have to take into account, that your coordinate system must be changed to "per page" by the property "RulerOrigin" of the ViewPreferences.
This said, here is a working example for duplicating a selected object to page 3 of the current document:
//DuplicateAnchoredObject_TO-DIFFERENT-PAGE_SELECTION_SNIPPET.jsx
//Uwe Laubender
* @@@BUILDINFO@@@ DuplicateAnchoredObject_TO-DIFFERENT-PAGE_SELECTION_SNIPPET.jsx !Version! Tue May 14 2013 10:11:29 GMT+0200
var d=app.documents[0];
var oldRulerOrigin = d.viewPreferences.rulerOrigin;
var sel = app.selection[0];
var x = sel.geometricBounds[1];
var y = sel.geometricBounds[0];
//In case of facing pages we change the ruler origin:
d.viewPreferences.rulerOrigin = RulerOrigin.PAGE_ORIGIN;
//Duplication of selected object:
var dup = sel.duplicate(d.pages[2]);
//NOW: the duplicated objects is at the inner border of the page
//To move it to its original position we need the following:
var xd = dup.geometricBounds[1];
var yd = dup.geometricBounds[0];
dup.move(undefined,[x-xd,y-yd]);
//Restore the original ruler origin:
d.viewPreferences.rulerOrigin = oldRulerOrigin;
Of course, thiese snippets are working also with not anchored objects…
Uwe

The thumbnails and photo info shows up, but I can't view the pics.

I just imported pictures from my Nikon Coolpix S550 for the first time. The thumbnails all show up, and I can view the photo information, but when I can't open any of the pics, nor can I drag them onto the desktop. The weirdest part is the first three pictures from the import are fine. I can open them, edit them and drag them like normal. How can I fix this?

Run the three fixes below in order as needed:
1 - launch iPhoto with the Command+Option keys depressed and follow the instructions to rebuild the library. Select all options.
2 - rebuild the library using iPhoto Library Manager as follows:
Using iPhoto Library Manager to Rebuild Your iPhoto Library
1 -Download iPhoto Library Manager and launch.
2 -Click on the Add Library button, navigate to your User/Pictures folder and select your iPhoto Library folder.
3 - Now that the library is listed in the left hand pane of iPLM, click on your library and go to the File->Rebuild Library menu option
4 - In the next window name the new library and select the location you want it to be placed.
5 - Click on the Create button.
Note: It may take some time to create the new library if you have a lot of photos.
3 - start over with a new library and import the Originals folder from your original library as follows:
Creating a new library while preserving the Events from the original library.
Move the existing library folder to the desktop.
Open the library package like this.
Launch iPhoto and, when asked, select the option to create a new library.
Drag the Originals folder from the iPhoto Library on the desktop into the open Photo window
This will create a new library with the same Events as the original library if you have the Finder checkbox unchecked in the Events preference pane.

How to move elements within the master region of a Master/Detail spry data set?

Hi there,
I am unsure of how to move the different items within the master region of a master/detail spry dataset. The default style is such that if I include 3 or more elements e.g. Thumb, etc., they are stacked vertically :
How do I move them so that they can be positioned differently? The look I am going for is one where the thumb image is positioned to the left while the other items are stacked alongside it so that the end effect for the master region would look like this:
I greatly appreciate the help! Thanks!

This is the complete page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Check :: Fashion+Lifestyle</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMasterDetail_final.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageContainer">
    <div id="adBanners">
        <div id="halfBanner"><a href="#" onClick="document.getElementById('adRollover').style.visibility='visible';"><img src="images/banner_half_1.jpg" alt="Half Banner" width="237" height="90" /></a></div>
        <div id="leaderboardBanner"><a href="#"><img src="images/banner_leaderboard_1.jpg" width="728" height="90" alt="Leaderboard Banner" /></a></div>
        <div class="clearFloats"></div>
    </div>
    <div id="mainHeader">
        <div id="homepageLink"><a href="index.html"><img src="images/spacer.gif" width="400" height="100" /></a></div>
        <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="feature.html">FEATURES</a></li>
            <li><a href="#">FASHION</a></li>
            <li><a href="calendar.html" class="on">CALENDAR</a></li>
            <li><a href="#">VIDEO</a></li>
            <li><a href="blog.html">BLOG</a></li>
        </ul>
    </div>
    <div class="MasterDetail">
      <div class="DetailContainer" id="event" spry:detailregion="cal4">
        <div class="DetailPicture">{Picture}</div>
        <div class="DetailColumn DetailTitle">{What}</div>
        <div class="DetailColumn"><div class="DetailLabel">WHEN:</div> {When}
        </div>
        <div class="DetailColumn"><div class="DetailLabel">WHERE:</div> {Where}
        </div>
        <div class="DetailColumn">{Details}</div>
      </div>
      <div id="calHeader"><p><img src="images/calendar_hdr.gif" width="492" height="100" /></p></div>
      <div spry:region="cal4" class="MasterContainer" onclick="MM_effectAppearFade(this, 1000, 0, 100, false); MM_effectBlind('event', 1000, '0%', '100%', false);">
        <div class="MasterColumn" spry:repeat="cal4" spry:setrow="cal4" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected"><div class="MasterColumnPicture">{Thumb}</div>
          <div class="MasterColumnTitle">{What}</div>
          <div class="MasterColumnText"><div class="DetailLabel">WHEN:</div> {When}</div>
          <div class="MasterColumnText"><div class="DetailLabel">WHERE:</div> {Where}</div>
          <div style="clear:both"></div>
        </div>
      </div>
      <br style="clear:both" />
    </div>
</div>
<div id="footer">
    <div class="text">Use of this site constitutes acceptance of our User Agreement and Privacy Policy. © 2008 Adobe All rights reserved. The material on this site may not be reproduced, distributed, transmitted, cached, or otherwise used, except with the prior written permission of Adobe is a trademark owned by Adobe.</div>
</div>
<div id="adRollover" style="visibility: hidden;">
<script language="javascript">
    if (AC_FL_RunContent == 0) {
        alert("This page requires AC_RunActiveContent.js.");
    } else {
        AC_FL_RunContent(
            'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
            'width', '536',
            'height', '479',
            'src', 'watch_ad',
            'quality', 'high',
            'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
            'align', 'middle',
            'play', 'true',
            'loop', 'true',
            'scale', 'showall',
            'wmode', 'transparent',
            'devicefont', 'false',
            'id', 'watch_ad',
            'bgcolor', '#ffffff',
            'name', 'watch_ad',
            'menu', 'true',
            'allowFullScreen', 'false',
            'allowScriptAccess','sameDomain',
            'movie', 'watch_ad',
            'salign', ''
            ); //end AC code
</script>
<noscript>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="536" height="479" id="watch_ad" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="watch_ad.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />
    <param name="wmode" value="transparent" /><embed src="watch_ad.swf" quality="high" bgcolor="#ffffff" width="536" height="479" name="watch_ad" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
</noscript>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Nokia 6120 how to move messages to the memory card

hi,
I have to take my Nokia 6120 in to be fixed because it just stopped making any sounds, tones, alarms, and i couldn't hear anyone and they couldn't hear me.
anyway
now i want to save some of my text messages to my memory card before I give the guys my phone as they said they'd have to wipe it, but I can't work out how to do it
When I select the message and then say 'move to' i only get the option of 'my folder' which, as far as i can work out, isn't on the external memory card.
How can I move messages to the memory card??
Please help, I've spent an hour looking around the thing and cant find a way...it's driving me mad!
thanks

I moved 2000 messages from mobile to memory card in N95. In messaging options I have just set "save messages on memory card" , after that mobile asked me if I want to copy all messages saved in mobile to memory card"

How to Move or Copy the Tables from One Database to Another Database ?

HI,
Can any one help me on this, How i can move or copy the tables from one database to another database in SQL server 2005 by using SQL query. Hope can anyone provide me the useful and valuable response.
Thanks
Gopi

Hello,
Maybe these links help you out
http://www.microsoft.com/downloads/en/details.aspx?familyid=56E5B1C5-BF17-42E0-A410-371A838E570A&displaylang=en
http://www.suite101.com/content/how-to-copy-a-sql-database-a193532
Also, you can just detach the database make a copy and move it to the new server.

How to move ahead with the flex/php application structure

Hi,
Its been a week since I strated learning Flex. I am a regular php web develeper. Since starting the flex learning I have got one thing there is no concept of "pages" in flex like in a regular php web site..there is "States".
Now I have this project requireing a login and then as per login user role different screens.
Lets say three loging roles 1) teacher 2)Student 3) Admin
Screens for each role will be diffrent as each have diffrent dashboard feature. I am confused with the structure i have decided is correct or not. Please review or suggest how to accomplish this.
The main.mxml will have login form.
it will have three states teacher, student, admin. and then these three will have sub states for particular roles features.
While going to one book I read a mxml file has atleast 1 state so can the structure be like this. (Is this possible or not)
main.mxml will have login form
three mxmxl files for teacher student admin and each will have statets for their respective features.
Please reply. I am trying to find out by reading the documentation properly. But your guidance will speed things up and help me understand things quickly.
Regards
Siddharth

ultimately you want to be aiming to use a MVC structure
but this is a good tutorial to get started.
The later videos work through a login/logged in states example
http://www.adobe.com/devnet/flex/videotraining.html

HT4910 how to move my videos and photos from ipad storage to icloud storage?

I would like to purchase more videos and music from apple store, however i dont have enough storage space left, i purchased more storage for icloud back up, now i am having hard time to move files of movies, photos and music to icloud back up storage and i still can not buy more movies or music. How to move things to icloud storage please?

iCloud doesn't store movies or music. It only allows you to redownload purchases from the iTunes store if you ever lose them (assuming they are still available to redownload, and in the case of movies, that the studio permits it.) Also iCloud only stores your camera roll photos in your backup, which can only be accessed by restoring your iPad to the entire backup.
iCloud isn't designed to do what you are trying to do. iCloud is for syncing data across all your devices and for backing up your devices, not storing your data. You use iTunes on your computer for that. iTunes will add your purchased videos and music to your iTunes library so you can remove it from your iPad and add it back later if you want. To save your photos you import them to your computer (and then delete them from your iPad if you want) as described in this article: http://support.apple.com/kb/HT4083.

How to move albums into the proper category in the Library?

I don't know why an artist's greatest hits album is put into the Compilations folder, and not the artist's folder. I'd rather all their songs be in one folder, including any greatest hits. I can't seem to find any way to fix this. If I move the album into the artist's folder, none of the songs "can be found", and I would have to locate each song, one by one, which would be a major project.
Now, I did take Sade's Greatest Hits, and stripped the songs by cutting and pasting them into a different album (Unknown Album) in her folder, however, when I tried doing that with another artist's album it refused to accept the change. So I tried going to the iTunes window & selecting all the songs, and edited the album name, from Greatest Hits, to Unknown Album (where I had placed the songs in the library folder), but it would not change the album title, no matter how many times I tried. Why would that method work for one and not another?

Spaces has been changed to "Desktops" in Lion. There isn't an icon for the menubar like there was in Snow Leopard. To move from Desktop to Desktop you can use Mission control, use CNTL right/left arrows or swipe on your mouse or trackpad (depending on how you have your options set in System Preferences > Mouse/Trackpad
Regards,
Captfred

How to move data to the cloud

help. can not update. not enough storage even though there is plenty of room in the cloud. please advise

If you want to reduce space taken by photos and videos see iCloud Photo Library beta FAQ - Apple Support and note in particular the section titled "How does iCloud Photo Library save space on my device." Note that this is a new option that is still in beta so you may also want to consider other options such as transferring photos to a computer if you have one or other 3rd party cloud options.

Iphoto 9.5.1 displays only raw photos correctly. If I correct redeye or touch up a photo I get white boxes over the eyes(if correcting redeye) or the thumbnail and photo turns mostly white. Note: I have an NVIDIA card.

Do you remember the days when Apple wrote robust code ? The latest updates have not been great.
Maybe the programers are outsourced to a foriegn country now or Noobs out of school ?
It looks like someone isn't paying attention to the editing layer... I write code. and when you edit an image you store the update in another layer. The method enables you to easily undo edits.   I "upgraded" to 10.9.1 and was forced to update iPhoto.    After I uploaded photos from my camera I noticed redeye reduction results in just white squares over the eyes. I also noticed issues if I attempt any photo edit funcition in iPhoto.
This means to me that iPhoto 's editor is saving video from the wrong memory location.
I have a NVIDIA card because I write CUDA applications on my Mac. An NVIDIA card enables me to write CUDA and OpenCL apps.
Here's what happens if I attempt to straighten an image:
Origianal:
After Edit:
Here's what happens if I attempt to use the Redeye reduction tool:
As you can see Mavericks may have made some improvements but overall it does not get the job done as it used to.
I am willing to bet that your graphics code has devolved into ATI centric code.
I booted into macos 7.5.1 and the issue with the same hardware older operating system and apps works fine.    I just wish I never deleted my 10.6.8 install. 10.6.8 was the most stable on the MacPro.   Everything worked.     From 10.7 up I've noticed a decline in dependability.
Can you please fix this or design a work around ?    Switching over to an ATI graphics card is NOT a good answer.
Also I noticed Cinebench R15 benchmarks are higher in 7.5.1 verses 10.9.1

Where in that other topic is the manufacturer of the graphic card or even a graphic card mentioned.? You may have known what kind of card you had but we're not mind readers.
Since it appears to be a incompatibility between that particular card, Mavericks and iPhoto you should keep telling Apple about it by contacting them via
http://www.apple.com/feedback/iphoto.html
http://www.apple.com/feedback/macosx.html
http://www.apple.com/feedback/macbookpro.html
http://www.apple.com/feedback/mac-pro.html
whichever is appropriate for your particular situation. It's the squeaky wheel that gets the attention.
OT

How to move data in the table to different database ?

I'm currently having some problem with moving some of my data from devlopment db to production db. Currently i'm having 2 dev. db and i would like to combine the data in the table into 1 prod. db. Can anyone pls tell me, is it possible to do so. Please tell me the solution on how this can be done, if you guys know.
Thanks in advance.

Hi,
create a database_link from your
PROD db to each of the DEV dbs.
then insert into table (select * from
table@dev_db1)
insert into table (select * from table@dev_db2)
HTH
Detlev
null

How to move pages of the site into folders and subfolders in adobe muse?

is it possible?

Hi,
Some useful threads are given below
Change the folder structure in Adobe Muse?
How can I structure my muse cc site with folders
Exporting a Muse site - need folder structure for images

How to move notes to the cloud?

Hi,
I see that after iOS5 update and icloud activation, all my previous notes has gone to a Mac directory, while iCloud folder is empty. I would like to move all my previous notes to the clouds, as it is happening automatically with calendar and all the rest after iCloud activation.
Any advice?

Welcome to the Apple Community.
You'll need to copy and paste then into iCloud notes I'm afraid.

How to move or copy the Package - Urgent Please

Hi,
I have created all my data elements, screens, database tables in my own package - zanns_school, at my lab. I want to carry them to my home SAP System. Systems are neither in LAN, WAN.
I want to copy all the contents of my package in an external drive and again reload all of those objects of my package at my home SAP PC.
Please suggest and assist at the earliest

Hi,
You can't do that,
SAP objects cant be copied from one place to another.
Only thru transport it can be availbale from one client to another,Its not like java or some other files u can copy and past.
Regs
Manas Ranjan Panda

How to move the Thumbnails & the photo caption to top in Galleria

Similar Messages

Maybe you are looking for