How to add different images to scroll?

Report · Jan 04, 2019

I am trying to add different images to a scrolling background. I can add the image as a background image in the CSS settings, but the problem in doing that is that it repeated the image each time as shown.

is there a way of having separate images instead?

I hope you can help, code below

Tim

------

<!DOCTYPE HTML>

<head>

<title>Template</title>

$(document).ready(function(){

$('#content').load("search-tab.html");

});

</script>

<style>

.testtest {

width: 118%;

height: 0px;

padding-top: 10px;

padding-bottom: 55px;

padding-left: 14px;

margin-left: -22px;

margin-top: 46px;

margin-bottom: -19px;

background-color: rgba(0,0,0,0.68);

}

.line1 {

font-size: 16px;

margin-top: 2px;

margin-left: 7px;

width: 170px;

color: rgba(255,255,255,1.00);

}

.line2 {

font-size: 15px;

margin-top: -12px;

margin-left: 7px;

width: 170px;

color: rgba(255,255,255,1.00);

}

.heart-small {

height: 50px;

margin-left: 119px;

margin-right: -9px;

padding-left: 12px;

margin-top: -6px;

}

li.item {

position: relative;

overflow: hidden;

}

.item .bottom-panel {

bottom: 0;

position: absolute;

width: 100%;

left: 0;

margin:0;

height: auto;

}

.item .bottom-panel p {

margin: 0;

padding-top: 0px;

padding-right: 10px;

padding-left: 10px;

padding-bottom: 6px;

}

.top-button {

margin: 0;

position: absolute;

right: 14px;

border-radius: 6px;

}

:root {

--gutter: 20px;

}

.app {

padding: var(--gutter) 0;

display: grid;

grid-gap: var(--gutter) 0;

grid-template-columns: var(--gutter) 1fr var(--gutter);

align-content: start;

}

.app > * {

grid-column: 2 / -2;

}

.app > .full {

grid-column: 1 / -1;

}

.hs {

display: grid;

grid-gap: calc(var(--gutter) / 2);

grid-template-columns: 10px;

grid-template-rows: minmax(50px, 1fr);

grid-auto-flow: column;

grid-auto-columns: calc(20% - var(--gutter) * 2);

overflow-x: scroll;

scroll-snap-type: x proximity;

padding-bottom: calc(.75 * var(--gutter));

margin-bottom: calc(-.25 * var(--gutter));

width: 1200px;

}

.hs:before,

.hs:after {

content: '';

width: 10px;

}

ul {

list-style: none;

padding: 0;

}

h1,

h2,

h3 {

margin: 0;

}

.app {

width: 500px;

height: 234px;

/* [disabled]background-color: #DBD0BC; */

overflow-y: scroll;

}

.event-title {

font-size: 36px;

margin-bottom: -25px;

margin-top: -16px;

padding-top: 11px;

padding-left: 0px;

font-weight: 400;

font-style: italic;

}

.hs > li,

.item {

scroll-snap-align: center;

padding: calc(var(--gutter) / 2 * 1.5);

display: table;

flex-direction: column;

justify-content: center;

align-items: center;

background-color: #CBCBCB;

border-radius: 8px;

max-width: 1px;

background-image: url(business4.jpg);

background-repeat: no-repeat;

}

.item {

width: 220px;

min-width: 174px;

height: 145px;

margin-left: 1px;

}

.side-search-strip {

}.bottom-search-panel {

height: 93px;

background-color: #FA2E32;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

}

</style>

</head>

<!DOCTYPE HTML>

<head>

<title>Template</title>

$(document).ready(function(){

$('#content').load("search-tab.html");

});

</script>

$(document).ready(function(){

$('.hamburger').css('cursor','pointer').click(function() {

var status = $('.home').attr('class');

if(status === "home") {

$('#layer_1').show();

$('.home').addClass('display_none');

}

if(status === "home display_none") {

$('#layer_1 , #layer_2 , #layer_3').hide();

$('.home').removeClass('display_none');

}

});

$('.show_layer_1').click(function() {

$('.close_all').hide();

$('#layer_1').show();

});

$('.show_layer_2').click(function() {

$('.close_all').hide();

$('#layer_2').show();

});

</script

></head>

<body>

<div>

<ul>

</div>

</div>

</div>

</div>

</main>

</div></main>

</div></div>

<div>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

$(document).ready(function(){

$( ".scrollable-nav" ).draggable({ axis: 'x' });

});

</body>

</html>

</body>

</html>

Report · Jan 04, 2019

Do you want the carousel to be full width (based on the element it is inside of)?

Report · Jan 04, 2019

Thank you all for your comments

ALsp

The carousel needs to be 1200px wide for desktop - (which I alter within the .app CSS I was testing it for mobile!), so that’s no issue.

1) The carousel I’m using is right, I need to be able to put different images within it!

Also

2) I have added a bit of text into the black panel at the bottom. The only problem for this bit is the text is always closer to the edge on the left-hand side of the panel. Not sure how to get the right-hand side to be the same gap? (new code attached)

Hope you can help

Thanks

Tim

---

<!DOCTYPE HTML>

<head>

<title>Template</title>

$(document).ready(function(){

$('#content').load("search-tab.html");

});

</script>

<style>

.testtest {

width: 118%;

height: 0px;

padding-top: 10px;

padding-bottom: 55px;

padding-left: 14px;

margin-left: -22px;

margin-top: 46px;

margin-bottom: -19px;

background-color: rgba(0,0,0,0.68);

}

.line1 {

font-size: 16px;

margin-top: 2px;

margin-left: 7px;

width: 170px;

color: rgba(255,255,255,1.00);

}

.line2 {

font-size: 15px;

margin-top: -12px;

margin-left: 7px;

width: 170px;

color: rgba(255,255,255,1.00);

}

.heart-small {

height: 50px;

margin-left: 119px;

margin-right: -9px;

padding-left: 12px;

margin-top: -6px;

}

li.item {

position: relative;

overflow: hidden;

}

.item .bottom-panel {

bottom: 0;

position: absolute;

width: 100%;

left: 0;

margin:0;

height: auto;

}

.item .bottom-panel p {

margin: 0;

padding-top: 0px;

padding-right: 10px;

padding-left: 10px;

padding-bottom: 6px;

}

.top-button {

margin: 0;

position: absolute;

right: 14px;

border-radius: 6px;

}

:root {

--gutter: 20px;

}

.app {

padding: var(--gutter) 0;

display: grid;

grid-gap: var(--gutter) 0;

grid-template-columns: var(--gutter) 1fr var(--gutter);

align-content: start;

}

.app > * {

grid-column: 2 / -2;

}

.app > .full {

grid-column: 1 / -1;

}

.hs {

display: grid;

grid-gap: calc(var(--gutter) / 2);

grid-template-columns: 10px;

grid-template-rows: minmax(50px, 1fr);

grid-auto-flow: column;

grid-auto-columns: calc(20% - var(--gutter) * 2);

overflow-x: scroll;

scroll-snap-type: x proximity;

padding-bottom: calc(.75 * var(--gutter));

margin-bottom: calc(-.25 * var(--gutter));

width: 1200px;

}

.hs:before,

.hs:after {

content: '';

width: 10px;

}

ul {

list-style: none;

padding: 0;

}

h1,

h2,

h3 {

margin: 0;

}

.app {

width: 500px;

height: 234px;

/* [disabled]background-color: #DBD0BC; */

overflow-y: scroll;

}

.event-title {

font-size: 36px;

margin-bottom: -25px;

margin-top: -16px;

padding-top: 11px;

padding-left: 0px;

font-weight: 400;

font-style: italic;

}

.hs > li,

.item {

scroll-snap-align: center;

padding: calc(var(--gutter) / 2 * 1.5);

display: table;

flex-direction: column;

justify-content: center;

align-items: center;

background-color: #CBCBCB;

border-radius: 8px;

max-width: 1px;

background-image: url(business4.jpg);

background-repeat: no-repeat;

}

.item {

width: 220px;

min-width: 174px;

height: 145px;

margin-left: 1px;

}

.side-search-strip {

}.bottom-search-panel {

height: 93px;

background-color: #FA2E32;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

}

.panel-text {

color: #FFFFFF;

margin-left: 0px;

margin-right: -2px;

width: 182px;

margin-top: 3px;

}

</style>

</head>

<!DOCTYPE HTML>

<head>

<title>Template</title>

$(document).ready(function(){

$('#content').load("search-tab.html");

});

</script>

$(document).ready(function(){

$('.hamburger').css('cursor','pointer').click(function() {

var status = $('.home').attr('class');

if(status === "home") {

$('#layer_1').show();

$('.home').addClass('display_none');

}

if(status === "home display_none") {

$('#layer_1 , #layer_2 , #layer_3').hide();

$('.home').removeClass('display_none');

}

});

$('.show_layer_1').click(function() {

$('.close_all').hide();

$('#layer_1').show();

});

$('.show_layer_2').click(function() {

$('.close_all').hide();

$('#layer_2').show();

});

</script

></head>

<body>

<div>

<ul>

</div>

</div>

</div>

</div>

</main>

</div></main>

</div></div>

<div>

</li>

<p class="panel-text">This is the contentbbbbbbbb fnnnnnnor Layout P Tag</p>

</div>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

$(document).ready(function(){

$( ".scrollable-nav" ).draggable({ axis: 'x' });

});

</body>

</html>

</body>

</html>

Report · Jan 04, 2019

Please put your work online so we can see exactly what you see.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 04, 2019

Hi Tim,

Tell me the truth... you grabbed this code online, didn't you? You did not write it from scratch. Frankly, the code is a mess and should be discarded. You need to start over, and you need to make some important decisions.

1. You need to admit to yourself what your coding skill level is

2. You need to either grab a free complete script and related markup and copy it

3. If all else fails, you need to buy yourself some time by either using an extension or hiring a web developer

Honesty is important here. No one is going to judge you.

This is what I get when I take your code and pull out the most egregious errors:

http://projectseven.com/testing/adobe-forum/cross/index-2.htm

Report · Jan 04, 2019

I counted 4 separate references to the jQuery core library.

.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 04, 2019

Yeah. Those went along with the 3 or 4 additional body head and html tags I removed. It quickly became an exercise in futility.

Report · Jan 06, 2019

LOL, OK well, I am no Dreamweaver expert! I am a graphic designer and used to use Adobe Muse! So Dreamweaver is a big step-up,.

I am only creating a rough website design as I am setting up my own separate company which is not within a design. So I am laying out how I want my site to look, and then will get a professional coder designer to complete it.

By laying out my website it has allowed me to spot errors in how I want each page to be designed and has allowed me to process my idea further than just having a web designer it for me

Yes, I know there are lots of errors within the code, but the layout of the website works so the coder can see what I want and then will go forward.

I have learnt a lot already using CSS and dreamweaver, but it is a big learning curve and adding query code from other website is not easy when your not a coder!

Tim

Report · Jan 06, 2019

also I was only asking how to add separate images to the scroller that I am using at the moment. The scroller is prefect in how I want it to work I just need to change the images! as I said we are not all professionals in every part of the adobe software!

Report · Jan 06, 2019

It looks like you are using the Owl Carousel. According to the Basic Demo, the markup structure should look like

<

div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>

where the highlighted part can be replaced by an image.

At the moment, you have got the same image in a slightly altered markup, namely

<img src="../eventify-2019/images/small-hear-non-active.svg" alt="" class="heart-small"/>

If you changed the image in each case, you will find that you will have different images showing.

Wappler, the only real Dreamweaver alternative.

Report · Jan 06, 2019

BenPleysier wrote
At the moment, you have got the same image in a slightly altered markup, namely
<img src="../eventify-2019/images/small-hear-non-active.svg" alt="" class="heart-small"/>
If you changed the image in each case, you will find that you will have different images showing.

That would be the most obvious answer but Tim mentions in his first post that he is using css to set the background image/s so I'm wondering if something more is required here.

Report · Jan 06, 2019

You may well be right, but I had a look through the style rules and found no indication of that. It could be that hes has the images in search-results-panels.css. It's hard to say.

If Tim only wants to do a design layout and hire a coder for the actual site, he may be better off using a program like Adobe Spark, it seems to be a favourite among Adobe non-coders. Even Adobe newsletters are produced using Spark.

Which makes me wonder.

Wappler, the only real Dreamweaver alternative.

Report · Jan 06, 2019

This is his code, semi-corrected and rendered:

http://projectseven.com/testing/adobe-forum/cross/index-2.htm

Report · Jan 06, 2019

Hi Tim,

Based on your code, the scroller is not perfect. And there will be problems. How about if you point to the URL where you found the scroller. If you can post that, I will put it in a page along with nice instructions of what to do in order to add content around it. Otherwise I promise you are spinning your wheels.

If you want (it is your choice), I can set up a slider using one of our extensions and you can use it for free. Here is an example:

http://projectseven.com/testing/adobe-forum/cross/

The only coding required were the handful of exception CSS rules in the head.

Report · Jan 04, 2019

To make sure that all of the good commercial extensions for Dreamweaver get a mention, have a look at a very much advanced version of a swiper at https://www.dmxzone.com/go/33301/app-connect-swiper/

This is the product that I use very successfully.

Edit: Unlike the other poster promoting his wares, I have no financial interest in mentioning this product.

Edit2: Here is a full screen version of the swiper https://showcase.wappler.io/SwiperFullscreen/. Notice the little 'parallax' effect?

Wappler, the only real Dreamweaver alternative.

Report · Jan 05, 2019

!i!i!i!i!i BOYS PLEASE STOP i!i!i!i!i!

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 05, 2019

Gosh, if only it were that simple, Nancy. I would, but Ben has made some serious accusations against me. He needs to prove them or apologize. Since this is a highly public forum, I will not have my name and reputation sullied. He needs to apologize publicly, and then we can go back to our normal and harmless bantering.

Report · Jan 05, 2019

My reply to Ben was deleted by a moderator. There was nothing in it that should have warranted rejection - unless someone is afraid of the truth. There was nothing profane and there no untruths written. Here is a synopsis that cannot possibly be rejected without an agenda:

---------------------------------------------------------

In response to Ben ignoring my recommendation of using a jQuery plugin as a solution to the original poster, with an alternative of seeking an extension as a possible solution. And then Ben proceeding to link to a Wappler page.

---------------------------------------------------------

And here is a programmed from the ground up full-screen slide show that can be embedded in a page:
http://projectseven.com/products/galleries/fss/tutorials/thumb-drive/finished/index.htm

And I'm afraid I don't see a "little parallax effect"... which are really not easy to simulate on a web page. But perhaps this could be considered a little parallax effect?
http://projectseven.com/products/staging/bse/test-03.htm

You never know.

But I digress...

Do you really want to be childish, Ben? I know we make top-quality extensions. I'm not trying to sell anything here. I'm presenting options. All a user has to do is search google for Dreamweaver extensions and the can make their own choices. You have been a fan of DMX Zone for years... and there is nothing wrong with that. Murray Summers used to recommend our extensions all the time (back when this forum was actually a vibrant community). But now you are promoting Wappler, which rather than being a Dreamweaver extension, is a competing program. I'm kind of amazed that you would do that on a Dreamweaver forum owned by Adobe.

Report · Jan 05, 2019

Everyone thats anyone in web development knows the commercial swiper you are refering to is a free script available if you Google for it. DMX has just put it into a UI for DW, which if you know how to copy and paste you can freely obtain from the original developer of the script who made it open source and freely available to anyone. Personally l find it somewhat dubious for a commercial builder of extensions to put other developers open source work into a UI and start charging for it.

I think if youre going to pay for something at least pay for something that has been uniquely built from the ground up and is not free if you know where to look.

Report · Jan 05, 2019

To name an even more well known free bit of script, Bootstrap, why would anyone pay for that? Have a look here https://www.dmxzone.com/go/33143/app-connect-bootstrap-4/

Yet there is a huge market for these products.

Wappler, the only real Dreamweaver alternative.

Report · Jan 05, 2019

Im sure there is a huge market and that is not questionable. The question is integrity and as we all know when money is the objective that seems to go out of the window very quickly and code of honour disappears.

I still find it somewhat distastful to make money commercially in what could be conceived to be potentially or hoped for large scale sales in the shortest amount of time possible out of an open source solution which was given to the community to use with l suspect integrity.

Its a bit like buying an image from a commercial photographic library and applying it to multiple commercial posters or t-shirts which is not allowed in most cases, even though you can use it as many times as you like for 'personal' projects which you are paid for.

Im not sure DMX needs to sully their reputation to be honest as they have no need to use open source solutions and charge for them given they have skillful developers onboard capable of producing unique products.

Report · Jan 05, 2019

DMXzone have in the past often based their extensions on freely available scripts. Off hand I can think of their calendar, Google maps and dropzone extensions. Probably more than that.

That is not the issue though. The point is that I, along with many other developers, want time saving methods for our projects. I can incorporate a Swiper within a couple of minutes as you can see here Using App Connect Swiper - YouTube.

If I were to use http://idangero.us/swiper/get-started/, it would take me much longer, especially if it were the first time, trying to figure out which parts of the scripts that I want to use. With the DMXzone extension, I can chop and change with a click and see the result realtime in Dreamweaver.

Wappler, the only real Dreamweaver alternative.

Report · Jan 05, 2019

I understand that but a little more transparency as to what one is paying for wouldnt go a miss, its the UI, predominately, not the actual free script/s, which do the main objective of the solution required and as you say DMX incorporates in its products on ocassions.

I doubt that many, even those using the DMX products, would even know unless they care to open the script, which there is no need to usually and read the credits as to who actually created them.

What l object to personally is a company dressing something up as though it looks like its all been produced by themselves, calling it something different and then selling it on to make a profit from mainly some other developers open source code. Maybe the developer is getting a financial kick-back, one would hope so.

This is nothing to with development, its about ethics, if you have any and as already said once money is involved ethics takes a back seat for many an individual and company alike.

Report · Jan 05, 2019

I don't disagree.

I have come to accept their concept. In fact, I have gone to the free scripts when I have wanted to solve a problem. So, in a way, I am glad that the scripts are not completely proprietary.

Wappler, the only real Dreamweaver alternative.

Report · Jan 05, 2019

Programming is a funny business. Writing a desktop app, in many ways, is clinical. A lot of busy work. Writing a script, along with CSS and the markup to glue them together is the more challenging aspect of making an extension, as it's more of a creative endeavor. To test this, try to write full-featured image gallery for the web - without using anyone else's script or CSS. This is why there is a boatload of free plugins and the like floating around the web these days. jQuery (and in a much smaller way, Bootstrap) has exceeded its mission. Not only has it made JavaScript solutions easier for the masses to use, it has opened up a market for people that ordinarily could not write complex scripts to do all sorts of things - including writing plugins. This is why it is so imperative to still understand JavaScript in order to assess the quality of such plugins. jQuery has also made it much easier to make certain types of Dreamweaver extensions. If you make the assumption that jQuery takes the guesswork out of, or obviates the need for quality control, you risk sliding into a trap. This is why a good artist, when (legally) copying a masterwork, always starts at the beginning and never in the middle .

Adobe Community

How to add different images to scroll?

!i!i!i!i!i BOYS PLEASE STOP i!i!i!i!i!