I'm wanting to use jssor gallery with arrow navigation, but one thing I need is that each image in the gallery must have a unique url when it is selected, so that people can link to that specific image in the gallery. I looked through the options, but didn't see anything like this. Is there an option for that? Thanks in advance.
<div><img u="image" src="image.jpg" /></div>
Reference: http://www.jssor.com/development/define-slides-html-code.html
Edit:
<div><img u="image" src="http://example.com/gallery/01" /></div>
<div><img u="image" src="http://example.com/gallery/02" /></div>
<div><img u="image" src="http://example.com/gallery/03" /></div>
<div><img u="image" src="http://example.com/gallery/04" /></div>
Related
I could use some hints to get rid of the SAVED content in the coupon Plugin -
Screenshot of the area i want to remove
Thanks in advance!
O.
In the file widget/templates/List-Layout-1.html file you will see the following code:
<div class="col-xs-6 pull-left text-center primaryBackgroundTheme">
<a class="whiteTheme stretch" ng-
click="WidgetHome.showSavedItems()">Saved</a>
</div>
You can just update it to the following:
<div class="col-xs-6 pull-left text-center primaryBackgroundTheme">
</div>
The widget has 4 layouts, so depending on the layout that you want to use, you need to make sure to update the appropriate template.
I can't seem to find a way to edit the localised strings using the provided template editor , does anyone have any pointers on this ?
For example if I wanted to change the text 'search products' to something else for example... Where/How can I edit the template and its data ?
Thank you
Le Roi
The ugly way to do this:
Edit the template, remove the
<search-control></search-control>
And add a custom text to the input placeholder
<div>
<form action="/Products" class="pull-right" method="get">
<input type="hidden" name="startEditTemplate" value="ProductList">
<div class="form-group has-feedback">
<input placeholder="My Custom Search products" id="pattern" type="search" class="form-control" name="pattern" spellcheck="false">
<button class="glyphicon glyphicon-search form-control-feedback ap-ininput-button"></button>
</div>
</form>
</div>
The bad part about this is that you are now responsible for updating this piece of code and template.
I would like to get bootstrap to show something like the attached image, meaning a div wrapper with blue background-color some padding and 3 images inside (I use this horrible colors just for the sake of clarity).
It should be pretty straight forward but, honestly, I couldn't get it. If I try something like :
<div class="span9">
<div class="row">
<div class="span9" style="background-color:blue;">
<img class="span3" src="..."></img>
<img class="span3" src="..."></img>
<img class="span3" src="..."></img>
</div>
</div>
</div>
Inside my container class, the tird image does not fit in the wrapper and goes below the other two, as it appears in this image:
Anyone would give me a hand, please?
Try this:
<div class="span9" style="background-color:blue;">
<div class="row">
<div class="span3">
<img class="span3" src="..." />
</div>
<div class="span3">
<img class="span3" src="..." />
</div>
<div class="span3">
<img class="span3" src="..." />
</div>
</div>
</div>
Possible solution is clearing floats? Quite a bit has been written lately on this but here is one article as a start. Clearing Floats
From a design and requirements point of view, you might consider something like create divs, then fill them with png images that are extra large then add a transparency to the borders so that have a clear background to appear as if they were bordered as such or show your background color.
The trick I believe for you is to use transparent .png's would do the trick, and or adding the desired look to your images.
I have a problem with a standard Twitter Bootstrap progress bar with some text if it is within <div class="hero-unit">, also standard Twitter Bootstrap class:
<div class="hero-unit">
<div class="container">
<div class="progress progress-striped active">
<div class="bar" style="width: 80%;">80%</div>
</div>
</div>
</div>
Here is a jsFiddle code, that shows the text is not aligned properly.
Why this is happening and how to fix? I've tried to fix it but had no luck.
Thank you.
It is the line-height: 30px on hero-unit which causes the problem.
I've change the code like this:
<div class="hero-unit" style="line-height: inherit">
Of course it is better to assign a class to it, instead of using the style attribute.
How would I cause text to scroll either vertically or horizontally? (And be able to change the speed of the scroll). Any help to get me started would be appreciated.
If you are talking about web development and do not want to use the non-standards <marquee> element, you should implement it in JavaScript. A nice solution, a plugin for jQuery library - here: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
Straight out of basic HTML 1.0:
<div align="center">
<font color="#FFF" size="2">
<marquee bgcolor="#000080" direction="right" loop="20" width="75%">
<strong>This is cool!</strong>
</marquee>
</font>
</div>
or vertical
<div align="center">
<marquee bgcolor="#000080" scrollamount="2" direction="up" loop="true" width="35%">
<center>
<font color="#ffffff" size="+1">
<strong> THIS IS A COOL WAY<br>
TO MAKE YOUR TEXT<br>
SCROLL UPWARDS<br><br>
IT IS EASY AND FAST LOADING
</strong>
</font>
</center>
</marquee>
</div>
Don't sweat the comments man.