Creating a gallery with just a link and a js array of image urls

classic Classic list List threaded Threaded
27 messages Options
12
Reply | Threaded
Open this post in threaded view
|

Creating a gallery with just a link and a js array of image urls

Nijo
Hi,

i am trying to create a shadowbox gallery without directly displaying any of the gallery elements on the webpage before the gallery is opened. The aim is to just have one link which will start the shadowbox gallery.

My current code looks like this:

In the head:
<script type="text/javascript"> jQuery(function(){ Shadowbox.init(); var galleryItems = new Array(); galleryItems[0] = "/media/upload/img_0778.jpg"; galleryItems[1] = "/media/upload/img_0792.jpg"; galleryItems[2] = "/media/upload/img_0793.jpg"; Shadowbox.setup(galleryItems, { gallery: 'sbGallery' } ); }); </script>
And in the body:
click


I have looked thoroughly but cannot find a solution. Any help to get started on this or find a good docu would be appreciated.

Thanks! ;)
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

Nijo
Whoops, this messed up displaying the HTML-code for my link. It looks like this: (a href="/media/upload/img_0778.jpg" rel="shadowbox[sbGallery]")click(/a) Firefox error console also says this: Error: aH.getAttribute is not a function Source file: shadowbox.js Line: 8
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

Nijo
bump^^ I'm using jQuery v1.4.2 and the latest shadowbox version built for jQuery support, if that helps. All help is appreciated.
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

Matt Alexander
I'm having the exact same problem.

EDIT: I figured it out.

I had this:

Shadowbox.init({ skipSetup: true });
Shadowbox.setup($('.main-product-image a'), shadowBoxOptions);
Shadowbox.setup($('.other-product-images a'), shadowBoxOptions);

But I needed this:

Shadowbox.init({ skipSetup: true });
Shadowbox.setup('.main-product-image a', shadowBoxOptions);
Shadowbox.setup('.other-product-images a', shadowBoxOptions);

Otherwise, it was failing when $('.other-product-images a') returned zero results, which is does on some pages.


Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

kairun
I'm trying to figure out how to hide all the external urls from the source to clean up the page, but this is the only way i've been able to do it.


<a href="/media/upload/img_0778.jpg" rel="shadowbox[sbGallery]">click</a<b>>

<div style="display:none">
<a href="/media/upload/img_0792.jpg" rel="shadowbox[sbGallery]"></a<b>>
<a href="/media/upload/img_0793.jpg" rel="shadowbox[sbGallery]"></a<b>>
<a href="/media/upload/img_0778.jpg" rel="shadowbox[sbGallery]"></a<b>>
</div>
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

magic_quotes
In reply to this post by Nijo
Hi, having the same thing to do i wrote thinks like this :
<code>
Shadowbox.open([
        {player: 'img', content:'relative/path/to/images/image_1.jpg'},
        {player: 'img', content:'relative/path/to/images/image_2.jpg', title: 'your title', width: 200, height: 200},
        {player: 'img', content:'relative/path/to/images/image_1.jpg'}
]);
</code>


Where each object can have it's own options just like they're discribed in the doc. You can put different players like flv or img if you want.
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

magic_quotes
In reply to this post by Nijo
Just a hint, while using jquery with shadowbox, the "shadowbox.init()" must not be in the jquery(function) :

jQuery(function(){

...

});

Shadowbox.init();
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

Onsemeliot
Since days I keep ending up in this thread.

I'm trying to get well presented big pics of smaller preview images I animated with uslide.

I can't use the markup method because the links for the full sized images are script generated. The fitting big image from the Shadowbox gallery should be opened by the updated enlage-icon/link "+" below the preview images.

Please see my draft page for getting an impression of what I need.

This way of course Shadowbox can't know that the single image is one slide of a gallery. Therefore I think I need to use the advanced method for defining the Shadowbox galleries, but I can't get the scripting right so far.

How can I get from:

Shadowbox.setup("a.movie", {
   gallery: "My Movies",
   autoplayMovies: true
});

to a gallery with an array of image links and titles?

What markup do I need if I want to open a certain image from a predefined gallery? (Is it enough to have just the same "href"-attribute?)

Can anyone point me to a working example or just drop a a few lines of code in here?

And is ist possible to display an additional textfield with a description?
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

borconi
In reply to this post by Nijo
Hi.

I know this topic is almost one year old, but here it is how you can build a gallery in JS with multiple images for ShadowBox. I hope my example will be clear:

var img1 = {
    player:     'img',
    content:    'kep.php?id=1&mit=kep1',
    width: 1000,
    height: 800
};

var img2 = {
    player:     'img',
    content:    'kep.php?id=1&mit=kep2'
};

var img3 = {
    player:     'img',
    content:    'kep.php?id=1&mit=kep3'
};

ShadowBox.open([img1, img2, img3]);
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

HenzeBerkheij
or put it in an array instead of creating multiple variables...

Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

filmmaker
can you post what you mean?  what type of array?  how would you embed it?
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

borconi
Hi.

Look at: http://www.w3schools.com/JS/js_obj_array.asp for an explanation what an array is. Each element of your array should contain all the data needed by shadowbox.

Ex:

element[0]=  {
    player:     'img',
    content:    'kep.php?id=1&mit=kep1',
    width: 1000,
    height: 800
};

element[1] = {
    player:     'img',
    content:    'kep.php?id=1&mit=kep2'
};

and so on.
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

Onsemeliot
Thank you very much for your advise, borconi, but how can I provide Shadowbox with a gallery as array?

I want to start the gallery from a link to a specific image from the predefined gallery. (This link should add no object to my gallery, but should open one specific item in it.) After opening the (dynamicly chosen) single image I want to be able to flip through the gallery the usual way. (I need the normal Shadowbox behavior when it recognizes a gallery by the common "rel"-attribute with rectangular brackets: "shadowbox[galleryname]".)

In addition I need to set it up in a way that I can define more galleries on one page (each accessible through a normal html link).

I would guess I would need to use something close to this, but I wasn't able to write a code that works so far:

<html>
<head>
        ...
        // Links to the Shadowbox ressource files
        ...
        <script type="text/javascript">
                $().ready(function() {
                        Shadowbox.init({
                                skipSetup: true
                        });
                });
                Shadowbox.open([
                        {
                                pics[0] = {
                                        player: 'img',
                                        gallery: 'galleryname',
                                        content: 'pic1.jpg',
                                        title: 'image title'
                                };
                                pics[1] = {
                                        player: 'img',
                                        gallery: 'galleryname',
                                        content: 'pic2.jpg',
                                        title: 'image title'
                                };
                                ...
                        }
                ]);
        </script>
</head>

<body>
        <a href="#" rel="Shadowbox[galleryname]">textlink text</a>
</body>
</html>

What am I doing wrong?

I'm not even sure if I need to use "Shadowbox.open", "Shadowbox.setup" or "Shadowbox.buildObject" to define the gallery for later access.

This are my basic questions:
1) How can I predefine a Shadowbox gallery?
2) How can I call a specific image from it to be displayed in a normal flip through Shadowbox gallery?

Does anyone know a working example with such a functionality?
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

borconi
Hi.

I'm not sure if I understand correctly what you want to do exactly.

1st) You will have images with gallery, normal case
2nd) You want to have a text link to each of this gallery? So if you click on the text link it should open one gallery, or it should open only one image in the shadowbox from the gallery?

Emil

On Wed, Apr 20, 2011 at 7:01 PM, Onsemeliot [via Shadowbox.js] <[hidden email]> wrote:
Thank you very much for your advise, borconi, but how can I provide Shadowbox with a gallery as array?

I want to start the gallery from a link to a specific image from the predefined gallery. (This link should add no object to my gallery, but should open one specific item in it.) After opening the (dynamicly chosen) single image I want to be able to flip through the gallery the usual way. (I need the normal Shadowbox behavior when it recognizes a gallery by the common "rel"-attribute with rectangular brackets: "shadowbox[galleryname]".)

In addition I need to set it up in a way that I can define more galleries on one page (each accessible through a normal html link).

I would guess I would need to use something close to this, but I wasn't able to write a code that works so far:

<html>
<head>
        ...
        // Links to the Shadowbox ressource files
        ...
        <script type="text/javascript">
                $().ready(function() {
                        Shadowbox.init({
                                skipSetup: true
                        });
                });
                Shadowbox.open([
                        {
                                pics[0] = {
                                        player: 'img',
                                        gallery: 'galleryname',
                                        content: 'pic1.jpg',
                                        title: 'image title'
                                };
                                pics[1] = {
                                        player: 'img',
                                        gallery: 'galleryname',
                                        content: 'pic2.jpg',
                                        title: 'image title'
                                };
                                ...
                        }
                ]);
        </script>
</head>

<body>
        <a href="#" rel="Shadowbox[galleryname]">textlink text</a>
</body>
</html>

What am I doing wrong?

I'm not even sure if I need to use "Shadowbox.open", "Shadowbox.setup" or "Shadowbox.buildObject" to define the gallery for later access.

This are my basic questions:
1) How can I predefine a Shadowbox gallery?
2) How can I call a specific image from it to be displayed in a normal flip through Shadowbox gallery?

Does anyone know a working example with such a functionality?


To unsubscribe from Creating a gallery with just a link and a js array of image urls, click here.

Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

filmmaker
In reply to this post by borconi
of course i know what an array is,


you should be able to do all of this crap

                       {
                                pics[0] = {
                                        player: 'img',
                                        gallery: 'galleryname',
                                        content: 'pic1.jpg',
                                        title: 'image title'
                                };
                                pics[1] = {
                                        player: 'img',
                                        gallery: 'galleryname',
                                        content: 'pic2.jpg',
                                        title: 'image title'
                                };

with an array call, like with perl/php

i want to do something similar but i want an array like this to do dynamic loading, shadowbox tries to load the entire gallery at startup.

 a javascript version
var cnt=100;
for ( i=1; i <= cnt; i++) {  v4[i] = i;  }

for i (1..$cnt){

element[i]=  {
    player:     'img',
    content:    'kep.php?id=1&mit=kep.string(v4[i]),
    width: 1000,
    height: 800
};
}



Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

borconi
Hi.
As far as I know shadowbox is NOT loading the entire gallery at startup (at least not for pictures), each loading each element separately when you navigate to it. Try making a gallery with 4-5 huge pics and you will see it yourself.

E

On Thu, Apr 21, 2011 at 4:25 AM, filmmaker [via Shadowbox.js] <[hidden email]> wrote:
of course i know what an array is,

i want to do something similar but i want an array like this to do dynamic loading, shadowbox tries to load the entire gallery at startup.

var im_array=1:200;

for i (0..$#array){

element[$i]=  {
    player:     'img',
    content:    'kep.php?id=1&mit=kep$im_array($i)',
    width: 1000,
    height: 800
};


To unsubscribe from Creating a gallery with just a link and a js array of image urls, click here.

Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

HenzeBerkheij
In reply to this post by Nijo
you have to put the url to the images in a content variable gallery[0].content = 'here/the/url/to/your/image.jpg'
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

Onsemeliot
In reply to this post by borconi
Hi Emil,

I want to open a shadowbox gallery by clicking on one (Javascript generated) link. The first image to see should be the defined image from the link, but it should be displayed in shadowbox as part of the gallery on it's normal position in the gallery. In other words: The gallery shouldn't start with the first image, but with the image number "n" (defined by the link) displayed as image number "n" in the normal order of gallery images.

I want shadowbox to behave as if I would have placed the whole list of images as normal html markup on the page and as if I would have clicked on one of those links. I need to predefine the gallery for Shadowbox and access it later through using my dynamic link without the need to actually having all links written down as markup.

If this works with one gallery I want to do the same with more galleries on the same page...

Onsemeliot
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

borconi
This post was updated on .
Hi Onsemeliot.

I'm not sure what you meen with dynamic link generated with javascript, but
I think what you are look for is this:


<link rel="stylesheet" type="text/css" media="all"
href="./css/shadowbox.css" />
<script TYPE="text/javascript" SRC="./js/shadowbox.js"></script><script type="text/javascript"> Shadowbox.init(); </script>
Gallery 1:
Image 1
Image 2
Image 3
Image 4
<br><br>

Gallery 2:
Image 5
Image 6
Image 7
Image 8

<br><br>
<a href=# id=shadowbax_caller onclick="fakeClick(event, document.getElementById('gal1_img3'))">Link from outside of gallery with no
image
//change gal1_img3 to the image you intead to display.

<script> function fakeClick(event, anchorObj) { if (anchorObj.click) { anchorObj.click() } else if(document.createEvent) { if(event.target !== anchorObj) { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); var allowDefault = anchorObj.dispatchEvent(evt); } } } </script>


On Thu, Apr 21, 2011 at 3:06 PM, Onsemeliot [via Shadowbox.js] <
ml-node+6293916-1512307663-327772@n2.nabble.com> wrote:

> Hi Emil,
>
> I want to open a shadowbox gallery by clicking on one (Javascript
> generated) link. The first image to see should be the defined image from the
> link, but it should be displayed in shadowbox as part of the gallery on it's
> normal position in the gallery. In other words: The gallery shouldn't start
> with the first image, but with the image number "n" (defined by the link)
> displayed as image number "n" in the normal order of gallery images.
>
> I want shadowbox to behave as if I would have placed the whole list of
> images as normal html markup on the page and as if I would have clicked on
> one of those links. I need to predefine the gallery for Shadowbox and access
> it later through using my dynamic link without the need to actually having
> all links written down as markup.
>
> If this works with one gallery I want to do the same with more galleries on
> the same page...
>
> Onsemeliot
>
> ------------------------------
>  If you reply to this email, your message will be added to the discussion
> below:
>
> http://shadowbox-js.1309102.n2.nabble.com/Creating-a-gallery-with-just-a-link-and-a-js-array-of-image-urls-tp5067069p6293916.html
>  To unsubscribe from Creating a gallery with just a link and a js array of
> image urls, click here<http://shadowbox-js.1309102.n2.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=5067069&code=Ym9yY29uaWVAZ21haWwuY29tfDUwNjcwNjl8MzI2Njk0NDgy>.
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Creating a gallery with just a link and a js array of image urls

filmmaker
why don't you use 2d arrays?

for i=1..k
  gallery[i]
     for m=1..p
           rel="shadowbox[Gal$i]" href="./images/img$k.png" id=gal$i_img$k>Image $k
    next m
next i
12