Visit my personal website to promote & display my portfolio of glass artwork:
I would love feedback and comments or suggestions for improvement!
For the website I started from a blank canvas, going for a very sleek and minimalistic design - I employ video as visual elements to create interest.
I did run into a couple issues - I used dynamic pages for containing artwork collections by linking media galleries to datasets representing “series” of works - in the ideal world the dataset would connect to a Pro Gallery or Media Gallery on the dynamic page, however there is a bug affecting the images on these in that the gallery does not update even though the data sent to it does (this is a known bug) - I used velo to create a work around using containers, two stacked images and lightboxes to create a rip-off version - The code for each section is below - initially images would load slow and I found that a performance benefit could be achieved by using a repeater hidden and loading the images into the repeater before displaying them in the custom gallery.
Dynamic page code (This code can be optimised, although for readability I have not done so):
import wixWindow from 'wix-window';
var slide = 0; var index = 0; var pageObj = {}; var slideHover = false; var expanded = wixWindow.lightbox; var autoplay_interval;
const delay = 4500; const fadeOptions = {"duration": 500,"delay": 0}; const slideinfoAnimation = {"direction":"bottom","duration":300,"delay":0}
export function slide_mouseIn(event){ //Show info box & pause slideshow on mouse in
$w('#slideinfo').show("fly",slideinfoAnimation)
clearTimeout(autoplay_interval);
slideHover=true;
}
export function slide_mouseOut(event){ //Hide info & pause slideshow box on mouse out
$w('#slideinfo').hide("fly",slideinfoAnimation)
slideHover=false;
autoplay_interval = setTimeout(autoplayHandler, delay,"mouseOut");
}
$w.onReady(async function () {
if (wixWindow.formFactor==="mobile" || wixWindow.formFactor==="tablet"){$w('#slideinfo').show("fly",slideinfoAnimation);}//if on mobile or tablet, no hover effect available * show info box
pageObj = await $w('#dynamicDataset').getCurrentItem();// load dynamic page items
let images = pageObj.image; //get media gallery array from dynamic page dataset
if (images.length>1){ //if only 1 image, hide forwards and backwards buttons as not needed
$w('#previous').show();
$w('#next').show();
}
await (images.forEach(async(image) => {image._id = await Math.floor(Math.random()*1000).toString();})); //add ids to each image in media gallery array
$w('#repeater1').data = images; //Set repeater data to images array
$w('#repeater1').onItemReady(($item, data, i)=>{$item('#imageX1').src = data.src;}) //Load images into a hidden repeater (this has a performance increase for image load times?!?)
$w('#titleOfWork').text = pageObj.title; //Set page title (since not linked in editor)
$w('#descriptionText').html = pageObj.longDescription //Set page description ^
await load(); //Load first slideshow image
$w('#next').onClick(async(event)=>{ //Handle next image button click
$w('#previous').hide("fade",fadeOptions);
$w('#next').hide("fade",fadeOptions);
await change(1);
$w('#previous').show("fade",fadeOptions);
$w('#next').show("fade",fadeOptions);
})
$w('#previous').onClick(async(event)=>{ //handle previous image button click
$w('#previous').hide("fade",fadeOptions);
$w('#next').hide("fade",fadeOptions);
await change(-1);
$w('#previous').show("fade",fadeOptions);
$w('#next').show("fade",fadeOptions);
})
$w('#slide0').onClick((event)=>{ //Handle user clicking on image (opens lightbox instead of expand mode)
expand(images);
})
$w('#slide1').onClick(async(event)=>{ //handle user clicking on image if top image state is hidden
expand(images);
});
autoplay_interval = setTimeout(autoplayHandler, delay,"mainThread"); //Start slideshow autoplay (will pause on hover)
});
function expand(images){ //Expands images as a fullscreen lightbox
let send = {"images":images,"index":index}; //Sends data to lightbox to handle working as slideshow within
wixWindow.openLightbox("expanded", send).then(async(data)=>{
if (data !==null){
try{index = data.index; await load();//should set index of slidehow gallery to correct image :) and update gallery to match <3
}catch(error){console.log(error)}//will catch error if index not passed back to master-page;
}
})
}
async function autoplayHandler(calledFrom){ //Handles slideshow autoplaying
try{if (pageObj.image.length>1 && slideHover===false){await(change(1))}}
catch(err){console.log("NOT READY")}
autoplay_interval = setTimeout(autoplayHandler, delay,"self");
}
async function load(){
var images = $w('#repeater1').data //loads images into the slideshow
$w('#slide'+slide.toString()).src = images[index].src;
$w('#slideTitle').text = images[index].title;
$w('#slideDesc').text = images[index].description;
$w('#pageNumber').text = (index+1).toString()+" of "+images.length.toString();
await $w('#slide'+slide.toString()).show("fade",{"duration":1000,"delay":150});
}
async function change(dir){ //changes the image shown by the slideshow
var images = $w('#repeater1').data
slide = slide+dir; index=index+dir;
if (slide > 1){slide=0}
if (index >= images.length){index=0}
if (slide < 0){slide=1}
if (index < 0){index = images.length-1}
let s = slide+1;
if (s > 1){s=0}
$w('#slide'+slide.toString()).src = images[index].src
$w('#slideTitle').text = images[index].title;
$w('#slideDesc').text = images[index].description;
$w('#pageNumber').text = (index+1).toString()+" of "+images.length.toString();
await $w('#slide'+slide.toString()).show("fade").then($w("#slide"+s.toString()).hide("fade"))
}
Lightbox code: (again can be optimised)
import wixWindow from "wix-window"; var index; var images;
$w.onReady(function () {
let received = wixWindow.lightbox.getContext();
index = received.index; images = received.images;
$w('#expandedImage').src = images[index].src;
$w('#expandedTitle').text = images[index].title;
$w('#expandedDescription').text = images[index].description;
$w("#exit").onClick((event)=>{wixWindow.lightbox.close( {"index":index})})
if (images.length<=1){$w('#previous').collapse();$w('#next').collapse();}
$w("#previous").onClick((event)=>{change(-1);});
$w("#next").onClick((event)=>{change(1);});
});
function load(){
$w('#expandedImage').src = images[index].src;
$w('#expandedTitle').text = images[index].title;
$w('#expandedDescription').text = images[index].description;
}
function change(dir){
index = index+dir;
if (index<0){index=images.length-1}
if (index>=images.length){index=0}
load();
}
The code here is to give an indication that workarounds for the bug are possible, even if a little buggy - I would be interested if other people have found alternative workarounds or can offer further insight or suggestions on improvements to my work-around.
Thanks,
Elliot
Email: elliot@elliotgibson.com
Glasswork: www.elliotgibson.studio
Wix partner: www.elliotgibson.uk
