Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Feb 10

Editor X - Personal Portfolio Website for Contemporary Glass Art

Visit my personal website to promote & display my portfolio of glass artwork: www.elliotgibson.com 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

0 comments

Editor X

Design your boldest creations.