I have a pro gallery that is connected to a collection. I wanted to find a way to set the description text for each image in the gallery to be the same, no matter the image, without going into the collection, and manually typing the same description in each image!
A gallery works similar to a repeater.
It holds data as Objects inside an ARRAY…
To get data out of a GALLARY…
let items = $w("#myGallery").items;
let type = items[0].type; // "image"
let src = items[0].src; // "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120"
let description = items[0].description; // "Description"
let title = items[0].title; // "Title"
let link = items[0].link; // "http"//wix.com"
…to change or add description DESCRIPTION to a specific ITEM[0]… ins this case first item…
items[0].description = "xxxxxxx";
…and to add data back to GALLARY…
let items = $w("#myGallery").items;
items.push( {
"src": "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120",
"description": "Description",
"title": "Title"
} );
$w("#myGallery").items = items;
These are all values you can change…
so in the code you’ve given it seems like there isn’t a way to make every image’s description the same, without listing every image’s Image source URL?
as a side note, the images are already in my gallery, what i would like to do is overwrite the source they get their description from. I dont need to add a whole image, title, description etc, i just want to change what description shows up.
Of course you can.
What about a loop trough all the items?
FOR-LOOP ?
EACH-LOOP ?
Another LOOP ?
Read this …
okay now i’m a little scared haha, can you explain how i would go a bout doing that, code-wise?
https://www.w3schools.com/js/js_loop_for.asp
Definition of the for-loop… → will count till 5
for (let i = 0; i < 5; i++) {
}
- First you will follow the description and generate a new variable to store your GALARY-DATA in this variable…
let myVariable = $w("#myGallery").items;
Now all GALARY-ITEMS are inside of the VARIABLE.
Now you will have to loop trough - - > VARIABLE (loop trough all items inside), for CHANGING - - → DESCRIPTION…
let myVariable = $w("#myGallery").items;
for (let i = 0; i < myVariable.length; i++) {
myVariable[i].description = "xxxxxx"
}
Okay, so this is as far as i’ve gotten. trying to piece the different parts of this chat into one thing:
let myVariable = $w("#gallery1").items;
for (var i = 0; < myVariable.length; i++);
// is myVariable.length supposed to make it so that the highest value is = to the number of items in the gallery? if not, what is the code for that?
let items = $w("#gallery1").items;
let type = items[i].type;
let src = items[i].src;
let description = items[i].description;
let title = items[i].title;
let link = items[i].link;
items[i].description = "xxxxxxx"
items.push({
"description" : "Description"
}
$w.onReady(function () {
$w("#gallery1").items = items;
});
Let me know where you think i’m messing it up, and if I’m using myVariable.length properly
$w.onReady(function(){
let myVariable = $w("#gallery1").items;
for(vari=0;<myVariable.length;i++);
let item=myVariable[i];
let type=item.type;
let src=item.src;
let description=item.description;
let title=item.title;
let link=item.link;
'--------------------------------
console.log("ITEM: ", item);
console.log("TYPE: ", type);
console.log("SRC: ", src);
console.log("DESCRIPTION-before change: ", description);
console.log("TITLE: ", title);
console.log("LINK: "; link);
item.description="xxxxxxx";
console.log("DESCRIPTION-after change: ", description);
$w("#gallery1").items=items;
}
});
Take a look onto CONSOLE-RESULTS.
$w.onReady(function(){
let variableNumber = $w("#gallery1").items;
for(var i = 0; i < variableNumber.length; i++);
// this was just missing the i I think, but i fixed it!
let item=variableNumber[i];
let type=item.type;
let src=item.src;
let description=item.description;
let title=item.title;
let link=item.link;
//--------------------------------
console.log("ITEM: ", item);
console.log("TYPE: ", type);
console.log("SRC: ", src);
console.log("DESCRIPTION-before change: ", description);
console.log("TITLE: ", title);
console.log("LINK: ", link);
item.description="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log("DESCRIPTION-after change: ", description);
$w("#gallery1").items=items;
}
);
That is the error I’m getting ^
Console:
console.error(‘public/pages/cv400.js: Unexpected token (4:38)\n\n 2 | $w.onReady(function(){\n 3 | \tlet variableNumber = $w(“#gallery1”).items; \n> 4 | \tfor(var i = 0; <variableNumber.length; i++);\n | \t ^\n 5 | \t\t\tlet item=variableNumber[i];\n 6 | \t\t\tlet type=item.type;\n 7 | \t\t\tlet src=item.src;’);
Ok, for your better understanding, let’s do an example…
But first make sure to generate a NEW-EMPTY-PAGE and add a new gallery onto this page.
Pay attention that you do NOT USE → Pro-Gallaries, because these ones seems not to support CODING. Take an ordinary gallery and place it on your page.
Now the coding…
We will start with …
$w.onReady(()=>{..................});
Followed by the detection of all items inside of the gallary and save them withing a → VARIABLE <—
let myVariable = $w('#gallery1').items;
And we also want to see what already happened in this short part of our created code, so let’s use the CONSOLE, to log all the results…
console.log("RESULTS: ", myVariable);
The name → “myVariable” is surely not the best choice, since we know that “myVariable” holds data from gallery, maybe we should rename our VARIABLE for example to → “ITEMS”
So let’s put all code-parts together and see what we get…
$w.onReady(()=>{
let items = $w('#gallery1').items;
console.log("ITEMS: ", items);
});
Taking a look onto → CONSOLE you will get something like…
You already can see which values are supported by the ordinary gallery.
If you would take a PRO-GALLERY, you would get nothing as result, since these galleries do not support this functionality…
Now you want to do what?
You want to change → “DESCRIPTION” ???
So let’s do it…
We have all items inside of our VARIABLE → “items”, now let’s change the description of the first item…
let myNewDescription = "xxxxx";
items[0].description = myNewDescription;
Let’s take a look onto the results…
console.log("RESULT-Description: ", myNewDescription);
What do we get after loading the items back to the gallary and console-log the results ?
$w.onReady(function(){
let items = $w("#gallery1").items;
console.log(items);
let myNewDescription = "xxxxx";
console.log("RESULT-Description: ", myNewDescription);
items[0].description = myNewDescription;
$w('#gallery1').items = items;
console.log("RESULTS: ", $w('#gallery1').items)
});
Now you should see 2-objects, the first one will include the original DESCRIPTION, the second one should hold the new changed description inside…
As you can see, the description for first item has been changed!
Now it’s your turn!!!
Study all the given important informations, and generate your code, which will be able to change the description of all items in milliseconds!
Good luck and have fun!
It mostly worked, but I have 2 questions!
I see that in the console WHEN my code says:
let myVariable = $w('#gallery1').items
$w.onReady(function(){
let items = $w("#gallery1").items;
console.log("ITEMS: ", items);
let variableNumber = $w("#gallery1").items;
for(var i = 0; i < 12; i++);
let myNewDescription = "XXXXXX";
console.log("RESULT-Description: ", myNewDescription);
items[0].description = myNewDescription;
$w("#gallery1").items = items;
console.log("RESULTS: ", $w("#gallery1").items)
});
but NOT when it says:
let myVariable = $w('#gallery1').items
$w.onReady(function(){
let items = $w("#gallery1").items;
console.log("ITEMS: ", items);
let variableNumber = $w("#gallery1").items;
for(var i = 0; i < variableNumber.length; i++);
let myNewDescription = "XXXXXX";
console.log("RESULT-Description: ", myNewDescription);
items[i].description = myNewDescription;
$w("#gallery1").items = items;
console.log("RESULTS: ", $w("#gallery1").items)
});
but also, and more importantly, is there a way to have it also appear on the front end of the website when i look at the gallery?
Pay attention how to create a FOR-LOOP the right way…
for (let index = 0; index < array.length; index++) {
const element = array[index];
}
let myVariable = $w('#gallery1').items
// do i need this?
$w.onReady(function(){
let items = $w("#gallery1").items;
console.log("ITEMS: ", items);
let array = $w("#gallery1").items;
// I should need this right? Array vs array? it seems like Array is a part of the API and array is something we're naming, so I just want to make sure i should be using the lower case array
for (let index = 0; index < array.length ; index++) {
const element = array[index];
}
let myNewDescription = "XXXXXX";
console.log("RESULT-Description: ", myNewDescription);
items[index].description = myNewDescription;
// when the for-loop says " for (let rather than for (var, it doesn't like having index in that spot above
$w("#gallery1").items = items;
console.log("RESULTS: ", $w("#gallery1").items)
});
with the code above, i get these results so far:
but none of the changed descriptions.
With the FOLLOWING code:
let myVariable = $w('#gallery1').items
$w.onReady(function(){
let items = $w("#gallery1").items;
console.log("ITEMS: ", items);
let Array = $w("#gallery1").items;
for (let index = 0; index < Array.length ; index++) {
const element = Array[index];
}
let myNewDescription = "XXXXXX";
console.log("RESULT-Description: ", myNewDescription);
items[0].description = myNewDescription;
items[1].description = myNewDescription;
items[2].description = myNewDescription;
items[4].description = myNewDescription;
$w("#gallery1").items = items;
console.log("RESULTS: ", $w("#gallery1").items)
});
(obviously i need to get the array.index to work, but i just wanted to do some testing while i was working on this, so this isn’t the ideal code, but we’re still working on it!)
I see this:
BUT i don’t see it reflected on the front end!
the description text in the first picture is from the back end, picture 2 has no description text on the back end, and NEITHER of them show the New Description on the front end!
$w.onReady(function(){
//------------------------------------
let items = $w("#gallery1").items;
console.log("ITEMS: ", items);
//------------------------------------
for (let i = 0; i < items.length ; i++) {
const element = items[i];
console.log("Element: ", element);
element.description = "xxxxx";
}
//------------------------------------
console.log(items[0].description);
console.log(items[1].description);
console.log(items[2].description);
console.log(items[3].description);
//------------------------------------
$w("#gallery1").items = items;
console.log("RESULTS: ", $w("#gallery1").items);
});
that works for showing me results in the console. For some reason, even though my gallery has 2 items in it, i get 12 results, any thoughts?
I gave you enough informations, to solve your problem.
Now it’s on you.