Code
(Note that the result will not display properly without the images referenced)
I'm a student worker at a University with some programming experience. My boss wants me to make a slideshow similar to the one that can be seen here. I don't know anything about Javascript or jQuery other than the basic W3 schools tutorials so I decided to get code from outside sources to modify for my own purposes.
Two issues have arisen with this build of the code.
My first problem is the simpler of the two.
I'm trying to make little thumbnail images at the bottom of the slideshow to tab between slides. Unfortunately due to nested quotes the IDE (Aptana if it matters) interprets the coded quotes as
"$('.slideshow').blinds_change(<img src="
and
" />)"
Thus it displays " />)" instead of the proper thumbnail image.
My second problem is making each slide into a link. For some reason a simple tag doesn't work.
<li><img class="slide" src="img\sakaiupgrade.png" alt="Whats new in Sakai?" /></li>
I assume this has more to do with the Javascript/jQuery side of things, which is way above my head at the moment.
Thanks in advance for any help you can give me!
If you want to throw in some images yourself the size is w500 h350 for the slides and w77 h54 for the tabs. Or I could try uploading all the relevant images if need be.
You need to add this to the head of your page, underneath the <script tags.
This will start off the blinds process.
<script language="javascript">
$(document).ready(function()
{
$(".slidehsow").blinds();
});
</script>
Next, you <a links are find, however if you'd like to add a thumbnail change them to:
<img src="img/somethingThumbnail.jpg" alt="Link to Slide 1" />
And as they, job's a carrot!
So you main images are contained within the <li> elements and the thumbnails are within the <a elements.
Edit for Question 2
Looking through the jQuery blinds code, there's no means for it to translate the <li> items into proper links - as the images are changed to a background image of a new div.
You'll need to edit the jquery.blinds-0.9.js file, like so:
Line 49 becomes:
blinds_images[blinds_images.length] = { 'title': e.alt, 'src': e.src, 'href': $(this).parent().attr("href") }
This add the parent elements (the the image) href attribute to the array.
Line 89 becomes:
,'cursor': 'pointer'
This means the mouse will become link a link pointer when over the image
Insert this line into line 91:
tile.click(function (e) { window.location = blinds_images[0]['href']; });
This set's up the default link from the first tile.
Finally, line 115 (or 114 before inserted line) becomes:
$(this).find('.tile_' + i + '_' + j).show().css('background', 'transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (i * config.tiles_width) + 'px -' + (j * config.tiles_height) + 'px no-repeat').click(function (e) { window.location = config.images[config.img_index]['href']; });
Again, this picks up the href and directs the browser there when clicked for a particular slide.
With these changes, you're usual code of <li><img src="someIMage.png" /></li> will work as expected.
CAVEAT I've not tested this without the <a elements, so the list items without links will either need an empty one (maybe) or the jQuery code will need to be tweaked further to capture any null values.
To your first issue:
You can escape your quotes using a slash, e.g.
"$('.slideshow').blinds_change('<img src=\"/some/path\" />')"
To your second issue:
Your link is incorrect. It should be:
href="http://google.com"
Related
I'm working on a full-stack project that is somehow loading inconsistent CSS styles on my anchor elements. Using Javascript I am doing something like the following:
recordData.forEach(record => {
let a = help.createElement('a');
let text = record.jobTitle + " (" + record.deptName + ", " + record.subDeptName + ")-" + record.email;
a.textContent = text;
a.href = `/frontend/contractorForm/contractorForm.html`;
a.addEventListener('click', function(event) {
sessionStorage.clear();
sessionStorage.setItem('record', JSON.stringify(record));
}, false);
parent.appendChild(a);
}
The idea of this was that although I have one single HTML form "template" created, I can populate the values inside contractorForm.html through values stored in my sessionStorage.
Below are my anchor tag frontend views and I also attached images of what happens when I click on other ones. The problem with this is that when I click on my anchor tags on the front end, this is what I get.
My CSS for contractorForm.html is basically display:flex; justify-content:center. But as shown in the images, only the first anchor link works.
Things I've checked and verified: CSS page does load when looking at Devtools, disabling and clearing cache, attaching ?version={random number} onto the .html href, changing style on devtools to see if it works (and it does), changing the background color (it works perfectly), loading my CSS code after bootstrap link, checking paths and links (all correct)
The only issue here is that my display: flex is simple just not working. Any help or ideas will be appreciated! Thank you!
anchortaghtmlview
first-anchortag-click-view
second-anchortag-click-view
Fixed it - if you have CSS issues, make sure you are referring correctly to the parent.
My CSS looked like this before:
#contractor-form-section {
width: 50rem;
}
#contractor-form is wrapping just the form element, and the way how my DOM structure looked like was something like this:
<body>
<div id="contractor-form-border">
<section id="contractor-form-section">
<h1>...</h1>
<form>
</form>
</section>
</div>
</body>
Essentially, my CSS was referring to #contractor-form-section rather than #contractor-form-border. Switching to that basically fixed the issue!
I am trying to display some instagram photos in a jquery carousel and for some reason the pictures are displaying in reverse order and all of the photos are not displayed in the carousel slider.
The JavaScript i am using is as follows:
function(data) {
for (i=0; i<20; i++){
$("#carousel").prepend("<li><a target='_blank' href='" + data.data[i].link + "'><img src '" + data.data[i].images.thumbnail.url + "'></img></a>");
}
}
The HTML:
<ul id ="carousel" class="elasticslide-list">
<li></li>
</ul>
Prepend will reverse something.
Think about a prepend b prepend c, etc:
a -> ba -> cba -> dcba -> ...
Use append instead.
As for missing images, my guess is that there are more than the hard coded twenty.
Try:
for (i = 0; i < data.data.length; ++i)
Also, the i should be declared somewhere. Hopefully it's declared at a higher scope and isn't an implicit global.
It would be a bit overkill, but if you wanted, you could also use jQuery's each:
$.each(data.data, function() {
//"this" is now each of the data.data entries.
//like this.images or this.link
});
Edit: It also looks like you're missing an = for your src attribute on the img tag.
I also might be tempted to set the src with DOM manipulation since it's possible that it won't be escaped properly if you have a quote inside of the file name (which probably won't happen).
You could try this approach (see jsbin example), using layerJS and vue.js, I used images from flicker because this doesn’t need an api key.
Gesture movements work as well and you can have different types of transitions between them.
Basically you add a stage div put a layer and add as many frames as you want between for the images.
The HTML would look something like this:
<div data-lj-type="stage">
<div data-lj-type="layer" data-lj-default-frame="image1">
<div data-lj-type="frame" data-lj-name="image1" data-lj-neighbors.b="image2" class="frame">
<image src="img/1.jpg" />
</div>
<div data-lj-type="frame" data-lj-name="image2" data-lj-neighbors.b="image3" class="frame">
<image src="img/2.jpg" />
</div>
</div>
</div>
Hope this can help you and others in the future.
disclaimer: I work on the layerJS open source library that I used here.
So I've looked online in this issue, but can't seem to find the answer. Let me explain my problem fully.
I'm trying to dynamically add content to an <ul> and have it all formatted correctly. What I'm inserting to is this:
<ul data-role="listview" id="localStoresUL" data-autodividers="true" data-divider-theme="d">
</ul>
I have a list item somewhere else that is clicked and loads this up with data, and I am doing that with the following code:
$("#localStores").click(function() {
Customer.getLocalStores(13, 12, function(stores){
for(var i = 0; i < stores.length; i++){
$("#localStoresUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide" data-filter="false">' + stores[i].fullname + '</a></li>');
}
});
});
Now this works all fine and dandy the first time the user clicks the link and it populates that <ul>. But I have a back button on the page using this code:
<a href="#" class="ui-btn-left back" data-rel="back" data-icon="back" data-add-back-btn="true" >Back</a>
And when the user clicks this back button and then clicks on the previous <li> again (which should populate the <ul>) the content is loaded dynamically, but not formatted at all. I have no idea why this is happening. Does this problem make sense, and does anybody have any tips for how to fix it?
Not sure why it does. It shouldn't.
You need to call .refresh() on the listview.
Generally, if content is loaded but not formatted, you have an issue with your CSS. Inspect the loaded elements with firebug and see what classes are present and style rules are being applied. Then double check that your relevant CSS selectors match those elements.
I am using a gallery script with thumbnails on the following post on my site
http://www.lookbookcookbook.com/2012/03/apple-cinnamon-pancakes.html
It works fine, but when you go to the main page (third post down), it stops working. Is it because I have another post with the same script that is interfering?
Any help would be much appreciated, thanks!
Your script uses ids to target the picture to show. Ids should be uniques, only one element can have any given Id.
Your two galleries' img are sharing same Ids : #pic-0, #pic-1, etc. So on click, only the first one found is shown, the img in the first gallery.
It should not be too hard to solve, but a lot of your code must be CMS-generated, so I must know what you can change to help more.
(that's the piece of code handling your gallery:)
function myshowImages(id) {
/* $(".mainPic").hide();
$("#pic-"+id).show();*/
$('.mainPic').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
edit after comments :
So, honnestly your code is a bit of mess, there would be lots of change to achieve something clean.
However, for your immediate needs, you should use two showImage functions :
function myshowImages1(id) {
$('.mainPic1').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
function myshowImages2(id) {
$('.mainPic2').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
And edit your links :
for the first gallery.
for the second one.
Keep in mind that it's ugly and not scalable : if you have three gallery, it'll break.
I'm going to look at your code to see how you could do to have a unique function.
Edit2 :
So, a cleaner function for you to use :
1/ setup : chose a classname for each link/img pair. Per exemple :
<a href="" class="image_1">
<img alt="" height="80" src="(some long path)/lookbookcookbooksaya267b.jpg" title="" width="80">
</a>
the thumb link and the image to show :
<a href="(some long path)/lookbookcookbooksaya267.jpg">
<img alt="" class="image_1" height="470" src="(some long path)/lookbookcookbooksaya267.jpg"></a>
Then, I've seen you have JQuery, so this kind of function :
$(document).ready(function()
{
$(".gallery div div a").on("click",function()
{
var myClass = $(this).attr('class');
var $parentGallery = $(this).parents('.gallery');
$parentGallery.find("div > a > img").css("display","none").find("myClass").fadeIn();
return false;
});
});
First, it binds a click event on all your links which are two div depth in the .gallery element. That's your thumbs.
On click, it fetches the class of the clicked thumb link.
Then it searches for the parent .gallery of this link, hide alls images and show the good one.
I can't really guarantee it'll work out the box because your markup is very complex, but it should.
How can I use a variable in jQuery. as you see in script snippet, I assign a variable "divname" with value, and when i use 'Jquery" to fade out. it is not working. What I really need is, when image is hover, the description will be show up as fading in, when mouse is gone, the the description should be gone. thanks in advance.
Script snippet
$j('.img_nofade').hover(function(){
$j(this).animate({opacity: .5}, 300);
var i = $j(this).attr('titlename');
var divname = "'#titleID" + i + "'";
//alert (divname);
$j(divname).fadeIn();
},
function(){
$j(this).animate({opacity: 1}, 300);
$j(divname).fadeOut();
}
);
HTML code
<img class="img_nofade' src="image-1.gif" titleid='1" />
<div id="titleID1">my image title 1 </div>
<img class="img_nofade' src="image-2.gif" titleid='2" />
<div id="titleID2">my image title 2 </div>
<img class="img_nofade' src="image-3.gif" titleid='3" />
<div id="titleID3">my image title 3 </div>
No need to use the ' char, just:
var divname = "#titleID" + i;
And in the hover's handlerOut function, the divname is already out of scope, you should define it again.
There are a few issues I see.
Your attributes in your HTML are mixing single and double quotes. You need to use one or the other.
$j(this).attr('titlename'); - The attribute name doesn't match your HTML attributes. (titlename vs titleid)
You have a scoping issue with the var divname. You define it in your mouseover event which means it won't be defined in your mouseleave event. You should just use the next method to get a reference to your div. $j(this).next().fadeIn() This would prevent the need for trying to find the titleID in the first place.
There are a few issues here.
1) You have some typos in the HTML. Be careful about single and double quotes. Not all browsers will automatically correct those kinds of errors, and if Javascript can't find the HTML it's looking for, then your code will break.
2) jQuery provides some excellent resources for getting elements without having to fall back on the varname-style thing (i.e. var titleId = $(this).attr('titleId')+i;)
Instead, you can do something like this:
<img class="img_nofade" src="image-1.gif"/>
<div class="description">my image title 1 </div>
<img class="img_nofade" src="image-2.gif"/>
<div class="description">my image title 2 </div>
<img class="img_nofade" src="image-3.gif"/>
<div class="description">my image title 3 </div>
I got rid of the titleId attribute and changed the divs from id="TitleID1" to "description". It's more generic, but it's also more semantic from a styling standpoint. You won't have to individually style each of those things.
The jQuery would look something like:
$('.img_nofade').hover(function(){
$(this).animate({opacity: .5}, 300);
$(this).next('.description').animate({opacity: 0}, 300);
},function(){
$(this).animate({opacity: 1}, 300);
$(this).next('.description').animate({opacity: 1}, 300);
});
The $.next() method grabs the next element. If you pass in a selector, you can grab the next element with that selector. This is really useful when you're dynamically adding things to the page and want to grab the next one on the list. There are several other ways to do this, this just happens to be the easiest in this scenario, I think.
Finally, you should keep in mind that the .fadeIn() and .fadeOut() methods will change the display attribute to display:none when hiding. This means that in your above example, without any styling, the titles would disappear, causing the images to slide together. That's why I chose to animate on the opacity instead. You can definitely do the fadeIn/fadeOut thing if you have CSS styling those images to keep them from collapsing in on each other.
Good luck.
You have two functions for the hover and have declared divname in the first and then you are trying to use it in the second. This won't work because it is not in scope of the second function.
Instead of using the divname in this case you could use $j(this).next() to select the next sibling, in this case the div following the img and call fadeIn() and fadeOut() that way.
$j('.img_nofade').hover(function(){
$(this).next().fadeIn();
}, function(){
$(this).next().fadeOut();
});
This isn't too hard
$j('.img_nofade').hover(function(){
var title = 'titleID' + $(this).attr('titleid');
$('#' + title).fadeIn();
}, function(){
var title = 'titleID' + $(this).attr('titleid');
$('#' + title).fadeOut();
});
Try this fiddle
http://jsfiddle.net/cmyks/