# Gallery with some images

**URL:** <https://discourse.processing.org/t/gallery-with-some-images/8295>\
**Category:** Coding Questions\
**Created:** [February 11, 2019, 7:50pm UTC](https://discourse.processing.org/t/gallery-with-some-images/8295 "2019-02-11T19:50:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![akjunior](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@akjunior](https://discourse.processing.org/u/akjunior)\
**Post date:** [February 11, 2019, 7:50pm UTC](https://discourse.processing.org/t/gallery-with-some-images/8295/1 "2019-02-11T19:50:50Z")

</div>

ir, can i ask u a question? I wrote this code in processing, where you have something like gallery with some images. And if you click on one picture its enlarges. But right now, where ever I click, it is same picture which enlarge and fit the “screen” help?

This is my original code

```auto
boolean makeLarge;
PImage bat;
PImage Mask;
PImage jpg_bat;
PImage jpg_mask;

void setup()
{
 size(400, 600);
 smooth();
 fill(255,255,255);
 textFont(createFont("sansSerif",32));
 textAlign(CENTER);

 bat = loadImage("imvbbbage.jpg");
 Mask = loadImage("iVEEmage.jpg");
 jpg_bat = loadImage("Serena+Williams.jpg");
 jpg_mask = loadImage("image.jpg");
}

void draw() {
 background(0);
 text("Click On An Image!", width/2, height/2);
 image(bat, 10,419, 70, 70);
 image(jpg_bat, 380,380, 140, 140);
 image(jpg_mask,415,10, 70,70);
 if (makeLarge)
 {
   image(Mask, 10, 10, 210, 210);
 }
 else
 {
   image(Mask, 10, 10, 70, 70);
 }
}

void mousePressed()
{
 makeLarge = true;
}

void mouseReleased()
{
  makeLarge = false;
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 12, 2019, 2:55am UTC](https://discourse.processing.org/t/gallery-with-some-images/8295/2 "2019-02-12T02:55:46Z")

</div>

i not have your picture files, so i replace each image(X,a,b,c,d); with rect(a,b,c,d)

each one has to be treated like a button with click  
( means you need to find if mouse is over it at click)

what you do on click is a other question  
( you set a boolean variable, i set a float,  
again, you need one for each picture / rectangle )  
example:

```auto
// https://discourse.processing.org/t/gallery-with-some-images/8295
// each image ( or rectangle ) is a button, what should be zoomed on click

//PImage bat,Mask,jpg_bat,jpg_mask;
float zoom1=1, zoom2=1, zoom3=1, zoom4=1;

void setup() {
  size(500, 500);
  smooth();
  fill(255, 255, 255);
  textFont(createFont("sansSerif", 32));
  textAlign(CENTER);
  // bat = loadImage("imvbbbage.jpg");
  // Mask = loadImage("iVEEmage.jpg");
  // jpg_bat = loadImage("Serena+Williams.jpg");
  // jpg_mask = loadImage("image.jpg");
}

void draw() {
  background(200, 200, 0);
  text("Click On An Image!", width/2, height/2);
  stroke(0, 0, 200);
  // image(bat, 10, 419, 70, 70);
  rect(10, 419, 70*zoom1, 70*zoom1);
  // image(jpg_bat, 380, 380, 140, 140); // that was too big
  rect(380, 380, 30*zoom2, 30*zoom2);
  // image(jpg_mask, 415, 10, 70, 70);
  rect(415, 10, 70*zoom3, 70*zoom3);
  //image(Mask, 10, 10, 70, 70);
  rect(10, 10, 70*zoom4, 70*zoom4);
}
// _________________________________________________________________ mouse click left
void mousePressed() {
  if (mouseButton == LEFT) {
    if ( overRect(10, 419, 70, 70) ) zoom1=1.2;
    if ( overRect(380, 380, 30, 30) ) zoom2=1.2;
    if ( overRect(415, 10, 70, 70) ) zoom3=1.2;
    if ( overRect(10, 10, 70, 70) ) zoom4=1.2;
  }
}

// _________________________________________________________________ mouse position over rectangle yes/no
boolean overRect(int rx, int ry, int rwidth, int rheight) {
  if (mouseX >= rx && mouseX <= rx+rwidth && 
    mouseY >= ry && mouseY <= ry+rheight) return true;
  else return false;
}

void mouseReleased() {
  zoom1=zoom2=zoom3=zoom4=1;
}

```

---

<div class="post-metadata">

**Author:** ![akjunior](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@akjunior](https://discourse.processing.org/u/akjunior)\
**Post date:** [February 12, 2019, 11:54am UTC](https://discourse.processing.org/t/gallery-with-some-images/8295/3 "2019-02-12T11:54:54Z")

</div>

Thanks. Let’s say I have size(400,600) and I click and image, and fit the size. Of you get me lol  
What do I need to change?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 12, 2019, 12:23pm UTC](https://discourse.processing.org/t/gallery-with-some-images/8295/4 "2019-02-12T12:23:21Z")

</div>

> [@akjunior](#):
>
> What do I need to change?

possibly a other way might be better:  
problem is that if the ratio width height canvas and all pictures is not same  
it might look ugly,

```auto
void setup() {
  size(500, 500);
  smooth();
  fill(255, 255, 255);
  textFont(createFont("sansSerif", 32));
  textAlign(CENTER);
  // bat = loadImage("imvbbbage.jpg");
  // Mask = loadImage("iVEEmage.jpg");
  // jpg_bat = loadImage("Serena+Williams.jpg");
  // jpg_mask = loadImage("image.jpg");
}

void draw() {
  background(200, 200, 0);
  text("Click On An Image!", width/2, height/2);
  stroke(0, 0, 200);
  // image(bat, 10, 419, 70, 70);
  rect(10, 419, 70, 70);
  // image(jpg_bat, 380, 380, 140, 140); // that was too big
  rect(380, 380, 30, 30);
  // image(jpg_mask, 415, 10, 70, 70);
  rect(415, 10, 70, 70);
  //image(Mask, 10, 10, 70, 70);
  rect(10, 10, 70, 70);
  // if zoom by mouse pressed ( hold ) and mouse over original pic just paint it over.
  if ( mousePressed && overRect(10, 419, 70, 70) ) rect(0,0, width,height);
  if ( mousePressed && overRect(380, 380, 30, 30)) rect(0,0, width,height);
  if ( mousePressed && overRect(415, 10, 70, 70) ) rect(0,0, width,height);
  if ( mousePressed && overRect(10, 10, 120, 60) ) rect(0,0, width,height);
  
}

// _________________________________________________________________ mouse position over rectangle yes/no
boolean overRect(int rx, int ry, int rwidth, int rheight) {
  if (mouseX >= rx && mouseX <= rx+rwidth && 
    mouseY >= ry && mouseY <= ry+rheight) return true;
  else return false;
}

```

to verify the aspect ration might use something like

```auto
void calc_zoom(int i ) { // calc max possible zoom without change of the ratio
  float zoomx,zoomy;
  if ( i == 1 ) { zoomx = width/70; zoomy = height/70; zoom1 = (int)min(zoomx,zoomy);}
  if ( i == 2 ) { zoomx = width/30; zoomy = height/30; zoom2 = (int)min(zoomx,zoomy);}
  if ( i == 3 ) { zoomx = width/70; zoomy = height/70; zoom3 = (int)min(zoomx,zoomy);}
  if ( i == 4 ) { zoomx = width/120; zoomy = height/60; zoom4 = (int)min(zoomx,zoomy);}
}

```

---

<div class="post-metadata">

**Author:** ![akjunior](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@akjunior](https://discourse.processing.org/u/akjunior)\
**Post date:** [February 12, 2019, 5:55pm UTC](https://discourse.processing.org/t/gallery-with-some-images/8295/5 "2019-02-12T17:55:02Z")

</div>

Thanks you so much. I’m having fun with this code right now lol. I’ll hit you up later. 😊