I have the following gallery -
<div class="content">
<div id="myGallery">
<div class="imageElement">
<h3>IMAGE 1</h3>
<p></p>
<img src="image1.jpg" class="full" />
<img src="image.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>IMAGE 2</h3>
<p></p>
<img src="image2.jpg" class="full" />
<img src="image2.jpg" class="thumbnail" />
</div>
</div>
</div>
This works fine when the images are hard coded like above, getting read from a folder.
However I wish to populate the gallery from the code behind with images I do not have stored but from a URL. Like - www.fooBar.com/image1.png and once this is retrieved then push it into the gallery?
I have tried the following -
Setting <div id="myGallery" id="testHtml">
then in the code behind -
testHtml.innerHTML = // built html with image src = url etc
However this just rendered the image without putting it into the gallery itself.
No shortage of ways to skin this cat, but one way is to create a literal like this:
<div id="myGallery">
<asp:Literal id="ltrImages" runat="server" />
</div>
Then in your codebehind:
var imageElement #"<div class=""imageElement"">
<h3>{0}</h3>
<p></p>
<img src=""{1}"" class=""full"" />
<img src=""{1}"" class=""thumbnail"" />
</div>";
StringBuilder sb = new StringBuilder();
//Presuming you have your images in some kind of collection called "images"
for(var image in images){
sb.Append(String.Format(imageElement, image.title, image.src));
}
ltrImages.Text = sb.ToString();
<asp:Panel> has a property named Controls which you could use in order to add your <div class="imageElement"> containers, images, headers and more.
See here for how to add an item: http://msdn.microsoft.com/en-us/library/kyt0fzt1(v=vs.110).aspx
See here how to create a custom tag: http://msdn.microsoft.com/en-us/library/5f8y80ez(v=vs.110).aspx
Related
I have an application which I am building using EF and C# with using Amazon S3 as the file server. What I do is that I upload some PDF's to S3 and store it's URL in my database and then show it in the application. I pass the model using a session to the view and then use For Each to iterate through the URL's and for each URL, create a new iframe just like below:
#{int i = 1;}
#foreach (var tempimg in (List<TempImage>)Session["TempImages"])
{
<fieldset class="invoiceFieldsets" data-step="#i" id="FieldSet_#i" hidden>
<div class="row">
<div class="col-xs-4">
<div class="fixed-actions invoiceContainer">
<div class="card text-center" id="Picture_#i" style="width:450px;height:500px;background-color:ghostwhite;border:none">
#*<div class="card-header">
Profit and Loss
</div>*#
<input type="hidden" id="ImagePath_#i" runat="server" value="#tempimg.ImagePath" hidden />
<div class="card-body" display="inline-block" id="imagepreview_#i" style="background-image:url(#tempimg.ImagePath)" hidden>
<iframe id="pdfviewer_#i" src="#tempimg.ImagePath" style="width:500px; height:500px;" sandbox="allow-same-origin" hidden></iframe>
#*<embed width="500" height="500" name="plugin" id="pdfviewer_#i" src="#tempimg.ImagePath" type="application/pdf">*#
</div>
</div>
</div>
</div>
Based on the value (i.e if the returned URL contains .pdf), I hide or unhide the iframe:
var imgtype = $("#ImagePath_"+current).val();
if (imgtype.indexOf(".pdf") >= 0) {
$("#pdfviewer_"+current).prop('hidden', false);
$("#pdfviewer_"+current).attr('src', imgtype);
}
else {
$("#imagepreview_"+current).prop('hidden', false);
}
The problem I keep having is that the pictures are shown correctly but the PDF is not showing. I do get a warning from CORBS from google but I have tried even bypassing it and it still does not work. Can you help me on this?
I found the issue . I found out that this part of the code sandbox="allow-same-origin" when defining the iframe was causing the issue. Once i removed it , it started working. I hope this helps anyone else who is going through the same problem.
In application I used Tinymce editor in which if images inserted then it is stored like below :-
<div>
<img src="D:\My Folder\pic1.jpg" />
<img src="D:\My Folder\pic2.png" />
<img src="D:\My Folder\pic3.gif" />
</div>
I want to replace image url path with content id.
<div>
<img src="cid:{0}" />
<img src="cid:{1}" />
<img src="cid:{2}" />
</div>
is it possible?
Here I made a simple webpage to post pictures, text, etc. I also made a simple ajax file to send the text, picture, etc to the database, and retrieve that information to be displayed in the same webpage. Here is the main webpage:
<div class="here" id="here">
#foreach (var photo in db.Query(photos, galleryInfo)){
<div class="com_1 com_3">
<div class="com_4">
<div class="com_44">
<img alt="miniatura" style="margin-top: 0" src="#Href("~/Photo/Thumbnail2", photo.UserId, new { size="small" })" class="thumbnail-border thumb22" />
<div class="n-s">
<b>#photo.Nombre #photo.Apellido</b>
</div>
</div>
<div class="com_5">
#photo.Comment
</div>
</div>
<div class="comcom">
<div class="comcom1">
<form onsubmit="return fofon(this)" id="gog">
<input type="text" style="display: none" name="GroupId" value="#galleryInfo" />
<textarea class="texta"name="comment" placeholder="Write a comment..."></textarea>
<input type="submit" class="g_sub"/>
</form>
</div>
</div>
</div>
}
In case it gets confuse, this shows every post with a "comment section" below each one (we can call them "Commne2"). The ajax will get the text, picture etc, send it to the database, and post it to another file, which will be displayed here... in the #foreach{}.
Obviously, the posts do not "excist", so any javascript that affects that post, will not work, because that element does not exciste in this case.
So my problem is, how can I create an ajax file (javascript file) that affects the Comment2 so that I can comment a post?
I've made an If statement containing a youtube link.
In umbraco I have a Text String box that enables a user to insert the ID of a youtube video.
<div class="module m-video">
<div class="regular">
<div class="graphics video-container">
<iframe width="100%" src="http://www.youtube.com/embed/<umbraco:Item field="youtubeId" runat="server" />?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
But when the page loads it displays the <umbraco:Item field="youtubeId" runat="server" /> instead of what the user put in.
What work around is their to display what a user inserts into the text string box.
All must be done in razor
I would create a "YoutubeVideo" macro along with it's razor script "YoutubeVideo.cshtml". And that cshtml code would look like this:
#using umbraco.MacroEngines
#inherits umbraco.MacroEngines.DynamicNodeContext
<div class="module m-video">
<div class="regular">
<div class="graphics video-container">
<iframe width="100%" src="http://www.youtube.com/embed/#Model.youtubeId?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
Then in your .master you could include that mascroscript like this:
<umbraco:Macro ID="Macro1" Alias="YoutubeVideo" runat="server" />
This approach may differ if you are using Umbraco 6+ with MVC, but otherwise this should do the trick.
If you are doing this inside the umbraco template editor you should be able to swap the double quotes denoting the src attribute with single quotation marks, and the umbraco item needs no change.
<iframe width="100%" src='http://www.youtube.com/embed/<umbraco:Item field="youtubeId" runat="server" />?rel=0' frameborder="0" allowfullscreen></iframe>
Hi been creating a web application using VS 2010 using C#.the problem i am having is that i have added image slider on the master page. but when i run the application it does not show the slider on the pages which are in a subfolder but shows the image slider in a file which is in the root.
for the image slider i have used jquery
this is how i have coded the images on masterpage
<div id="slide-holder">
<div id="slide-runner">
<img id="slide-img-1" src="~/Styles/images/nature-photo1.png" class="slide" alt="" />
<img id="slide-img-2" src="~/Styles/images/nature-photo1.png" class="slide" alt="" />
<img id="slide-img-3" src="~/Styles/images/nature-photo2.png" class="slide" alt="" />
<img id="slide-img-4" src="~/Styles/images/nature-photo3.png" class="slide" alt="" />
<img id="slide-img-5" src="~/Styles/images/nature-photo4.png" class="slide" alt="" />
<img id="slide-img-6" src="~/Styles/images/nature-photo4.png" class="slide" alt="" />
<img id="slide-img-7" src="~/Styles/images/nature-photo6.png" class="slide" alt="" />
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
it not showing up on the pages located in subfolders but working with pages located in the root
You have to make sure that all of the src and urls are being resolved successfully. For this, use the ResolveUrl() function to successfully resolve all of your images regardless of the location. Also, if you are using Css, you have to make sure the images inside the css are being resolved correctly:
Example:
<img id="slide-img-2" src='<%= ResolveUrl("~/Styles/images/nature-photo1.png") %>' class="slide" alt="" />
Good luck!