I understand where you're coming from.. you put in all this effort and then
someone comes by and say "hey, I would remake the whole thing" ... lol :)
I have to agree with Lee though, not that we are calling your efforts a
real mistake btw, it can only go better from here and even though I can
hack things together pretty quick I am almost never satisfied and re-do
stuff all the time (also client work).
But OK- back to your page.
I think there are a few other things as well you can focus on to make this
a better site (code wise, I like the simple design that brings focus to the
work/photos).
1. You can not use multiple CSS id's that are the same in 1 page. In
your page there are multiple div's with id="main_nav_a" which can not be
targeted with JS
2. You are not only including mootools 1.2 which is an "old" release
(though it works), but you are also including another one:
"js/gallery_mootools.js" Maybe this one came with the gallery JS? I don't
think you need it, can only lead to problems.
3. I'd disable Google Analytics code while developing
4. Do not use inline JS code in your html. So something like <body
onload="javascript:switch_gallery(0)"> makes us all go NOOOOOO
1. This stuff should be in the domready event, the domready event
fires even before onload which is nice, and you already use it when you
instantiate the SmartHoverBox. You see in the code there:
window.addEvent('domready', function(){ ....code here.... }); Now, in
there
you can do the smartbox stuff that is there already, but you should also
start the gallery there and keep the <body> element clean of all that.
5. No need to put in ALL CAPS TEXT inside your html (like READ STATEMENT
etc.), you can just leave it like "Read statement" or "Read Statement" or
even "read statement" and use CSS to transform it to uppercase text. So..
you're links there already have the class "achap" .. in that class you can
also add "text-transform: uppercase;" et voila. Or, you can create a new
CSS class called "uppercase" and add it to the class definition on the
element: <a href="#" class="achap uppercase">bla bla</a> so that you can
use it in other places to if you'd like...
6. Try to indent your code. If you view the source of your document
there a lot of div's below each other, and you don't have any idea about
the hierarchy this way. This is not good for debugging too.. besides, try
to grasp it yourself after a week or two without looking at it.
*Back to the gallery*
OK, so you don't want to check out SlideShow? I would definately check it
out.. it will make you life easier. Trust me.. or not your life.. it will
make your "I want to make a nice gallery here" life easier in HTML land :)
Maybe you can set the first initial image. I see there is a
"current_image_counter" variable that is set to 0 when the gallery loads
using the "switch_gallery" command (that is now in the body onload). The
"switch_gallery" function now takes 1 argument, the "section_id" when then
turns into "gallery_id" Maybe you can put in another argument called
"initial_image" and use that to set "current_image_counter" to that value,
instead of the default 0.
For example:
window.addEvent('domready', function(){
var smartbox = ...
switch_gallery(0,3);
});
You need to change the switch_gallery function to something like:
function switch_gallery(section_id, start_image_index) {
gallery_id = section_id;
switch_gallery_title();
current_image_counter = start_image_index || 0;
load_image();
}
This would tell me that I want to see image number 4 as starter (remember
arrays start at position 0).
Then the function "load_image" that is inside "switch_gallery" would use
that value too. If you check this line: $('photo').src =
gallery_images[gallery_id][current_image_counter];
This would then read to pick gallery_images[0][3] and show that.
Have you tried this?
*Querystring*
Now, for reading this starting index from the url is yet another thing.
Start by reading mootools docs about the URI to get those query string
vars: http://mootools.net/docs/more/Types/URI#URI:get
Rolf
On Monday, October 29, 2012 10:26:12 PM UTC+1, jocrla wrote:
>
> thank you for the thoughtful response and the new slideshow
> recommendation. i am considering the transition, but am also hoping to save
> myself from fully rebuilding the site. is an "initialSlideIndex" type
> variable something that could potentially be added to my current gallery,
> even if is not the most beautiful coding solution? or am i stuck in a
> situation where i rebuild, or can't have that feature?
>
> thank you again for the information!
>
>
>
> On Friday, October 26, 2012 2:27:52 AM UTC-7, Rolf Langenhuijzen wrote:
>>
>> I think you should drop the gallery you are using now. It was a good
>> excercise with JS, but the code is not optimal and the gallery is not so
>> flexible.
>>
>> There are probably a few good slide show gallery "plug ins" available,
>> but one that is very nice and well coded is Ryan Florence's SlideShow.
>> Check it at: http://ryanflorence.com/slideshow/
>>
>> You can simply start with a container of elements (e.g. images or images
>> in divs), hook up the SlideShow and it works.
>> Then you can start using the events the class fires (like onShow or
>> onShowComplete) to trigger other stuff outside of the gallery code that is
>> specific to your use case. For example showing some captions or other
>> information in some div or whatever. Or, like in your demo hook up the
>> previous/next buttons to the code.
>>
>> What you can do for example is store the caption information in a
>> data-attribute in the element that is the image. For example:
>> <img src="gallery/la_o_13.jpg" data-size="40x60in (101x152cm)"
>> data-medium="Digital C-Print" data-year="2011" data-caption="Silencio
>> Chiñulito">
>> Now you can write a function (outside of the SlideShow code, perhaps in a
>> separate class) that does all the stuff after sliding using the element
>> data-properties you defined.
>> It's much cleaner to decorate the elements instead of pushing everything
>> into JS like your current setup.
>>
>> If you are comfortable with the settings you can start looking at the
>> effects for sliding, but there are default ones that are probably fine.
>>
>> SlideShow also has a variable called initialSlideIndex that you can set
>> so that you can skip directly to image X in your collection on startup.
>>
>> If you have any questions, don't hesitate to ask here.
>> Maybe it feels intimidating to start using MooTools or SlideShow for
>> example, but it's not that hard.
>>
>> Rolf
>>
>>
>> On Wednesday, October 24, 2012 10:27:01 PM UTC+2, jocrla wrote:
>>>
>>> i am not sure what the gallery is called. i picked up the code online,
>>> and modified it a bit.
>>>
>>> the JS for the gallery is here:
>>> http://www.outhause.com/lao/js/gallery_lao.js
>>>
>>> my thought was that i could plug a variable for "current image" into the
>>> url string to make the html page land on an image in the middle of the
>>> gallery. i can't get this to work though. sound possible to you? (full
>>> disclosure, i am a hopeless js novice as well as a mootools newbie)
>>>
>>> thanks for the forge rec. i will check that out as well.
>>>
>>> thanks!
>>>
>>>
>>>
>>> On Wednesday, October 24, 2012 1:16:38 PM UTC-7, Arian Stolwijk wrote:
>>>>
>>>> Which gallery are you using? I guess you're using some kind of plugin.
>>>> Also you're using an outdated MooTools version (1.2.1 instead of 1.4.5).
>>>>
>>>> Maybe you should look in the forge (http://mootools.net/forge/) for
>>>> some better slideshows.
>>>>
>>>> On Wed, Oct 24, 2012 at 10:01 PM, jocrla <[email protected]> wrote:
>>>>
>>>>> Hello,
>>>>>
>>>>> I setup an image gallery using mootools, and have been unable to
>>>>> figure out how to create a direct link that would send a user to an image
>>>>> in the middle of the gallery, opposed to just the first image.
>>>>>
>>>>> an example of the gallery is posted here:
>>>>> http://www.outhause.com/lao/gallery_lao.html
>>>>>
>>>>> Obviously i am a mootools newbie, and i have been scratching my head
>>>>> over this one for some time. If anyone has the answer to this question,
>>>>> it
>>>>> would be very much appreciated.
>>>>>
>>>>> thanks!
>>>>>
>>>>
>>>>
