when you click the image a window opens up with enlarged image and text including links

1rulesupersedes · June 2017

How do you attach a larger image to the smaller one. So when someone wants to get a better view and info the can by clicking the small image.

I made some changes to code. I can now make the small images large by clicking. Stills lots of bugs.

index.html

    <html>
    <head>

      <meta charset="UTF-8">
      <script language="javascript" type="text/javascript" src="libraries/p5.js"></script> 
      <script language="javascript" src="libraries/p5.dom.js"></script>
      <script language="javascript" src="libraries/p5.sound.js"></script>
      <script language="javascript" src="images.js"></script>
      <script language="javascript" src="images_2.js"></script>
      <script language="javascript" src="proccessing.min.js"></script> 
    </head> 
      <!-- this line removes any default padding and style. you might only need one of these values set. -->
      <style> 
      </style>

    </head>

    <body>

    </body>
    </html>

images.js

    var bubbles = [];
    var flowers = [];

    var click = "http://1rulesupersedes.com";

    function preload(){

        for(var i = 0; i< 6; i++){
            flowers[i] = loadImage("fet_pictures/" + i + ".jpg");
        }

    }

    function windowResized(){
        resizeCanvas(windowWidth, windowHeight);
    }

    function setup(){
        createCanvas(windowWidth, windowHeight);
    }

    function keyPressed(){
        var r = floor(random(0, flowers.length));
        var b = new Bubble(random(0, width), random(0, height), flowers[r]);
        bubbles.push(b);
    }

    function mousePressed(){
        for(var i = 0; i < bubbles.length; i++){
            bubbles[i].clicked();
        }
    }


    function draw(){
        background(0);
        for(var i = bubbles.length -1; i >= 0; i--){
            bubbles[i].update();
            bubbles[i].display();
            bubbles[i].clicked();
            if(bubbles[i].checkIfExpired()==false){
               bubbles.splice(i,1);
            }
        }

    }

images_2.js

*note - I added "this.z.style("z-index", "+1");" to bring the larger image up front - its throwing this message and I can't get createP to work.

Uncaught TypeError: Cannot read property 'style' of undefined at Bubble.clicked (images_2.js:16) at draw (images.js:40) at p5.redraw (p5.js:14113) at p5. (p5.js:9147)

    function Bubble(x, y, img){
    this.x = x;
    this.y = y;
    this.img = img;
    this.z;
    this.para;
    //this.lifespan = 255;
    this.lifespan = millis()+15000;

    this.clicked = function(){
        var d = dist(mouseX, mouseY, this.x, this.y);
        if(d < 50){
        imageMode(CENTER);
        this.z = image(this.img, this.x, this.y);
        this.img.resize(400, 0);
        this.z.style("z-index", "+1");
        this.para = createP("test");
        this.para.style("color", "red");
        }
    }


    this.display = function(){
        imageMode(CENTER);
        image(this.img, this.x, this.y);
        this.img.resize(100, 0);
        //ellipse(this.x, this.y, 48, 48);
    }

    this.update = function(){
        this.x = this.x + random(-1, 1);
        this.y = this.y + random(-1, 1);
    }

    this.checkIfExpired = function() {
      return (millis()<this.lifespan);
    }
    }

1rulesupersedes · June 2017

Made some changes to code.

Howdy, Stranger!

Categories

In this Discussion

when you click the image a window opens up with enlarged image and text including links

Answers