Image gallery using FancyBox

Hi there,
Does anyone knows how and where to implement code on the page in order to get image gallery within the same page using FancyBox. FancyBox can be downloaded at .net
I want to have a group of thumbnails, click on them and
the box pops up, and be able to click through to the next one.
Im using iWeb '06 and MassReplaceIt.
Thanks in advance,
Goran

Jon Fritz II wrote:
Maybe turn off the entire fancybox gallery's container and turn on a simplified gallery container when the screen hits the right size.
Hi Jon,
I did think along those lines but really wanted to find a more steamlined solution, which I think the jQuery option may provide if not then I may have to have a re-think and deploy an alternative gallery, as you suggest, with fewer images.
Thanks for your input.
Is it just me constantly coming up against problems which you just cannot see until they hit you smack in the face or is this happening to everyone else.
I'm going to have to triple my quotes in future!

Similar Messages

Image gallery using Javafx

I have a folder which is full of images. I am trying to build a desktop app which can perform the following tasks.
1. Select the folder and show all the images as thumbnails, as we see in picasa/any image viewer.
2. The image should be clickable and may be opened in full screen using the app.
3. Multiple images selection must be possible.
Now, I am stuck at the very first requirment, where I am not able to identify how to show the files that i have parsed from the folder as thumbnails and stack together to show on a part of my app.
I know I have no piece of code, I just wanted some logic through which I can develop this. Any idea's are welcome.
Regards,
Abhi

Hi Abhi!
I am not a very skilled developer but I am developing something similar at the moment, so I can give you some hints to help you out...
1. Select the folder and show all the images as thumbnails, as we see in picasa/any image viewer.
Inside your controller, create a method to generate your clickable "image"-nodes and add them to your scene graph
Here is a small sample FXML-fragment showing how such a clickable "image button" could look like...
<Button fx:id="imageButtonFX" contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" onAction="#imageFullscreen">
   <graphic>
       <ImageView fx:id="imageFX" pickOnBounds="true" preserveRatio="true" />
   </graphic>
</Button>
inside that method for creating image buttons, you can load the images from the file system and store them in a Image-nodeNote: the constructor uses a string as parameter, so you can pass different folders and filenames to it
Image imageXYZ = new Image("/<folder path>/<image file>");
Still inside the same method...create the ImageView node and add the loaded image to it
ImageView imageFX;
imageFx.setImage(imageXYZ );
Now create the parent button and add the ImageView-mode to it.Note: you should style your Button transparent, so you can see the image below it but also be able to click on the button to do something...
Button imageButtonFX = new Button();
imageButtonFX.setGraphic(imageFX);
Next, add it to your "ParentNode" in the scene graph
<ParentNode>.getChildren().add(imageButtonFX);
Now all you have to do it is to call this create "imageButtons"-method and pass "folder/filename" names to it.
createImageButton(folderPath, fileName);
2. The image should be clickable and may be opened in full screen using the app.
the "imageFullscreen" action from your "image button" (see above) calls amethod in your controller, to scale your images and then render your application using the built-in JavaFx fullscreen method
stage.setFullScreen(true);
3. Multiple images selection must be possible.
With this I am still struggeling too. But basically, you have to use the MouseDragEvent-handlers to draw a rectangle on top of your image-nodes and calculate, which of the imageNodes are covered with that selection rectangle.
Another advice. Loading a lot of images to the scene graph is heavy work and will slowdown your application. Therefore, you might need to consider also things like pagination or lazy loading, to load only as many images as you currently can see on your screen.
Best regards,
Jörn

Using jquery image gallery - help!

Hello there :)
I'm having an issue with showing images in my jquery image gallery; it's taken me all day and it just won't work. I've tried to follow this tutorial using the latest version of pikachoose 3.0. http://apex-notes.blogspot.com/2008/12/build-image-gallery-using-apex.html
What I see is nothing but broken image links and no jquery image gallery at all. I suspect the problem is with this PL/SQL statement but I am not sure. I use BLOBs for images.
DECLARE
   CURSOR c1
   IS
      SELECT "IMAGE_ID"
        FROM "GAL_IMAGES";
BEGIN
   HTP.p ('<ul id="pikame">');
   FOR gallery_rec IN c1
   LOOP
      HTP.p
         ('<li>
                <img src="f?p=&APP_ID.:0:&SESSION.:APPLICATION_PROCESS=gallery:::F106_G_IMAGE_ID:'||gallery_rec.image_id||'" /></li>'
   END LOOP;
   HTP.p ('</ul>');
END; Please help?

Thank you for the reply Munky... yes I've included the jQuery in the header, and inspected it with firebug as well. I'm just not very good at interpreting the parameters oracle needs to display BLOB data through PL/SQL commands. No javascript errors, the images just refuse to show. Getting it on apex.oracle.com is tough (lots of stuff to export) but I'll get working on that right away. I'm on limited time too because my project is well overdue :/
Let me show you two screenshots for the time being: http://i294.photobucket.com/albums/mm116/ctjemm/Login_1267710612595.jpg and http://i294.photobucket.com/albums/mm116/ctjemm/Login_1267710740509.png
I wanted something like this - http://apex.oracle.com/pls/otn/f?p=25110:11:112222201005926 to happen in the 'gallery scroll' region. :/ He gets his to work, I don't know how though, since I followed every step of his blog meticulously.
Again, thanks so much for your reply.
-J

Thickbox image gallery not working.

HI guys,
Im creating an image gallery using the 'thickbox' widget. When I preview my page on a browser, and click the thumbnail image, nothing happens. It just loads the thickbox preloader bar, nothing else!
I've followed online tutorials by the book! Heck, it even works on live vew in DW, but doesn't do anything on a browser!
Can someone shed some light on this?

marie_barnsley wrote:
I've been through and sorted the majority of the errors, apart from 3 that are flagging up to do with the Fancybox.
The 'rel' tag seems to be the issue and from reading online I've changed this to 'data' instead which seems to have fixed the errors.
However, the fancybox gallery still isn't working.
You must have the scripts linked up incorrectly.
Replace ALL of your script links with the ones below (once it's confirmed it's working you can go directly to the pages, download the scripts and save them locally)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="http://fancybox.net/js/web.js?m=20100203"></script>
Amend the <script> at the foot of the page to as below:
<script type="text/javascript">
/* Apply fancybox slideshow to 'group'*/
$("a#group").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'overlayShow': false
</script>
Then give the anchor tags in the 3 images an id="group" as below:
<a id="group" href="http://www.marieparkinson.co.uk/images/portfolio/full/harperoffice.jpg" title="Harper Office"><img src="http://www.marieparkinson.co.uk/images/portfolio/thumbs/harperthumb.jpg" alt="image 2"/></a>

Scrolling image gallery problems

I am creating a scrolling image gallery using thumbnails. I have 36 thumbnails that are 100 x 100 px. I cannot figure out the x y coordinates to line up the images correctly. They are overlapping. I've put in the first x coordinate at 0 and the first image goes to the left, and that is fine, it is when I click the last image to put in a number, which I thought would be 36 x 100, they do not line up, they over lap. Does anyone have a clue how to fix this? I am working on this site for a very pushy client who wants it done NOW...Thanks,

If you crerate a Sprite or Movieclip 3600 x 100 you can place then one after another on that container then you only have 1 object to place and scroll.

Image gallery issues...

This image gallery uses the HTTPService control to populate an array which is then used to populate thumbnails and a full image however it does not display properly on the first load. Thumbnails do show up upon a refresh but are not very consistant. I could really use some suggestions on how to make this gallery more stable and support all browsers.
Here is the link to the site
http://www.michael-willett.com/test/newwork.html
and the source
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="black" viewSourceURL="srcview/index.html"
        preinitialize="preInit()"
        backgroundAlpha="0"
        color="white" >
    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;
            [Bindable]private var xmlListCol:XMLListCollection = new XMLListCollection;
            [Bindable]private var imageArray:Array = new Array;
            private function preInit():void {
            xmlService.send();
            private function xmlHandler(event:ResultEvent):void {
                var xmlList:XMLList = event.result.image;
                xmlListCol.source = xmlList;
                for each (var image:XML in xmlListCol){
                    var myOBJ:Object = new Object;
                    myOBJ.label = image.picDescription.text();
                    myOBJ.thumbnailImage = image.url.text();
                    myOBJ.fullImage = image.big_url.text();
                    imageArray.push(myOBJ);
            private function complete():void {
            private function xmlLoadFault(event:FaultEvent):void {
                Alert.show("Could not load XML file");
        ]]>
    </mx:Script>
    <mx:HTTPService id="xmlService"
        url="data/newwork.xml"
        resultFormat="e4x"
        result="xmlHandler(event)"
        fault="xmlLoadFault(event)"
        showBusyCursor="true" />
    <mx:Panel title="{horizontalList.selectedItem.label}"
            height="100%"
            horizontalAlign="center"
            backgroundColor="#CCCCCC"
            backgroundAlpha="0"
            borderColor="#CCCCCC" >
        <mx:Image id="img"
                source="{horizontalList.selectedItem.fullImage}"
                maintainAspectRatio="true"
                horizontalAlign="center"
                verticalAlign="middle"
                width="{horizontalList.width}"
                height="100%"
                />
        <mx:ControlBar horizontalAlign="center">
            <mx:HorizontalList id="horizontalList"
                    labelField="label"
                    iconField="thumbnailImage"
                    dataProvider="{imageArray}"
                    itemRenderer="CustomItemRenderer"
                    columnCount="5"
                    columnWidth="125"
                    rowCount="1"
                    rowHeight="125"
                    selectedIndex="0"
                    horizontalScrollPolicy="on"
                    backgroundAlpha="0" />
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>

I updated the source following your suggestion and it does seam to be working better. Is there any other things I could change to make it load more smoothly?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="black" viewSourceURL="srcview/index.html"
        preinitialize="preInit()"
        backgroundAlpha="0"
        color="white" >
    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;
            [Bindable]private var xmlListCol:XMLListCollection = new XMLListCollection();
            private function preInit():void {
            xmlService.send();
            private function xmlHandler(event:ResultEvent):void {
                var xmlList:XMLList = event.result.image;
                xmlListCol.source = xmlList;
            private function xmlLoadFault(event:FaultEvent):void {
                Alert.show("Could not load XML file");
        ]]>
    </mx:Script>
    <mx:HTTPService id="xmlService"
        url="data/newwork.xml"
        resultFormat="e4x"
        result="xmlHandler(event)"
        fault="xmlLoadFault(event)"
        showBusyCursor="true" />
    <mx:Panel title="{horizontalList.selectedItem.picDescription.text()}"
            height="100%"
            horizontalAlign="center"
            backgroundColor="#CCCCCC"
            backgroundAlpha="0"
            borderColor="#CCCCCC" >
        <mx:Image id="img"
                source="{horizontalList.selectedItem.big_url.text()}"
                maintainAspectRatio="true"
                horizontalAlign="center"
                verticalAlign="middle"
                width="{horizontalList.width}"
                height="100%"
                />
        <mx:ControlBar horizontalAlign="center">
            <mx:HorizontalList id="horizontalList"
                    labelField="label"
                    iconField="thumbnailImage"
                    dataProvider="{xmlListCol}"
                    itemRenderer="CustomItemRenderer"
                    columnCount="5"
                    columnWidth="125"
                    rowCount="1"
                    rowHeight="125"
                    selectedIndex="0"
                    horizontalScrollPolicy="on"
                    backgroundAlpha="0" />
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>

Creating an image gallery in apex....

Hi,
Im using Apex version 4.2.6... I followed the instructions in a blog to create an image gallery in apex applications....
http://apex-notes.blogspot.com/2008/12/build-image-gallery-using-apex.html
I have created all process by following that blog... But the pikachoose plugin is not available to download....
Is there is any other plugin or any other alternate way to create an image gallery in apex???
Thanks
Infant raj

HI,
Is there is any example for creating an image gallery... Went through on your link, i want to use the images that are stored in the table.....
Please advise me on application where i need to use this scripts...
jQuery plugin setup
The blueimp Gallery jQuery plugin registers a global click handler to open links with data-gallery attribute in the Gallery lightbox.
To use it, follow the lightbox setup guide, but replace the minified Gallery script with the jQuery plugin version and include it after including jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/jquery.blueimp-gallery.min.js"></script>
Next, add the attribute data-gallery to your Gallery links:
<div id="links"> <a href="images/banana.jpg" title="Banana" data-gallery> <img src="images/thumbnails/banana.jpg" alt="Banana"> </a> <a href="images/apple.jpg" title="Apple" data-gallery> <img src="images/thumbnails/apple.jpg" alt="Apple"> </a> <a href="images/orange.jpg" title="Orange" data-gallery> <img src="images/thumbnails/orange.jpg" alt="Orange"> </a> </div>
Thanks...
INFANT

Flash Image Gallery load problem

This a familiar problem that has been put up here a thousand
times I'm sure but as yet I haven't been able to find a solution
for it. I've put together a simple image gallery using Flash and an
XML file. It works perfectly on my system but there are issues with
the images loading properly when I put them onto my site. I know
very little Flash, I've been using a pre-made gallery that I
downloaded but since it works on my computer I assume I should be
able to get it to work online too. The thumbnails for the file seem
to work fine and the information from the XML file is obviously
being accessed, however the main images are not loading. I've
included all the code below (Actionscript, XML and the Web coding),
if someone could help me before I put my fist through a wall that
would be great:
Actionscript
stop();
//specify the url where folder is located below (if
applicable)
toadd="";
t = 0;
l = 0;
theside = 1;
galxml = new XML();
galxml.load(toadd+"flash/fashion/easy-xml-gallery-2.xml");
galxml.ignoreWhite = true;
galxml.onLoad = function(success) {
if (success) {
maxnum = galxml.firstChild.childNodes.length;
for (n=0; n<maxnum; n++) {
specs = galxml.firstChild.childNodes[n];
//TEXT FOR SIDE NAV
duplicateMovieClip(side.thumbs.thumbsb, "thumbs"+n, n);
thumbclip = eval("side.thumbs.thumbs"+n);
thumbclip._x = n*100;
thumbclip.thetitle = specs.attributes.name;
thumbclip.theurl = specs.attributes.theurl;
thumbclip.thecaption = specs.attributes.caption;
thumbclip.thenum = n+1;
thumbclip._alpha = 100;
loadMovie(toadd+"/flash/fashion/images/"+(n+1)+"b.jpg",
thumbclip.thumbload.thumbload2);
play();
side.thumbs.thumbsb._visible = false;
mainperc.onEnterFrame = function() {
if (mainperc.perc<98) {
mainperc._alpha += 5;
mainperc.perc = Math.round(l/t*100);
mainperc.perctext = mainperc.perc+"%";
mainperc.ltext = "OF THUMBNAILS LOADED
("+Math.round(t/1024)+"kb)";
if (mainperc.perc>98) {
//mainperc._alpha -= 5;
if (mainperc._alpha<-50) {
delete mainperc.onEnterFrame;
XML
<gallery>
<pic1 name="ONE">
<pic2 name="TWO"/>
<pic3 name="THREE"/>
<pic4 name="FOUR"/>
<pic5 name="FIVE"/>
<pic6 name="SIX"/>
<pic7 name="SEVEN"/>
<pic8 name="EIGHT"/>
<pic9 name="NINE"/>
<pic10 name="TEN"/>
</gallery>
Webpage coding
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>shorty designs</title>
<style type="text/css">

</style>
<script src="Scripts/AC_RunActiveContent.js"
type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<p class="Sections"><img src="images/version5.jpg"
alt="shorty logo" width="166" height="85" /><span
class="contact">Contact by email:
[email protected]</span></p>
<p class="Sections">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','536','height','518','align','right','src','/flash/fashion/fashion','quality','high',' pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=Shockwa veFlash','movie','/flash/fashion/fashion'
); //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=9,0,28,0"
width="536" height="518" align="right">
<param name="movie" value="/flash/fashion/fashion.swf"
/>
<param name="quality" value="high" />
<embed src="/flash/fashion/fashion.swf" width="536"
height="518" align="right" quality="high" pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash"></embed>
</object>
</noscript>
</p>
<p class="section_back">Fashion</p>
<p class="section_reg"><a
href="travel.html">Travel</a></p>
<p class="section_reg"><a
href="wedding.html">Wedding</a></p>
<p class="section_reg"><a
href="layout.html">Layout</a></p>
<p class="section_reg"><a
href="personal.html">Personal</a></p>
</div>
</body>
</html>

Yep, these are the directions:
this is very easy to update. You only need to edit the simple
xml file and add images to the images folder.
step 1.
add as many images as you like at the size 536 x 403
step 2.
create thumbnails for the above images at size 100x75
step 3.
update the xml file with the name url and caption for each
image. (to take the url off just click through to the button on the
main picture and delete the script that says getURL(theurl)
step 4.
open flash file and change the 'toadd' variable to the folder
where the flash file and image folder is located on your site.
thats it done.
The frustrating thing now is that the files are finally being
found but the thumbnail function has decided to mess up.

Image Gallery Created in Bridge & Dreamweaver CS4

Hello! I created an image gallery using Bridge and embedded the gallery html into a page on my website. The gallery, however, is not showing up live. Everything works fine locally.
Might anyone be willing to help me with my page?
I have my gallery embedded in this page:
http://www.stompandcrush.com/quisomnian.html
This is the gallery index html:
http://www.stompandcrush.com/graffitigallery_newyork_netaacc.html
Any help would be greatly appreciated!

Hi Guys, This turned out to be a Unix server-side issue. Apparently the compression software being used by the ISP on this server was in some way incompatible. The ISP turned the compression off and the problem was cured.
Cheers, Daviddhg

Trying to emulate this websites image gallery

Hey everyone.
I wanted to imitate this websites image gallery using
DreamWeaver, and I wanted to know what would be the basic steps to
break it down. Here is the site:
http://www.tompaiva.com/maritime02.html
I wanted to be able to replicate this for my own site, but
also wanted to see if anyone here could help me break it down..What
exactly is going on here? Do I need layers? Do I need tables?
Speaking of tables, how did the designer get the captions to
go directly underneath the image? That's pretty much all I want.
The reason being is that I also need to teach this to someone else,
and they need to know how to upload and maintain their site
themselves. Can anyone help me out? I would really appreciate it:)
Thanks
_C

Free:
http://www.projectseven.com/tutorials/images/showpic/index.htm
Commercial:
http://www.projectseven.com/products/galleries/hgmagic/index.htm
Ken Ford
Adobe Community Expert
Fordwebs, LLC
http://www.fordwebs.com
"psypent81" <[email protected]> wrote in
message news:et4h5k$pha$[email protected]..
> Hey everyone.
> I wanted to imitate this websites image gallery using
DreamWeaver, and I
> wanted to know what would be the basic steps to break it
down. Here is the site:
>
>
http://www.tompaiva.com/maritime02.html
>
> I wanted to be able to replicate this for my own site,
but also wanted to see
> if anyone here could help me break it down..What exactly
is going on here? Do I
> need layers? Do I need tables?
>
> Speaking of tables, how did the designer get the
captions to go directly
> underneath the image? That's pretty much all I want. The
reason being is that I
> also need to teach this to someone else, and they need
to know how to upload
> and maintain their site themselves. Can anyone help me
out? I would really
> appreciate it:)
>
> Thanks
>
> _C
>

How do i use numbers for image gallery and arrows?

Hello there,
I'm hoping someone can advise me on the best possible way.
I would like to use numbers to help the user navigate through the image gallery i'm creating and arrows on either side of an image (one image viewed at any one time). I have attached an image of what i'm trying to acheive. I feel like the arrows will help aid the user to navigate and the numbers will inform them on the number of images to view.
I have so far created the site with a template (logo and nav bar) and child pages for: home/about/work/contact.
Hope to hear from someone soon.
Nicola

With so many pre-built image galleries available to you, there's no reason to re-invent the wheel.
CSS Image Viewer (view source to see the code)
http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
jQuery slideViewer 1.2
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
57 + Image Gallery, Slideshow & Lightbox solutions
http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/
In addition to the ones above, log-in to Adobe's Widget Exchange with your Widget Browser
http://labs.adobe.com/technologies/widgetbrowser/
    * jQuery Cycle Widget
    * Lightbox Gallery Widget
    * Spry Content Slides
    * Spry Image Slideshow
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Image gallery in webcenter using content presenter template

Hi,
I created a content presenter template for image gallery in webcenter.
The images from UCM are not displayed without log in to the webcenter application.
I am getting a error like
" Error calling UCM server associated with repository UCM. The service GET_FILE was called with user anonymous at time 3/18/15 11:12 AM, and returned statuscode -1.
oracle.stellent.ridc.protocol.ServiceException: Unable to download 'HSCSRV154.ALLE006130'. Access denied by records manager "
Once i log in the images are displayed.
What is the problem here?please help.
I am using the latest webcenter extension in jdev 11.1.1.7
Thanks,
chandrasekar M

Hi Vinod,
I tried using af:image like below and its the same issue.I have read in most of the blogs that since this is in the content presenter template, the image has to be displayed using output text with escape set to false.
<af:image source="#{node.propertyMap['REGDEF:Image'].asTextHtml}" id="image5"/>
I am not using <img> anywhere, its just that on the webpage when the image doesnt appear, I tried to see the source of the image using Firebug and it shows following:
<img src="${wcmUrl('rendition','xyz/web')} " alt = "Logo">
Edited by: Swathi Patnam on Jul 13, 2012 6:00 PM

Image gallery in DW-5

Using DW-5, is there a way to create an image gallery like the one at this link
http://www.katherinelove.com/frset_gallery.html
the most important thing is to have the thumbnails contain the entire image, not just a cropped bit, and the popups need to have a description of the image. otherwise, the site design can change, which in this case it needs to do!

Fancybox is a jQuery plugin. You won't find any automatic slideshow features in DW because it is a web authoring app; not a photo gallery app.
See Primer for Using jQuery Plugins:
http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html
Nancy O.

Create an image gallery in DW

Hi all
I am working on a new website in Dreamweaver. I am happy to hand code the HTNL and CSS (using what shortcusts are availablel CSS with Designer etc). As a fairly new subscriber to CC I have been using Lynda.com to the learn DW and found that DW no longer supports SPRY. I NEED TO CREATE AN IMAGE GALLERY WITHIN THE NEW SITE, but now need to know which adobe product is best to use to create the gallery and embed the appropeiate HTML/CSS etc into the pages using DW???
I appreciate your help here

My favorite is Fancybox2....
It handles anything!
http://fancyapps.com/fancybox/

Is there a way to create a CSS image gallery with caption?

Hi everyone,
Ive been using the disjoint rollover, but I only have one
thing that I want to add to it—a caption right underneath an
image.
Besides using that Project Seven plug-in, is there a way to
create an image gallery without using layers? Or is layers the only
way to do it? All I want (words of doom, huh?) is a thumbnail to be
able to switch and image and add a caption to it. Can anyone point
me in the right direction? Or is that Project Seven plug-in deal my
best bet? What about Set Text of Layer in DW.
Oh yeah, Im still using DW with CSS sprinkled in..any help?
Thanks in advance.
-C

> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers?
Of course.
> What about Set Text of Layer in DW.
That would do it, and it's not necessary that the layer stay
a layer after
you have done it, either. I do this frequently - make a
layer, apply the
behavior, and then remove the position:absolute from the div,
and place it
where I want it.
See the demo here -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"psypent81" <[email protected]> wrote in
message
news:eus555$lac$[email protected]..
> Hi everyone,
>
> Ive been using the disjoint rollover, but I only have
one thing that I
> want to
> add to it?a caption right underneath an image.
> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers? Or is layers the only way
to do it? All I
> want
> (words of doom, huh?) is a thumbnail to be able to
switch and image and
> add a
> caption to it. Can anyone point me in the right
direction? Or is that
> Project
> Seven plug-in deal my best bet? What about Set Text of
Layer in DW.
>
> Oh yeah, Im still using DW with CSS sprinkled in..any
help?
>
> Thanks in advance.
>
> -C
>

Image gallery using FancyBox

Similar Messages

Maybe you are looking for