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

Report · Nov 06, 2018

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

Report · Nov 06, 2018

Code example below:

<!DOCTYPE html>

<head>

<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>

</figure>

</figure>

</figure>

</div>

</div>

// 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>

Report · Nov 06, 2018

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

Report · Nov 06, 2018

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.

Report · Nov 06, 2018

Thanks very much for your help

Report · Nov 06, 2018

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

Report · Nov 06, 2018

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.

Report · Nov 06, 2018

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

Report · Nov 07, 2018

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

Report · Nov 07, 2018

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.

Report · Nov 07, 2018

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

Report · Nov 07, 2018

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 07, 2018

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

Report · Nov 07, 2018

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

Report · Nov 07, 2018

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

Report · Nov 07, 2018

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 07, 2018

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

Report · Nov 08, 2018

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

Report · Nov 08, 2018

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 08, 2018

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

Report · Nov 08, 2018

did you try

Report · Nov 08, 2018

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

Wappler, the only real Dreamweaver alternative.

Report · Nov 09, 2018

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.

Report · Nov 09, 2018

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 09, 2018

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

Adobe Community

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

1 Correct answer