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
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
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>
Copy link to clipboard
Copied
Hi Thanks very much for your reply, is there a simpler way than coding? Thanks
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.
Copy link to clipboard
Copied
Thanks very much for your help
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
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.
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 > Behaviors3. 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 window9. 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
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
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.
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
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.
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
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
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
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.
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.
For sure, hans was just enquiring about what the below part of the link does whether unsplash or some other image resource
?nature,leaves
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
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.
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
Copy link to clipboard
Copied
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
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.
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.
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