Jump to content

Nasreen

Member
  • Posts

    14
  • Joined

  • Last visited

Everything posted by Nasreen

  1. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .draggable-image { position: absolute; z-index: 1; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .draggable-image .header { padding: 10px; cursor: move; z-index: 2; background-color: #2196F3; color: #fff; } </style> </head> <body> <div id="container"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/91cbeb3c-bc85-4577-b601-9337728786f6/lofficiel.jpg?content-type=image%2Fjpeg" style="left: 1300px; top:200px; height: 550px; width: 390px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/6649b9e5-dc0c-4a50-a5e7-d1278cd920ec/HBVN_DELANEY_8.jpg?content-type=image%2Fjpeg" style="left: 900px; top: 200px; height:550px; width:390px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/a6267886-2773-48de-9c70-1e1672c9bc41/elle+cover.jpg?content-type=image%2Fjpeg" style="left: 500px; top:200px; height: 550px; width: 390px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/af11b614-378e-4697-a5dc-199496f8ace2/L1010573.jpg.jpg?content-type=image%2Fjpeg" style="left: 700px; top: 750px; height:550px; width:360px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/7a338d6c-ef34-44ce-9f94-56ce4806d31f/L1010509.jpg.jpg?content-type=image%2Fjpeg" style="left: 1500px; top: 725px; height:400px; width:300px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/e57276c5-7fbf-4bbd-a4cb-a9e1144fcce0/COSBG1221-2.jpg?content-type=image%2Fjpeg" style="left: 1100px; top: 805px; height:380px; width:280px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/4ef54bd1-3c67-44d7-a496-2b26b0cae2d0/ELLE_196_06_Fashion2-3.jpg?content-type=image%2Fjpeg" style="left: 360px; top: 825px; height:400px; width:300px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/f4c1c15a-155e-4b30-97ea-6a3b769321fc/%40EMILPHOTOGRAPHER-2.jpg?content-type=image%2Fjpeg" style="left: 560px; top: 525px; height:400px; width:300px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/e9544032-7ec4-48a8-9b63-d6b870568810/ELLE_196_06_Fashion2-5.jpg?content-type=image%2Fjpeg" style="left: 1700px; top: 325px; height:400px; width:300px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/78918633-07e8-4371-8c30-fbc06ec01ed5/L1010412.jpg.jpg?content-type=image%2Fjpeg" style="left: 1500px; top: 525px; height:350px; width: 250px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/b26b72e2-d7fd-48c0-b34f-37f7a4c69a43/L1010457.jpg.jpg?content-type=image%2Fjpeg" style="left: 1900px; top: 625px; height:350px; width: 250px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/d84cb775-ad7b-433a-88a6-4faf0875cbdd/HBVN_DELANEY_2.jpg?content-type=image%2Fjpeg" style="left: 100px; top: 325px; height:500px; width: 360px;"> <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/7d337e25-f570-4bde-8216-d1f0b2e976bd/ELLE_196_06_Fashion2-2.jpg?content-type=image%2Fjpeg" style="left: 800px; top: 450px; height:400px; width: 280px;"> </div> <script> //Make the images draggable: const images = document.getElementsByClassName("draggable-image"); let currentZIndex = 1; for (let i = 0; i < images.length; i++) { dragElement(images[i]); } function dragElement(elmnt) { let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; const header = elmnt.querySelector(".header"); if (header) { /* if present, the header is where you move the element from:*/ header.onmousedown = dragMouseDown; } else { /* otherwise, move the element from anywhere inside the element:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; currentZIndex++; elmnt.style.zIndex = currentZIndex; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html> This is the code I injected into my template for my home page. I'm trying to make it so that it is mobile friendly to where I can drag around all the pictures on a mobile device as well. However I can't see all the pictures as seen below: Can someone help me out on what to do to make my website more dynamic for mobile devices? Here's a website that's the inspiration for my website: https://misokhe.com/. Notice that it is mobile friendly.
  2. @tuanphan can you put Nasreen Hussain in the same font style and size as "humans of high fashion"? And can you put "Art Direction & Styling" underneath Nasreen Hussain?
  3. @tuanphan "Nasreen Hussain" in same font size as "Humans of High fashion" Art Direction & Styling underneath Nasreen Hussain
  4. Hi @tuanphan that looks good, but can the "Art direction & Styling" be underneath "Nasreen Hussain"? and Nasreen Hussain in slightly bigger font too
  5. Yes @tuanphan, just the Humans of High Fashion portion. Left hand side: Nasreen Hussain Art Direction & Styling Right hand side: Humans of High Fashion
  6. Thanks @tuanphan ! Is it possible via custom css in the header to have "Humans of High Fashion" on the far right hand side?
  7. Hi @tuanphan I need custom css help as I would like my name and site title (which is on the right at the moment) to be on the left hand side, and the navigation bar (which is on the left at the moment) to be on the right hand side. Also, is it possible with custom css to have pictures be movable to the viewer (via click and drag)? OR is there custom css which allows me to change the spacing/positioning of the pictures? website: https://cobalt-semicircle-k87m.squarespace.com/config/ Thank you!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.