EZoApp 範例 - 小圖變大圖

圖片網址:

my logo

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQq4SzPrb-cj7q6rhGa1hlwz9v6vSNAFMIgBaRfkowmmiPa7-6AUb4pIIHDwhEOhidGy-grPbdt1BcnJzLPbZgYg3QFZsVvFt2uTa4mleEgaP1B-2EU4VTEepJucvxHRJYwY4dJpmNwOY/s404-Ic42/mylogo.gif

烏來

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChNGv7t72e3R_tLWBv8bcsiTDQvgnjmqtEmDASATYObzKpxbeQL1kdkdYqP0ql5GwW0vP1YalO-p0HjAU3wZhyniSGUDOhwtfB5cPLI8uS1GSPx1wFJP1AqnqYXTOZ3lBGzM9JkNqu58/s600-Ic42/wulai.jpg

十分瀑布

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZArDw4E9OeF_RpEVfwRWGjdMDDrwRY8iYh1WbVurwUVm3GXTPyUUJGNzsRWBfoRUTYkxySrAFRiRc21rFWyCkBNeLD8eeOK-NKJNoC1Z7M0IC1HrALpMvO9e2CkCE6kk-_7robhsGrRg/s500-Ic42/tenwaterfall.jpg

太子賓館

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiAansVu9T61acD7L8i7tH6Hop56zypBPYkhtbqSBkJ_yuY79FcfrcqHwMgWx_BLPYJ_XjSrd4laUxVYnfA0Lv6r4K_sSt9udOz8M-4vwrvOKlJ3L0oQeuMxOOEXml6P1TByaGcwyqXY/s400-Ic42/tai.jpg

方法:

開 一個新的page

插入Header元件

Header元件

Text: 小圖變大圖

插入 Footer元件，裏面再插入Button 元件

Button 元件

id:homebutton

Icon :home

IconPOS :notext

插入Gk-text元件

Text: 這是我拍的相片，謝謝觀賞，歡迎引用。

Style: font-size:12pt

插入 Grid元件，裏面放  image元件，讓 Grid內 圖的大小不一樣也不會閃動

Columns :1

Style : height:300px

插入Image元件

id : photoshow

style : width:100%;

src: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQq4SzPrb-cj7q6rhGa1hlwz9v6vSNAFMIgBaRfkowmmiPa7-6AUb4pIIHDwhEOhidGy-grPbdt1BcnJzLPbZgYg3QFZsVvFt2uTa4mleEgaP1B-2EU4VTEepJucvxHRJYwY4dJpmNwOY/s404-Ic42/mylogo.gif

插入grid元件

Columns :3

Style : height:95px

在此 grid元件內放 3個 icon 元件

第1個 icon

id: photo1

text:烏來

background-image: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChNGv7t72e3R_tLWBv8bcsiTDQvgnjmqtEmDASATYObzKpxbeQL1kdkdYqP0ql5GwW0vP1YalO-p0HjAU3wZhyniSGUDOhwtfB5cPLI8uS1GSPx1wFJP1AqnqYXTOZ3lBGzM9JkNqu58/s600-Ic42/wulai.jpg

第2個 icon

id: photo2

text:十分瀑布

background-image: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZArDw4E9OeF_RpEVfwRWGjdMDDrwRY8iYh1WbVurwUVm3GXTPyUUJGNzsRWBfoRUTYkxySrAFRiRc21rFWyCkBNeLD8eeOK-NKJNoC1Z7M0IC1HrALpMvO9e2CkCE6kk-_7robhsGrRg/s500-Ic42/tenwaterfall.jpg

第3個 icon

id: photo3

text:太子賓館

background-image: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiAansVu9T61acD7L8i7tH6Hop56zypBPYkhtbqSBkJ_yuY79FcfrcqHwMgWx_BLPYJ_XjSrd4laUxVYnfA0Lv6r4K_sSt9udOz8M-4vwrvOKlJ3L0oQeuMxOOEXml6P1TByaGcwyqXY/s400-Ic42/tai.jpg

切換到 js 標籤

先打  btn , 再 同時按 alt + /

把 alert那行刪除

輸入以下程式

$('#photo1').on('click', function (e) {

    $('#photoshow').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChNGv7t72e3R_tLWBv8bcsiTDQvgnjmqtEmDASATYObzKpxbeQL1kdkdYqP0ql5GwW0vP1YalO-p0HjAU3wZhyniSGUDOhwtfB5cPLI8uS1GSPx1wFJP1AqnqYXTOZ3lBGzM9JkNqu58/s600-Ic42/wulai.jpg');

  })

 

    $('#photo2').on('click', function (e) {

    $('#photoshow').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZArDw4E9OeF_RpEVfwRWGjdMDDrwRY8iYh1WbVurwUVm3GXTPyUUJGNzsRWBfoRUTYkxySrAFRiRc21rFWyCkBNeLD8eeOK-NKJNoC1Z7M0IC1HrALpMvO9e2CkCE6kk-_7robhsGrRg/s500-Ic42/tenwaterfall.jpg');

    })

   

    $('#photo3').on('click', function (e) {

    $('#photoshow').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiAansVu9T61acD7L8i7tH6Hop56zypBPYkhtbqSBkJ_yuY79FcfrcqHwMgWx_BLPYJ_XjSrd4laUxVYnfA0Lv6r4K_sSt9udOz8M-4vwrvOKlJ3L0oQeuMxOOEXml6P1TByaGcwyqXY/s400-Ic42/tai.jpg');

     })

   

    $('#homebutton').on('click', function (e) {

    $('#photoshow').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQq4SzPrb-cj7q6rhGa1hlwz9v6vSNAFMIgBaRfkowmmiPa7-6AUb4pIIHDwhEOhidGy-grPbdt1BcnJzLPbZgYg3QFZsVvFt2uTa4mleEgaP1B-2EU4VTEepJucvxHRJYwY4dJpmNwOY/s404-Ic42/mylogo.gif');

          

  })

成品參考圖: