SPRY image gallery bigger thumbnails
Hi,
I am new to Ajax (trying to learn) and i think SPRY it's
great.
I am working in the image gallery and i want to have bigger
thumbnail images on mouse over- bigger than 24px - and i can't....
I changed the css #thumbnails img to 50px for example but
when i am trying to mouse over i get a mess.
Also when i am trying to do this from the gallery.js in the
"var gThumbHeight;" and "var gThumbWidth;" i get a mess again.
How can i do this for example thumbnails "width:100px;" and
"height:100px;"
Thank you in advance
OK, I solved the problem how to make thumbnails bigger while
i am hovering on them.
But now there is another problem......
When a thumbnail becomes bigger in the Firefox everything
works fine, but when it becomes bigger in the IE remains under the
next thumbnail.
I don't know how to described better.
Thank you in advance
Similar Messages
-
Spry image gallery with filmstrip - how to display all thumbnails?
Hello,
I'm using the Spry image gallery with filmstrip and want to be able to show all thumbnails. So instead of scrolling across to see all the thumbnails I would like to display them in a couple of rows. I thought it would be a case of changing the css from overflow: hidden to overflow: visible and increasing the height but this didn't make a difference.
An example of my gallery is here http://www.demo.femmewebsites.com/gallery.html (This site doesn't have many thumbnails but I have others with 20+ images that need to be displayed)
Your help would be much appreciated.
ThanksHello Krista,
did you have a look here: http://labs.adobe.com/technologies/spry/demos/pe_gallery.html, where you will find DW "Photo Gallery Demos". In every demo, are arranged a large number of images in several rows and rows. Therefrom you can use their source codes.
Hans-Günter -
Hi there, just a question, I created a spry image gallery successfully with thumbnails on the left and the bigger image and details on the right, my problem is its created it with all the thumbs going down vertically after looking everywhere i havent found the solution, im hopefully wanting the thumbnails in a grid style so there are a few on each line, can anyone help?
I'm not sure which part of the code you were asking for, but this is the code from the actual spry table which was created.
<div id="Text">
<div class="MasterDetail">
<div spry:region="ds1" class="MasterContainer">
<div class="MasterColumn" spry:repeat="ds1" spry:setrow="ds1" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{thumbnail}</div>
</div>
<div spry:detailregion="ds1" class="DetailContainer">
<div class="DetailColumn">{name}</div>
<div class="DetailColumn">{description}</div>
<div class="DetailColumn">{picture}</div>
</div>
<br style="clear:both" />
</div>
<p> </p>
</div> -
Image Gallery Magic Thumbnails Not Showing
I have an existing page which I've added a new gallery to.
The gallery
looks fine in Dreamweaver but as soon as it's viewed in IE
the thumbnails do
not show up. If I select the encoding of the page to "none"
all works fine
with the gallery but my DIV tags don't works properly, i.e
they don't
center. I have uploaded an example of my page:
www.bluchip.gg/bc458a.htm
Any ideas?Hi Warren,
Your style sheet has errors in it. Replace your style sheet
with a fresh
default one.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"Syztemlord" <[email protected]> wrote in
message
news:fr67fr$7oh$[email protected]..
>I have an existing page which I've added a new gallery
to. The gallery
> looks fine in Dreamweaver but as soon as it's viewed in
IE the thumbnails
> do
> not show up. If I select the encoding of the page to
"none" all works
> fine
> with the gallery but my DIV tags don't works properly,
i.e they don't
> center. I have uploaded an example of my page:
>
>
http://www.bluchip.gg/bc458a.htm
>
> Any ideas?
> -
Image gallery to autoplay and highlight the thumbnails
Hi all,
I still haven't been able to find anything suitable for an
image gallery with thumbnails that:
- autoplays
- highlights the thumbnails and displays the main image at
the same time
- and when the mouse is over the thumbnail, the thumbnail
highlights or has a border around to show that it's been selected.
Here is a sample of what I'm looking for:
http://components.earthscienceagency...nts/slideshow/
Of course the captions need to be loaded as well as a
previous and next button to scroll through the images.
Any help with this would be greatly appreciated.
ThanksHi all,
I was able to resolve some of my issues, but still have a
couple more. The images from my xml appear out of order (so the
last one inserted in the xml appears first) and also I'd like the
thumbnails to be highlighted as the main image transitions in and
out. I have the main image autoplaying and the thumbnails are
pretty much static.
I've provided the AS below. For the thumbnails, would it be
possible to create a similar to the slideshow function and have the
thumbnails play at the same time too?
Any help would be greatly appreciated! -
Flash simple image gallery problem
Hello I have what I think is an easy problem to solve but I
can´t find a solution.
I´m creating an image gallery with thumbnails on the
right inside a symbol so that
they can all fade in at the same time, and the bigger images
on the left that also fade in.
I can only fit 8 thumbnail images at a time, and want to have
more than that.
So I´ll add an arrow below the thumbs so that when you
click on it, you can see the other thumbs.
I have the first 8 thumbs on the first frame of a symbol and
the rest on the second frame.
My problem is that the symbol that contains the thumbs is a
graphic symbol, so that the thumbs in it, that are button symbols
can be clicked on. I tried using button and movie clip symbols for
the thumbnails container but then the buttons (thumbs) can´t
be clicked any more.
That was not a problem till I had to add more than 8 thumbs,
cause i need to give the container an instance name, and graphic
symbols can´t have one.
Here is the link to download the .fla
www.ginkgo.com.uy/old/downloads/handheld_pink.fla
In case I didn´t make my self clear, what I need is to
know if there´s a way to have a movie clip or button symbol
that can have buttons in it that can be clicked on.
I hope I didn´t give you a headache.
Thanks a lot, Marcelo.thanks.
that´s what i thought but, if i convert the container to
a button symbol the thumbs can´t be clicked anymore.
And if I convert the container to a movie clip like you
suggested, then if I click on any part of the container it
just goes to the second frame of the movie clip container, if
i click again it goes back to the first frame and so on.
But there is no action script for the container at all,
please try it out with the fla i uploaded.
i can´t figure it out.
thanks -
Help! I need a special image gallery!!
Hello!
anyone know if you can make an image gallery with thumbnails and where each one is linked to a photo slide? Also require that the thumbnails act as a color button, not appear like a thumbnail photo. I need help! Thanks in advance!
PD: sorry for my english skills!!!Hello,
You can use Blank Composition Widget to achieve this.
Seems like you are trying to create something similar to : http://muse.adobe.com/widgets/composition/slideshow-ouatt.html
You can insert your images in the Target containers and can use Fill colors for different states of trigger containers.
Please refer to the video which might help : http://tv.adobe.com/watch/muse-feature-tour/muse-trigger-target/
Regards,
Sachin -
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.
-
Adding spry fade effect to thumbnail gallery??
Hi,
I have a gallery page with a set of thumbnail images each linking to a main image.
I would like to add a simple javascript fade in for each main image. So when the user clicks on the thumbnail, the main image will fade in.
I took a look at the spry effects page (http://labs.adobe.com/technologies/spry/samples/effects/fade_sample.html) but this uses an onclick event and my code already has some onclick events:
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" title=\"$imgTITLE\">
...so i'm not sure if i can add the onclick events for the fade which is:
onclick="firstFade.start();"
Any ideas how i can get this to work?
Thanks for any help
Bhi, thanks for the reply.
This just applies a fade to whatever is being clicked i.e. i add this to the div container where my big image will appear and when I click on this image the main image fades out. However i want the big image to fade in when the thumbnails are clicked.
Here's the html:
<div id="left">
<img src="images/jpg25.jpg" title="kawasakigreen">
</div>
<div id="right-gallery">
<div class="gallery">
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_1.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_2.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_3.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_4.jpg" alt=""/>
</a>
</div>
</div>
So each thumbnail references a bigger image dynamically. I think i may need to add an onclick event to the thumbnail but I don't know how.
Is there any other way to achieve a fade in on the bigger image when a thumbnail is clicked?
Thanks
B -
Troubleshoot Main Image for spry photo gallery
Hello, I am modifying some spry files to see if I can get the
hang of it using my images. I have taken the photo gallery files
gallery.js
SpryData.js
SpryEffects.js
xpath.js
The folder structure contains images and thumbnails on the
root folder as well as the ap.css sheet and photos.xml
The page is
http://www.proximita.com/learning/index.html.
Since I only have 1 photo gallery (and I did the getting
started tutorial and worked fine I wanted to add the slideshow
effect in the spry demo functionality) I only have one xml doc and,
as mentioned, the both image folders and the css sheet are on the
root, and the all the js files are in an includes folder.
The thumbnails show up fine, but, the main image does not
show up at all. I am almost sure this is a bad reference somewhere
or a begginners mistake but I cant find it.
I did modify the gallery.js because it referenced 2 or three
variables (like dsPhotos and dsGalleries that are used for the demo
I only have dsGallery) and I cahnged all of the other refrences to
dsGallery.
I think I am having problems here:
function ShowCurrentImage()
var curRow = dsPhotos.getCurrentRow();
SetMainImage("galleries/" +
dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"],
curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
you can check out the whole code here:
http://proximita.com/learning/includes/gallery.js
Im unconcerned with appearance for the moment, and would just
like to see the main image and the slideshow functionality.
If you can help, please do. Thanks, Mario.yes, I suspect that is because the tutorial talks about
building this from scratch and uses that name for the "thumbnails"
div rather than what they actually use in the demo files...
confusing, to say the least.
It would be nice if there were a simple document with demo
files that didn't include other stuff unrelated to JUST the slide
show (gallery)... and if the whole layout were more simple,
css-layout-wise...
or, if the demo files were commented with what each bit is
for and how to modify it.
quote:
Originally posted by:
Dragos GEORGITA
Hi Mario,
I took a look at your sample and I've noticed you change the
ID of the container that holds the thumbnails (it was called:
"thumbnails". now it's "thumbContainer").
You need to open gallery.js and change the observer to point
to the new container:
Change
Spry.Data.Region.addObserver("thumbnails", function(nType,
notifier, data) {
To
Spry.Data.Region.addObserver("
thumbContainer", function(nType, notifier, data) {
Regards,
Dragos -
Seeking Spry Gallery mouseovered thumbnail identifier/ID
Hi!
I would like to ask my earlier question about the Dynamic
Image Preview extension in a different way. I think my point was
not clear.
Operating in a Spry gallery of thumbnails with my images in
‘images/’ directory, what is the identifier that will
give the name of the thumbnail image being currently mouseovered
and make it possible to go to the images directory and extract the
main image?
Do I write it as
‘images/{Ds_CurrentRowID}{photoname)’ or ‘images/
+ {Ds_RowID}(photoname}’ or what?
Thanks!
MikeHi Don,
Many thanks for your patience!
Latest news:
Good heavens! I put that version up again (
http://www.worldseniorcharityrugby.org/index2.php)
and the third column appears to work for the top image! The images
are too big - I will upload smaller ones.
I see another problem: any ideas why it may not work for the
second or third image? Could it be the numbering in the 'link' part
is replicated by Spry?
I put a version up again - on the page there are 5 images per
record. I am just focusing on the third & fourth of those
images involving {photo3} and {photo4} until I get the answer.
Looking at your site again I think the below is getting a bit
nearer to the answer -
I have put backslashes since it is inside javascript - is
that right?
To put the setCurrentRow before the
'javascript:createPreviewImage ..' would seem to be the best way
but it won't work!
I wonder whether this extension can actually be intregrated
into Spry! I hope it can.
Mike
<div align="center"><a href="Link502072C0"
id="Link502072C0" style="cursor:help"
onmouseover="javascript:createPreviewImage('TSPreviewImagePanelID502072',
DsIndividuals2.setCurrentRow(\'{ds_RowID}\'); '{photo3mes}',
'../images/{photo3}', 'Link502072C0',600,450, true)"; <img
src="<?php echo $objDynamicThumb4->Execute(); ?>" alt=""
name="photo3" height="66" border="0" align="middle" id="photo3"
/></a></div>
</div>
</div></td>
<td width="70"><div>
<div>
<div align="center"><a href="Link502072C0"
id="Link502072C0" style="cursor:help"
onmouseover="DsIndividuals2.setCurrentRow('{ds_RowID}');
javascript:createPreviewImage('TSPreviewImagePanelID502072',
'{photo4mes}', '../images/{photo4}', 'Link502072C0',600,450,
true)"; <img src="<?php echo $objDynamicThumb4->Execute();
?>" alt="" name="photo4" height="66" border="0" align="middle"
id="photo4" /></a></div>
</div> -
Spry Photo Gallery Image Size via CSS
Hello!
I´ve been customizing the spry photo gallery for a couple of time, but got my little problem when viewing it on a mobile phone. When you load up the pictures with a size of 450 x 300 px for example, put up the right xml file with it´s width and height, so the gallery shows the pictures in that size. So what I want to do is that you can specify the image size with css depending on the device you´re watching the site with. There is div in the css called "mainImage" where the size is in %. When you change it to 75% for example. The pictures are correctly shown with 75% of it´s original size, but the outline (grey background) is still in 100%. When you make this grey background transparent it´s still there and moves the caption down. I guess there have to be done some changes within the SpryImageViewer.js, but I just know very little things about JavaScript. Do you have any clues how to change this to specify the image size via CSS?
Thank you for your help!!!
Kind regards,
JoergI see you are still using Spry 1.5. Have you considered upgrading to
Spry 1.6.1?
Also your XML is broken, if you open up your xml in a normal standards
complaint browser such as firefox, you will see that it doesn't render
a normal tree view as it would do with other xml files. So i suggest
checking those errors out.
Its mainly because you forgot to close your starting tag of the
gallerys node. (<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
before your xml starts. -
Dynamic Spry Photo Gallery Thumbnails
I'm implementing the XML version of the Spry Photo Gallery. I
need to edit the size of of the thumbnails and make them larger,
roughly 100x130 or maybe a little smaller. Since I have so many
photos, I was planning to use CSS to handle the overflow with a
scrollbar. I noticed sizing occurs in the Index file, Gallery.js,
and in the XML file. Are there any others that im missing? I'm
having a problem with resizing them, they dont resize when I adjust
the size in those places. Any suggestions would be appreciated.
Thanks
link (select Tattoo from the dropdown):
http://www.bugsartwork.com/beta/gallery/index.htmlI overlooked screen.css, there was some css that was setting
the thumbnail img tag. -
Spry Photo Gallery - How to add links to images
I was wondering if any one knew how I could add individual
links to images on the spry Photo Gallery—An XML-based photo
gallery. I need each image to have its own individual link when
clicked on. Any assistance would be most helpful.Hi,
In the dashboard --> edit option u can see dashboard object here u can see folder ...by this folder u just include dashboard page other wise in the catalog share folder u need create each and evry module pre planned folder then save it each dashboard pages to relevent module folder.
THanks
Deva -
Cycle images in a thumbnail gallery
Hi, I'm very new to HTML, so please bear with me. I'm
currently using a "Thumbnail Gallery" style page for my online
portfolio (when the cursor hovers over a thumbnail the image pops
up to the left of it) Here's a link:
Portfolio
What I'm wondering is, would it be possible to cycle through
several images, when the cursor hovers over a Thumbnail (instead of
just one image for each thumbnail)? I'm thinking of showing several
views of a single model in my 3D section.You could try and combine the code with a slide show like
this one...
http://www.lisajaynedann.co.uk/
If you are not confident about trying to combine the code (I
wouldn't be!) then you could have the page as you have it now, but
require the users to click each thumbnail, instead of hovering to
select the next slide show. By clicking each thumbnail would link
to a new page, carrying the separate slide show.
You could also try and find a script that follows a link on
hover rather than having to click.
Maybe you are looking for
-
can i exchange my iphone 5c with iphone 5 by paying more or just exchange without paying?
-
How to embed a screenshot into a topic post/topic reply.
Hi all, I wasn't sure which forum to post my question in, so since all my Discussions stuff opens in a browser window, I thought it might as well be in the Safari forum. My query is two-fold: 1. How do I embed a screenshot into a reply so that the sc
-
Chat keeps showing me offline when i talk in facebook to people and i am still online and logged in
i chat to people in facebook and i appear offline then when they answer they get the message that i am offline and need to send it as a message ie hello (send as a message) your chat message wasn't sent because madmax was offline . i am logged in all
-
Windows cannot get Flashplayer to install
Flashplayer upgrade will not install using Win 7
-
Two iTouches; iTunes trying to overwrite one of them with other's info
I was trying to add music to my two kid's iTouches. I didn't realize I had my son's plugged in and iTunes asked if it should recognize this iTouch as my daughters. (I don't think I'd sync'd his before) I said yes and then realized it was my son's iTo