The above code is the problem. You have a srcset image at above 64em which is the largest breakpoint on the large picture image (not thumbnails).
I have looked for the code that you found and I see in the page source, where do I find this to change it, and what is the recommendation on what to change it to?
Thanks for the info, I got 3 out of 5 of the thumbnails to be able to show up as large images up top, the last two still wont show up, and they only will show up when I have the browser set at half screen size, I am using a 1920/1080 17 in laptop to work with, if I set it just a little more than half more than the screen size it will not change the images up top at all.
clicking on the thumbnails changes the text regardless of screen size
One of the neat features of RSD is the picture element. It allows you to use different sizes of the same picture for each element between different breakpoints. When you add a link to a picture at the lowest breakpoint it is assigned the tag img and the src attribute. Once you move to another breakpoint and add another size picture at another breakpoint, it becomes a source set of pictures. The second added picture is assigned a tag of source and a attribute of srcset. Any additional pictures at above breakpoint are also assigned the source tag and attribute srcset.
So now the browser screen is measured and it determines which picture of you source set should be displayed.
The script Alter Eagle has created copy the img link from the thumbnail link to the src attribute of the large image.
This means if you have a source set of pictures assinged to the same picture element, only the one below the bottom breakpoint is going to be changed. That is why I said to move your slider above the largest breakpoint and click on the large picture and hit the reset image "X" as this will delete the source you have set for large desktop.
This should leave the remaining image picture you applied at the lowest breakpoint.
<div class="columns small-12">
<div class="container bigpic-container"><div class="responsive-picture thumb" id="bigpic"><picture><img alt="First picture description" src="./img/picture1.jpg"></picture></div>
<span class="text-element bigpic-text" id="description">First picture description</span>
You only want to see this code as it is on his tutorial html.
Where did you get the gallery software or the code? Looks familiar but can't place it
The first picture uses 3 different pictures for the one picture element.
One below 640 px, one between 640 px and 1024 px, and one above 1024 px.
When you move the slider to one of these location, you can choose to have a different picture. (Size and Quality of the same picture)
The second picture element use only one picture which was inserted below the 640 px but it propagates upward beyond 1024 px. This is the setting you have to have for the script to work on Alter's Gallery.
Twinstream, Thank You, I guess I missed part of the programing, so it needs to have the image attached at each break point in the large image field, that is why some work and some dont at different screen sizes.
Yes, the correct procedure is to add the "picture element" to the layout for the bigpic. The make sure you have the slider all the way to the left and below the 640 px blue breakpoint . Then go to the design panel and link to the picture in your resources. This will make the picture span 0 px to above 1024 px.
If you accidentally add a picture above the 640 px breakpoints.....it will mess the script up. You can delete those misteps though by moving the slider to the above 640 or above 1024 breakpoints and then go to the design panel for the bigpic and click on the "X" on the far right of the dropdown selection for the picture link. It may not look like the picture on the upper breakpoints is deleted because it is instantly replaced with one of the lower breakpoint ones.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.