Highlighted

Click on small image to enlarge in table above [for e-comm site]

New Here ,
Nov 06, 2018

Copy link to clipboard

Copied

Hi I am trying to create a simple table where a person clicks on one of the smaller images and the larger then appears in the table above. i have inserted a picture of wht i am tring to do Many thanks

forum.jpg

Adobe Community Professional
Correct answer by hans-g. | Adobe Community Professional

Hello osgood_,

prompted by "Is that ancient stuff ... " I had a look at my old fashioned first drafts. I found this page from 2012: DisjointTest

Have fun watching! And Garyreg, on the other hand maybe it could be for you.

Hans-Günter

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Click on small image to enlarge in table above [for e-comm site]

New Here ,
Nov 06, 2018

Copy link to clipboard

Copied

Hi I am trying to create a simple table where a person clicks on one of the smaller images and the larger then appears in the table above. i have inserted a picture of wht i am tring to do Many thanks

forum.jpg

Adobe Community Professional
Correct answer by hans-g. | Adobe Community Professional

Hello osgood_,

prompted by "Is that ancient stuff ... " I had a look at my old fashioned first drafts. I found this page from 2012: DisjointTest

Have fun watching! And Garyreg, on the other hand maybe it could be for you.

Hans-Günter

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 06, 2018 0
LEGEND ,
Nov 06, 2018

Copy link to clipboard

Copied

Code example below:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Javascript Image Gallery</title>

<style>

body {

margin: 0;

}

* {

box-sizing: border-box;

}

img {

max-width: 100%;

height: auto;

}

.gallery_wrapper {

width: 50%;

margin: 0 auto;

}

.gallery {

display: flex;

justify-content: space-between;

}

figure {

margin: 0;

padding: 0;

width: 32%;

}

.fadeIn {

opacity: 0;

-webkit-animation: fadeIn 1s ease both;

animation: fadeIn 1s ease both;

}

@-webkit-keyframes fadeIn {

from {opacity: 0}

to {opacity: 1}

}

@keyframes fadeIn {

from {opacity: 0}

to {opacity: 1}

}

</style>

</head>

<body>

<div class="gallery_wrapper">

<div class="large_image">

<img src="https://source.unsplash.com/1200x900/?nature,water" alt="">

</div>

<!-- end large_image -->

<div class="gallery">

<figure>

<img src="https://source.unsplash.com/1200x900/?nature,water" class="gallery_image" alt="">

</figure>

<figure>

<img src="https://source.unsplash.com/1200x900/?nature,trees" class="gallery_image" alt="">

</figure>

<figure>

<img src="https://source.unsplash.com/1200x900/?nature,leaves" class="gallery_image" alt="">

</figure>

</div>

<!-- end gallery -->

</div>

<!-- end gallery_wrapper -->

<script>

// create variables

const gallery_image = document.querySelectorAll('.gallery_image');

const large_image = document.querySelector('.large_image');

// loop trough all gallery images and add an event listener

for(var i = 0; i < gallery_image.length; i++) {

gallery_image.addEventListener('click', getLargeImage);

}

//function which is called when image is clicked

function getLargeImage(){

const imgSrc = this.getAttribute('src');

large_image.innerHTML = '<img class="fadeIn" src="'+ imgSrc + '">';

}

</script>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 0
New Here ,
Nov 06, 2018

Copy link to clipboard

Copied

Hi Thanks very much for your reply, is there a simpler way than coding? Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 0
LEGEND ,
Nov 06, 2018

Copy link to clipboard

Copied

Garyreg  wrote

Hi Thanks very much for your reply, is there a simpler way than coding? Thanks

No, that is the simplest it gets, using pure javascript and no frameworks.

If you dont want to code then you might benefit from an alternative program like Wappler or maybe an extension for Dreamweaver such as something from PVII Project Seven - both paid for commercial product/s

If you Google for either they will come up top.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 0
New Here ,
Nov 06, 2018

Copy link to clipboard

Copied

Thanks very much for your help

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 0
Adobe Community Professional ,
Nov 06, 2018

Copy link to clipboard

Copied

without coding... and without adding WYSIWYG code... hmmm... did you try simple link ?

it wont be easly maintainable and you will have 4 pages instead of 1... but you wont use code... except pure link

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 0
Adobe Community Professional ,
Nov 06, 2018

Copy link to clipboard

Copied

Yes, you can do this in DW without coding, though I have no idea if the code works well on mobile devices...

1. In the main Properties window, give each image a unique ID that makes sense to you (bigpic, smallone, smalltwo...)
2. Open the Behaviors window under Window > Behaviors

3. Click on one of the small images, then the + in the Behaviors window

4. Choose Swap Image

5. In the dialogue that comes up, select the id of your big image

6. Uncheck the box for "Restore images onMouseOut"
7. Hit OK
8. Click the onmouseover showing to the left of your new behavior in the Behaviors window

9. Change it to onClick from the dropdown menu

10. Repeat the same steps for the other small images (set the Swap Image to the large image's id, uncheck the box, set to onclick)

That should do it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 2
LEGEND ,
Nov 06, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Jon+Fritz+II  wrote

Yes, you can do this in DW without coding, though I have no idea if the code works well on mobile devices...

1. In the main Properties window, give each image a unique ID that makes sense to you (bigpic, smallone, smalltwo...)
2. Open the Behaviors window under Window > Behaviors

3. Click on one of the small images, then the + in the Behaviors window

4. Choose Swap Image

5. In the dialogue that comes up, select the id of your big image

6. Uncheck the box for "Restore images onMouseOut"
7. Hit OK
8. Click the onmouseover showing to the left of your new behavior in the Behaviors window

9. Change it to onClick from the dropdown menu

10. Repeat the same steps for the other small images (set the Swap Image to the large image's id, uncheck the box, set to onclick)

That should do it.

Is that ancient stuff still included in DW?????..............hummm

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 0
Adobe Community Professional ,
Nov 07, 2018

Copy link to clipboard

Copied

Hello osgood_,

prompted by "Is that ancient stuff ... " I had a look at my old fashioned first drafts. I found this page from 2012: DisjointTest

Have fun watching! And Garyreg, on the other hand maybe it could be for you.

Hans-Günter

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 07, 2018 0
LEGEND ,
Nov 07, 2018

Copy link to clipboard

Copied

hans-g.  wrote

Hello osgood_,

prompted by "Is that ancient stuff ... " I had a look at my old fashioned first drafts. I found this page from 2012: DisjointTest

Have fun watching!

Hans-Günter

Unfortunately it was probably acceptable 8 years ago but as usual DW never really moves on much and provides anything more current in terms of workflow. It produces quite bloated code which if you have an extensive gallery would be problematical to manage and it has no subtle event effects which more modern solutions will encompass......but hey desperate times call for desperate measures I guess so if its available and it suits your abilities and skills and youre happy then use it. I can't really be bothered with anyone who just wants to drag/drop and click a few buttons.........take my advice or don't. It's a win win situation for both parties.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 07, 2018 0
New Here ,
Nov 07, 2018

Copy link to clipboard

Copied

Hans-g thats exactly what im after could you  please tell me how you did this and I use dreaweaver 8 do you think I can still create a small e-commerce site using this old vesion? Thanks you for your reply Gary

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 07, 2018 0
Adobe Community Professional ,
Nov 07, 2018

Copy link to clipboard

Copied

This may seem harsh but if you can't code, you can't create an e-commerce site, at least not one that would be safe for you and  your customers to use.  

Get a PCI compliant shopping cart to build your e-commerce catalog and securely process  online payments.  Don't attempt to do this yourself.  There's too much legal and financial risk involved.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 07, 2018 1
Adobe Community Professional ,
Nov 07, 2018

Copy link to clipboard

Copied

Hi osgood_,

".take my advice or don't." >>> that's why I'm meanwhile well known to try out your suggestions for improvements and any further thoughts about. Nancy, Paula, Murray, David and .... can tell you a thing or two about this.

And so naturally I followed your example in cons. nr. 2 to see how a Javascript Gallery would work. Here my reproduction, with which we could Gary e. g. bolster up >>>  Javascript Image Gallery

And while we are on it, would you please explain this - in my eyes - strange-looking commando: "/?nature,leaves". Where does this spelling come from? I for my part only know to work with the direct path to an image.

Hans-Günter

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 07, 2018 0
Adobe Community Professional ,
Nov 07, 2018

Copy link to clipboard

Copied

Hi Gary,

thanks, naturally you can use my source code according to your interests. BUT please try to follow Nancy's and osgood_'s advices, esp. this, not to use "that ancient stuff".

Hans-Günter

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 07, 2018 0
LEGEND ,
Nov 07, 2018

Copy link to clipboard

Copied

hans-g.  wrote

And while we are on it, would you please explain this - in my eyes - strange-looking commando: "/?nature,leaves". Where does this spelling come from? I for my part only know to work with the direct path to an image.

hans the link is just passing in some information to the unsplash website. I'm not exactly sure what's happening at the other end but its gathered up and the appropriate image from the appropriate section is passed back.

Its probably like something we would pass by a url variable - blahblah.php?nature=water

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 07, 2018 0
Adobe Community Professional ,
Nov 07, 2018

Copy link to clipboard

Copied

Unsplash.com is one of many online resources for placeholder images.   Some have multiple categories such as nature, animals, technology, people and architecture.

No More Boring Placeholders!

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 07, 2018 1
LEGEND ,
Nov 07, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

Unsplash.com is one of many online resources for placeholder images.   Some have multiple categories such as nature, animals, technology, people and architecture.

No More Boring Placeholders! 

For sure, hans was just enquiring about what the below part of the link does whether unsplash or some other image resource

?nature,leaves

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 07, 2018 0
Adobe Community Professional ,
Nov 08, 2018

Copy link to clipboard

Copied

Hi,

every time you activate this link Javascript Image Gallery new images will be newly-arranged (Interesting thing!).

Is so the secret of "/?nature,leaves" revealed or is it a peculiarity of unsplash.com?

Hans-Günter

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2018 0
Adobe Community Professional ,
Nov 08, 2018

Copy link to clipboard

Copied

Unsplash has 1000+ images that rotate.  You can specify a category but I don't know if it's possible to specify a specific image number.   I have never tried it.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2018 0
LEGEND ,
Nov 08, 2018

Copy link to clipboard

Copied

You can specify a specific number but thats not what Hans wants to know. I think he is more interested in how the ?nature,leaves part of the image link is being handled by the unsplash API to return an image

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2018 0
Adobe Community Professional ,
Nov 08, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2018 0
Adobe Community Professional ,
Nov 08, 2018

Copy link to clipboard

Copied

You will be better off using this extension https://www.dmxzone.com/go/33294/app-connect-api-data-source

To see how it works, go to Connecting to Data APIs in Dreamweaver - YouTube


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2018 0
LEGEND ,
Nov 09, 2018

Copy link to clipboard

Copied

BenPleysier  wrote

To see how it works, go to Connecting to Data APIs in Dreamweaver - YouTube

Although I would say that's not the greatest example for the use of the API connector as you can achieve the exact same gallery effect without going through the unsplash API url where I think you need to set up a CLIENT-ID for authentication and the unsplash documentation is not exactly user friendly.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2018 0
Adobe Community Professional ,
Nov 09, 2018

Copy link to clipboard

Copied

I fear this whole thing has gone totally off topic now because the OP can't code and wants to build an e-commerce site. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2018 0
osgood_ LATEST
LEGEND ,
Nov 09, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

I fear this whole thing has gone totally off topic now because the OP can't code and wants to build an e-commerce site. 

Yes, it has. I was really just answering Hans posts to try and offer some more info not the OP who like a lot disappear and lose interest when it cant be done at the click of a button. I mean jez I supplied the complete code to get them started and it seems copy an paste is a bit to much to cope with. It would not have been that much more complex to add some Paypal buy buttons......oh well. I'm out of my depth, again.

At least the OP acknowledged the help provided, more than some do, so I'll take that

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2018 0
Adobe Community Professional ,
Nov 07, 2018

Copy link to clipboard

Copied

... and I'm pleased to find out: "... code works well on MY mobile."

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 07, 2018 0