javascript for several Image Galleries on one Page?

125 Posts

ad2003 Reply #1, 13 years, 3 months ago

Hi dear forum,

how could I handle a javascript code for several slidehows?

My code looks like this:

 <script type="text/javascript">
 $(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
	});
});
</script>

Which works well on one page. But I'd like to have also the possibility to have several Galleries listed on one page. I am using migx to create the listed items.

this is how it should work:
The visitor can chose an image

<img src="[[+image]]" />

which will be loaded to a div with "id=image" inside a listed element which is generated via migx.

But now the problem is, that all the items use the id="image" - my idea was something like this:

 <script type="text/javascript">
 $(function() {
$(".image-[[migxID]]").click(function() {
var image = $(this).attr("rel");
$('#image-[[migxID]]').hide();
$('#image-[[migxID]]').fadeIn('slow');
$('#image-[[migxID]]').html('<img src="' + image + '"/>');
return false;
	});
});
</script>

But how could I get a chunk to js at all?

Thank you!

AD

☆ A M B ☆
894 Posts

benmarte Reply #2, 13 years, 3 months ago

Is this something custom or are you trying to modify an existing plugin? Do you have a working sample we can take a look at?

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

125 Posts

ad2003 Reply #3, 13 years, 3 months ago

Hi benmarte,

thanks for the reply. No, it's not a plugin. I am using bootstrap 2.3 (latest). I just added the javascript to test - and it works with one Migx item. I have just running it on my local machine. But I can describe it:

A Gallery like page with several big div-boxes, with different tabs inside like "description", "data", "images".
In the top area of each big box is the first image of the gallery of "images" of each migx item shown inside a

<div id="image">

.

When you click the "tab" images, you see 4 little thumbnails. You click a thumbnail, it loads the image you clicked into the <div id="image">. That works great for one item.

But when you get to another "big box" of a different migx Item on the same page, and click one of the images inside the gallery it loads the image - and that is the problem - into

<div id="image">

of the first box. But it should load it of course into the box of each migx item.

Well - it's clear why this happens - because of the javascript. Because it's

$('#image').html('<img src="' + image + '"/>');

it loads it into the first <div id="image"> on the page... So the JS should also be different for any box. Like

$('#image-BOX2').html('<img src="' + image + '"/>');

- but how could I get this work dynamically?

thank you!
AD

5,888 Posts

Bruno17 Reply #4, 13 years, 3 months ago

are this MIGX - TVs with the same name from different resources?

do you call them by getResources, or how do you get them into the page currently?

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

125 Posts

ad2003 Reply #5, 13 years, 3 months ago

Hi Bruno,

I am getting it with this call

[[!switchMigxDetailView? &detailChunk=`detailChunk_test1` &listingChunk=`listingchunk_test1`]]

At the moment I am calling different migx Items - but in that case, all come from "test1TV".

while this is the listingchunk_test1:

[[!getImageList? 
    &tvname=`test1TV`
    &tpl=`code_chunk_test1`  ]]

while the code chunk consitst of all the box contents, like tabs, images, description - all called with [[+description]], [[+image]] - this works so far - only the image is appearing in the wrong "<div id="image">".

thank you!

AD

5,888 Posts

Bruno17 Reply #6, 13 years, 3 months ago

ok with this call you get one gallery.
But didn't you talk about multiple galleries?
I think I didn't get it, yet.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

125 Posts

ad2003 Reply #7, 13 years, 3 months ago

ok, sorry, when I am to unclear here

. I try to express it a bit more detailed:

I am getting the images from the migx with [[+image1]], [[+image2]], [[+image3]] - it's not a Gallery created by a plugin. It just shows the images of each migx item in a thumbnail version (phpthumbof) list. When you click on one thumbnail, a bigger version of the image shows up in the <div id="image"> area of (let's say) migx_item_1 - thats done with JavaScript.

Because it is javascript, at the moment it only works for the first "box" with migx_item_1 content.

this is the JS code:

<script type="text/javascript">
 $(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
    });
});
</script>

Example:
When I click the thumbnails in migx_item_2 Box, the image is shown in the migx_item_1 <div id="image"> box - and not inside the migx_item_2 box. That's beacause it has the same <div id="image"> name....

So the question is, how could I tell dynamically Java Script and the Code inside every migx_item, that it should load images only in each <div id="image"> - my idea was something like <div id="image-[[MigxID]]"> - but then I also had to change the JavaScript code to update .. or am I wrong.

Thank you!

AD

5,888 Posts

Bruno17 Reply #8, 13 years, 3 months ago

I'm sure you can generate the javascript-code together with the images, but I still haven't a picture how you are generating the output for your image-boxes.
your getImageList-snippet-tag together with the tpl-chunk-code and everything involved with the output would help.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

125 Posts

ad2003 Reply #9, 13 years, 3 months ago

ok! here is the code_chunk_test1:

<li class="span4 thumbnail ">
<h4>[[+title]]</h4>
<!-- <a href="[[~10? &migx_id=`[[+MIGX_id]]`]]" class="">
<img src="[[+image:phpthumbof=`h=250zc=1`]]" /></a> -->
<div id="image"><img src="[[+image:phpthumbof=`h=250zc=1`]]"></div>
<div class="bs-docs-example">
            <ul class="nav nav-tabs" id="myTab">
              <li class="active"><a data-toggle="tab" href="#description-[[+MIGX_id]]">Description</a></li>
              <li><a data-toggle="tab" href="#price-[[+MIGX_id]]">Price</a></li>
<li><a data-toggle="tab" href="#highlights-[[+MIGX_id]]">Highlights</a></li>
<li><a data-toggle="tab" href="#images-[[+MIGX_id]]">Images</a></li>    
            </ul>
            <div class="tab-content" id="myTabContent">
              <div id="description-[[+MIGX_id]]" class="tab-pane fade in active">
                [[+]] 
              </div>
              <div id="price-[[+MIGX_id]]" class="tab-pane fade">
                <p>[[+price]]</p>
              </div>
 <div id="highlights-[[+MIGX_id]]" class="tab-pane fade">

<table class="table table-bordered">
             
              <tbody>
                <tr>
                   <td>Width</td>
                [[+width:notempty=`<td>[[+width]]m²</td>`]] 
 </tr>
 <tr>
  <td>EBK</td>
           <td><i class="icon-ok"></i></td> 
</tr>

 <tr>
  <td>Balcony</td>
           <td><i class="icon-ok"></i></td> 
</tr>
 <tr>
  <td>Garden</td>
           <td><i class="icon-ok"></i></td> 
</tr>

 <tr>
  <td>Garage</td>
           <td><i class="icon-ok"></i></td> 
</tr>
               
              </tbody>
            </table>


              </div>

 <div id="images-[[+MIGX_id]]" class="tab-pane fade">

<ul class="thumbnails">
     
<li class="">
                <a href="#" rel="[[+image:phpthumbof=`h=250zc=1`]]" class="image thumbnail"><img border="0" src="[[+image:phpthumbof=`h=100zc=1`]]" class="thumb"></a>
              </li>
            <li>
                <a href="#" rel="[[+image2:phpthumbof=`h=250zc=1`]]" class="image thumbnail"><img border="0" src="[[+image2:phpthumbof=`h=100zc=1`]]" class="thumb"></a>
              </li>
             <li>
                <a href="#" rel="[[+image3:phpthumbof=`h=250zc=1`]]" class="image thumbnail"><img border="0" src="[[+image3:phpthumbof=`h=100zc=1`]]" class="thumb"></a>
              </li>
              <li>
                <a href="#" rel="[[+image4:phpthumbof=`h=250zc=1`]]" class="image thumbnail"><img border="0" src="[[+image4:phpthumbof=`h=100zc=1`]]" class="thumb"></a>
              </li>
            </ul>
              </div>      
              

<hr class="soften"><a href="[[~10? &migx_id=`[[+MIGX_id]]`]]">read more</a>

            </div>
          </div>
              </li>

5,888 Posts

Bruno17 Reply #10, 13 years, 3 months ago

you can try this. create a chunk 'picloader' with:

<script type="text/javascript">
 $(function() {
$(".image-[[+MIGX_id]]").click(function() {
var image = $(this).attr("rel");
$('#image-[[+MIGX_id]]').hide();
$('#image-[[+MIGX_id]]').fadeIn('slow');
$('#image-[[+MIGX_id]]').html('<img src="' + image + '"/>');
return false;
    });
});
</script>

and try this options in your getImageList-tpl:

[[$picloader:jsToHead]]

[[$picloader:jsToBottom]]

If the above doesn't work try them:

[[$picloader:jsToHead? &MIGX_id=`[[+MIGX_id]]`]]

[[$picloader:jsToBottom? &MIGX_id=`[[+MIGX_id]]`]]

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!