I am trying to create a site for a friend. Yesterday I added a Slideshow to one of her pages. (She has several photos and we thought rather then placing each seprately on the page, a Slideshow would be a better option. Look cleaner and take up much less space.)
Can you all help me with changing some of the coding? I've worked at it, and tried several things, but I simply do not have the NEEDED knowledge to fix it myself. (I'm not getting anywhere.)
I added this HTML coding (http://www.angelfire.com/nm/thehtmlsource/jazzup/javascript/slideshow. html). I thought, for me, it looked/seemed fairly simple. And it is. However it lacks some coding I would like it to have, and so I'm not completely happy with it.
First, it requires all information, that she wants to add to the photos, to be added directly to the image itself before uploading. This would be okay for some. But on others I either don't have the needed room for the text...OR...on larger photos, when resizing is done, it then makes it too small to read.
And the second fault I find with it is, it doesn't accomodate/adjust to the varying sizes of the photos.
Here is the temporary site in my webspace (http://pointheavenwardsiamese.com/GeishagollSiamese/scrapbook.php) One image is okay and the othes are distorted either minimally...or...a LOT.
Can you help me either by fixing what I currently am using...or offer another option in HTML that has the features I am needing/wanting?
I would like it to be able to handle different sizes of images. I would also like it to have the feature of adding text below each image (so I do not have to do it directly to each photo in Paint). I want it "fading" (no flipping, twisting, falling apart, scrolling down, etc.). Able to add any amount of images. And because of my skill level...SIMPLE.
Thank you all so much for your help.
It is greatly appreciated.
Have a WONDERFUL day everyone!!
Melody
Slide shows DON'T handle different sized images that well. You need to find the com-denominator and base all your images onthat size OR you may need an image gallery like a 'lightbox' solution to do the job.
here one jquery slide show
Same with captions:
http://slidesjs.com/examples/images-with-captions/
Lightbox gallery:
Murray you are too funny! See...I'm still laughin' about that. (You know...don't you?!!)
I took a look at this yesterday. (Reading in the archives I found you had suggested it to someone else with a similar question.) I will look through it again.
Thank you both for your replies. Thank you.
Melody
<. . > Point Heavenward Siamese
www.pointheavenwardsiamese.com
"Unto You I lift up my eyes, O You who dwell in the heavens." Psalms 123:1
The slide shows most often recommended by Dreamweaver "experts" these
days are all from the same genetic pool and suffer from the certain
congenital limitations.
There is a singular product that goes beyond limitations of jQuery. But
it is not free:
http://www.projectseven.com/products/galleries/igm2/index.htm
--
Al Sparber - PVII
Dreamweaver Menus | Galleries | Widgets
You're getting very bitter these days Al....are you losing out that much financially to free jquery solutions....I guess you must be.....sorry about that but hey that's life.
Nothing wrong with your products, they are good but there are other solutons which do the job adequately for what the user requires.
Of course your solution are very suited to non "experts" so I guess you might be pissing those who make their money out of web design off too. Works both ways.
I'm not bitter at all
. I am more bemused than anything else. You say:
Slide shows DON'T handle different sized images that well
Your capitalization of the word "don't" makes your comment misinformative. You are describing a limitation of many jQuery-based gallery tools. jQuery is a well-written library and I would bet the ranch that if its founder decided to write an image gallery, it would be excellent. But he doesn't. jQuery is used by Tom, Dick, Harry, and Curly to write easy plugins that do not require writing original scripts to do exceptional or extraordinary tasks.
I'm just stating the obvious from a perspective of understanding what jQuery is and what it isn't.
That's all ![]()
Al Sparber wrote:
And let me add that if you are a student or just getting started and without a budget, we might be able to help you. Shoot us a mail and tell us about your situation.
Humm...... if you had'nt already guessed that's what most of the regular contributors in this forum do........help out without talk of money changing hands. Grow up.
Al Sparber wrote:
I'm not bitter at all
. I am more bemused than anything else. You say:
Slide shows DON'T handle different sized images that well
I would say you don't know the difference between a slide show and an image gallery or maybe we just have different views of what consitutes each.
Al Sparber wrote:
Why do you feel the need to get nasty? That's not very nice. I thought a lot of Dreamweaver users were professional web designers. Guess I must have been mistaken.
There you go again Al .... in denial.....you start the insults and innuendos and then try and shift the blame to others.........seen you do that before.
You're a very different person from a few years back, so sad, so bad.
Guess time catches up with everyone.
I'm sorry if we do not agree, but there is never a reason to get nasty.
The fact remains your statement that "Slide shows DON'T handle different
sized images that well" was not accurate information. If there was any
innuendo on my part it was that your statement would have been more
accurate had you said "jQuery Slide shows DON'T handle different sized
images that well". No insult was intended. Simply the truth.
Have a nice day.
--
Al Sparber - PVII
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
In my opinion, the link you supplied to your own solution, is NOT a slide show. Partly yes and party image gallery. That's NOT what the original OP required. They may do if they see it but I have to go on what information is originally departed.
http://www.projectseven.com/products/galleries/igm2/index.htm
I was more insulted by your use of the word 'expert' obviously refering to me as I was the only one who replied to the OP's request apart from Murray who recommend your solutions.
<quote>The slide shows most often recommended by Dreamweaver "experts" these
days are all from the same genetic pool and suffer from the certain
congenital limitations.</quote>
I've never said I was an 'expert', that's just some figment of you're warped (these days) imagination. Your attitude comes across that you have total distain for anyone who is NOT on your wave-length so maybe that's why discussions get a little heated at some times.
Ok so DW has introduced Spry which you hate and Jquery is now widley used, both of which must have impacted to some extent on your business, but no need to take it out in the forum.
Have a good day yourself.
Hi Osgood,
Sorry you feel that way and that there is nothing I can do to make it
better. But, to Melody - the poster in quest of a gallery or slide show
that would not mangle her images - this is what is possible:
http://www.projectseven.com/testing/adobe-forums/siamese/
I contacted her off-list, and if she is doing the site gratis for a
non-profit entity (her friend), I would certainly offer her a
complimentary copy. I shouldn't need to explain that to you but I'm a
little hurt by the light in which you are attempting to portray me.
Nothing could be further from the truth.
--
Al Sparber - PVII
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
Al, thank you for all that work! Goodness.
I have forwarded it on to my friend.
Can the background in the program (don't know what to call it), can it be made to whatever color you want? Like the same color as the body background?
Thank you!
Melody
<. . > Point Heavenward Siamese
www.pointheavenwardsiamese.com
"Unto You I lift up my eyes, O You who dwell in the heavens." Psalms 123:1
As you all saw...I'm still trying to figure out how to change that nav bar text color back to black. I got the underlining removed but am pulling my hair out on the (now linked) blue text color.
I would also like for it to change to another color (#D7955A ) when it is hovered over or selected. (So folks will know what page they are on.)
Here is my HTML (if someone would like to help me):
nav
nav ul {
list-style-type:none;
margin:2px;
padding:2px;
}
nav li {
margin: 25px;
}
Thank you all so very much!!!
Have a WONDERFUL day!
Melody
<. . > Point Heavenward Siamese
www.pointheavenwardsiamese.com
"Unto You I lift up my eyes, O You who dwell in the heavens." Psalms 123:1
Yes, Melody, the background is governed by CSS and can be changed. The
real power of the tool, though, is that you can use gloriously large and
vivid shots of the cats ad the system will automatically scale them,
without distortion, to fit in your page. Then you can opt to show a
full-screen button, which will expand the gallery, slide show (or
whatever you want to call it) to fit the entire window. It can make a
really dramatic presentation.
--
Al Sparber - PVII
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
Take a look at the example page I did for you earlier. It now includes
menu styling and an explanation for how it was done:
http://www.projectseven.com/testing/adobe-forums/siamese/
--
Al Sparber - PVII
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
Al can you tell me exactly where to copy/paste that coding?
I know this is not the right way to a page/website but I don't have a specific css page. My styling is included in each page's HTML .
Can you share where I need to put the menu work you did?
Here is my complete (home) page. (Index page is a cover page of background image and her Cattery logo/header.)
nav
nav ul { list-style-type:none; margin:2px; padding:2px; }
nav li { margin: 25px; }
section #cfa #geisha { }
Home
Okay I got it. The only thing is that the nav bar text does not STAY that lighter brown color when the page is selected.
Does that make sense? (Sometimes my wording isn't right...)
What I want it to do...is when I'm on my Home page...I want the text ("Home") in the nav menu to SHOW (by the lighter brown color) that I'm on the Home page. The same with each subsequent page...Cattery Policy...I want the text in the menu to be the lighter brown (rather then the dark.
What am I doing wrong? What coding is not there?
Thank you for your time. It's greatly appreciated!!
Melody
<. . > Point Heavenward Siamese
www.pointheavenwardsiamese.com
"Unto You I lift up my eyes, O You who dwell in the heavens." Psalms 123:1
when I'm on my Home page...I want the text ("Home") in the nav menu to SHOW (by the lighter brown color)
This is called a "Persistent Page Indicator" or "You Are Here" style on site wide CSS menus.
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
I don't have a separate style sheet. I know that is the wrong way to do website building...but my css is in with my HTML.
I didn't do something right as it didn't work. I'm thinking that I don't have my body. a. class tag in the right place.
If there is someone out there that has a sit-down-minute, and wouldn't mind looking through my coding...I sure would appreciate it. Tell me where I did wrong.
Here is my Home page:
body.home a.home, body.policy a.policy, body.males a.males, body.females a.females, body.kittens a.kittens, body.showing a.showing, body.retired a.retired, body.contact a.contact, body.scrapbook a.scrapbook, body.links a.links, { /*your custom styles here*/ color: #D7955A; text-decoration: underline; background: #FFE9C0; }
body { font-family: arial, helvetica, sans-serif; width: 980px; margin: 35px auto; } header, nav, section { background-color: #FFE9C0; border: 2px solid #371E0F } nav, section
header header h1
ul.navigation a ul.navigation a:visited ul.navigation a:hover, ul.navigation a:focus
nav
nav ul { list-style-type:none; margin:2px; padding:2px; }
nav li { margin: 25px; }
section #cfa #geisha { }
Home
http://pointheavenwardsiamese.com/GeishagollSiamese/home.php
<. . > Point Heavenward Siamese
www.pointheavenwardsiamese.com
"Unto You I lift up my eyes, O You who dwell in the heavens." Psalms 123:1
Al Sparber wrote:
Hi Osgood,
Sorry you feel that way and that there is nothing I can do to make it
better. But, to Melody - the poster in quest of a gallery or slide show
that would not mangle her images - this is what is possible:
http://www.projectseven.com/testing/adobe-forums/siamese/
Al
The images as I said in my original post arent ALL the same size in your example. Thats why I said slide shows dont handle different sized image that well, whereas image gallery do. Having enormous areas around the images to 'fake' the size isn't the same as being the same size and looks rather ugly in my opinion.
Al Sparber wrote:
I shouldn't need to explain that to you but I'm a
little hurt by the light in which you are attempting to portray me.
Nothing could be further from the truth.
I'm not trying to attempt to portray you in a bad light, youre doing a good job at that yourself with the underhand remarks that you frequently post in the threads you care to jump in on. You know what you're doing, stop that and no one gets hurt.
Your products are undeniable good but for some reason over the last couple of years your personal attitude has changed for the worse in my opinion. I can only link that to the changes in developments which potentially affect your business.
Sure everyone hates taking a smaller slice of the pie but as I said, that's life. Move on and be happy.
Hi Osgood,
I'm really not sure what you are trying to explain concerning galleries
versus slide shows. A tool does not a good design make. A good tool,
however, is adaptable and both our gallery and slide show tools are
adaptable. They adapt to the width of their containing elements and they
adapt to the height of their contents. This is usually not the case with
free scripts. Essentially, that was all I was trying to say.
As for design, I would welcome a challenge. Why don't you create a
gorgeous gallery - or slide show - and I'll take your images and do one
with my tools. And let's see which one looks better and works better. It
would be a fun exercise, don't you think?
I appreciate the fact that you seem to know me so well, but allow me to
be the final arbiter in the case of me
I am neither bitter nor
crestfallen about entities you seem to believe have eroded my company.
On the other hand, you seem to be quite upset that I challenged your
statement. I did that only in the interest of accuracy.
--
Al Sparber - PVII
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
Al Sparber wrote:
Hi Osgood,
I'm really not sure what you are trying to explain concerning galleries
versus slide shows. A tool does not a good design make. A good tool,
however, is adaptable and both our gallery and slide show tools are
adaptable. They adapt to the width of their containing elements and they
adapt to the height of their contents. This is usually not the case with
free scripts. Essentially, that was all I was trying to say.
In that case we both misunderstood one another but there was no need for the sarcastic 'expert' comment because you assumed that you were correct, as seems to always be the case.
All I was attempting to explain is different sized images do not adapt well to a slide show because of the very nature some will need ugly spacing around them to allow them to conform to a specific area (as you have proved in your example) where as an image gallery like a 'lighbox' solution handles variable sized images much better in my opionion. Not sure what so difficult to understand about that to be honest Al
Al Sparber wrote:
As for design, I would welcome a challenge. Why don't you create a
gorgeous gallery - or slide show - and I'll take your images and do one
with my tools. And let's see which one looks better and works better. It
would be a fun exercise, don't you think?
I'm not into the macho approach Al sorry. I'm confident of my own abilty without resorting to childish egotistical challenges. I was'nt implying your tool is not good just the images in my opinion don't adapt well to the solution. Can I not voice an opinion without you seeing it as a direct insult to your abilities?
Al Sparber wrote:
I appreciate the fact that you seem to know me so well, but allow me to
be the final arbiter in the case of me
I am neither bitter nor
crestfallen about entities you seem to believe have eroded my company.
On the other hand, you seem to be quite upset that I challenged your
statement. I did that only in the interest of accuracy.
Most alcholics would deny they were one, so sometimes ones own judgement of character is not best done by themselves ![]()
Al Sparber wrote:
The original poster was talking about her free script which distorted
her images by stretching them to fit a viewport that must have its
dimensions set for the script to work.
Thats why I thought it might be fairly obvious that if the images were formated at the same dimensions the slideshow presentation would be more acceptable. There would be no distortion hence I said maybe a 'lightbox' solution may be a better option UNLESS of course they are happy with the necessary extra spacing around the variable sized images when using a slideshow solution.
My immediate reaction was I wonder if the OP thinks a consitant presentation (same sized images) can be arrived at without distortion using different size images. I know it may seem a ridicuous thought but some people are not that spacially aware.
RE: PERSISTENT PAGE INDICATOR ON MENUS.
Try this in your CSS:
navigation li a {font-weight:bold}
body.home navigation li a.home,
body.policy navigation li a.policy,
body.males navigation li a.males,
body.females navigation li a.females,
body.kittens navigation li a.kittens,
body.showing navigation li a.showing,
body.retired navigation li a.retired,
body.contact navigation li a.contact,
body.scrapbook navigation li a.scrapbook,
body.links navigation li a.links, {
/**your custom styles here**/
color: #D7955A;
text-decoration: underline;
background: #FFE9C0;
}
You can remove the <strong> tags from links in your HTML because CSS covers this with font-weight:bold.
Nancy O.
With a scratch-programmed gallery and logically sized images, you do not
have to go the "extra space" route that you dislike (but others like),
You can simply use a gallery that automatically takes care of things for
you, like this:
http://www.projectseven.com/products/galleries/igm2/examples/demo-04.h tm
--
Al Sparber - PVII
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
Copy & Paste this code into a new, blank page. I removed the <strong> tags, ul class attribute and re-organized nav CSS for you. Now it works!!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Geishagoll Siamese</title>
<style type="text/css">
html {
overflow-y: scroll;
background-image: url(_img/geishagoll.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
body {
font-family: arial, helvetica, sans-serif;
width: 980px;
margin: 35px auto;
}
header, nav, section {
background-color: #FFE9C0;
border: 2px solid #371E0F
}
nav, section {
float: left;
}
header {
height: 80px;
line-height: 85px;
font-size: 25px;
color: #371E0F;
font-family: "Chinese Takeaway", "Comic Sans", Cursive;
text-align: center;
margin-bottom: 10px;
}
header h1 {
margin: 0;
}
/**Nav Menu**/
nav {
width: 150px;
margin-right: 10px;
text-align: center;
font-size:18px;
font-family: "Chinese Takeaway", "Comic Sans", Cursive;
}
nav ul {
list-style-type:none;
margin:2px;
padding:2px;
}
nav li {margin: 25px;}
nav li a {
color: #371E0F;
text-decoration: none;
font-weight:bold;
}
nav li a:visited {color:#371E0F}
nav li a:hover,
nav li a:active,
nav li a:focus {color: #D7955A;text-decoration: underline;}
/**persistent menu highlighting**/
body.home nav li a.home,
body.policy nav li a.policy,
body.males nav li a.males,
body.females nav li a.females,
body.kittens nav li a.kittens,
body.showing nav li a.showing,
body.retired nav li a.retired,
body.contact nav li a.contact,
body.scrapbook nav li a.scrapbook,
body.links nav li a.links {
color: #D7955A;
text-decoration: underline;
font-size: 33px;
}
section {
width: 762px;
padding: 0 25px;
font-weight: bold;
font-size:18px;
}
#cfa {margin:0 85px 20px 35px;}
</style>
</head>
<body class="home">
<header>
<h1>Geishagoll Siamese</h1>
</header>
<nav>
<ul>
<li><a class="home" href="http://pointheavenwardsiamese.com/GeishagollSiamese/home.php">Home</a></li>
<li><a class="policy" href="http://pointheavenwardsiamese.com/GeishagollSiamese/policy.php">Cattery Policy</a></li>
<li><a class="males" href="http://pointheavenwardsiamese.com/GeishagollSiamese/males.php">Males</a></li>
<li><a class="females" href="http://pointheavenwardsiamese.com/GeishagollSiamese/females.php">Females</a></li>
<li><a class="kittens" href="http://pointheavenwardsiamese.com/GeishagollSiamese/kittens.php">Kittens</a></li>
<li><a class="showing" href="http://pointheavenwardsiamese.com/GeishagollSiamese/showing.php">Showing</a></li>
<li><a class="retired" href="http://pointheavenwardsiamese.com/GeishagollSiamese/retired.php">Retired Adults</a></li>
<li><a class="contact" href="http://pointheavenwardsiamese.com/GeishagollSiamese/contact.php">Contact</a></li>
<li><a class="scrapbook" href="http://pointheavenwardsiamese.com/GeishagollSiamese/scrapbook.php">Scrapbook</a></li>
<li><a class="links" href="http://pointheavenwardsiamese.com/GeishagollSiamese/links.php">Links</a></li>
</ul>
</nav>
<section>
<p>Welcome to Geishagoll Siamese, established in 1987 and located on the East Bench of the beautiful Wasatch Mountains south of Salt Lake City, Utah.</p>
<p>Siamese cats have been part of our lives for many years and are treated as family members.</p>
<p>Our hobby is breeding and showing Siamese in the four CFA accepted colors of seal point, lilac point, chocolate point, and blue point. Pet, Breeder, and Show cats are occasionally offered to select homes.</p>
<p>Enjoy your visit and please contact us if you have any questions or would like to reserve the Siamese of your dreams.</p>
<p><img src="_img/CFA09.gif" width="400" height="75" alt="CFA Approved Cattery 2009" id="cfa"> <img src="_img/Geisha-face.jpg" width="224" height="224" alt="Geisha face"></p>
</section>
</body>
</html>
Good luck with your project!
Nancy O.
Oh my GOODNESS...that DID IT!!!
Nancy, thank you!!!
It's terribly frustrating to keep trying things...and only get the same disappointing result.
Thank you!
Melody
<. . > Point Heavenward Siamese
www.pointheavenwardsiamese.com
"Unto You I lift up my eyes, O You who dwell in the heavens." Psalms 123:1
North America
Europe, Middle East and Africa
Asia Pacific