I created a image gallery using JS, CSS, and HTML to extract data from a JSON file, which I created, then set up tiles and modals for each image. It works perfectly, but then I was told to convert it to the Django framework to make it maintainable by non-coders. I have no experience with Django, so I have idea where to even start with this.
Here is part of the gallery: http://i.imgur.com/NGZ7Evt.png
Here is a sample modal: http://i.imgur.com/CTzCt2J.png
Note: these are just filler images and text.
When the page loads, it parses out the JSON and sets up the code for the tiles. Then it creates a modal for each tile.
Are there any references or tutorials I can look at to get what I want? Or will I just have to completely change how my page works?
Related
I know there is a way to embed an autostarted looping slide show like this:
http://responsiveslides.com/
But let's say I want to add a new photo to the slide show. That means that I will have to go into the html code and add/delete code linking the image files. I want to just add pictures (could be to a local folder or a web site doesn't matter) and it updates the slide show with the new images. I know you can use flickr.com, but it does not have the autostart or looping features. Does anyone know of a way to do this?
enter code here
https://jsfiddle.net/jmwbLqxq/2/
Stole this from W3 obviously, except added the css to do the silky animation. All you have to do is add another img tag.
Edit:
In response to what you said, you would have to make a server side database and a 'upload images' button to add images to the database. When the screen loads, it runs your server side code that queries the database for the images, loops through them and inserts into html.
I'm trying to insert a free gallery slider called iDangerous slider into a website. The source consists of two files - one a .css file and one a .js file source.
However, I have absolutely no idea even how to begin to use it. I can't see how to insert it into the website's HTML, nor how to insert the images that the slider gallery will use. Many thanks for any help
Here is a link to my site, http://johnathonpowers.bigcartel.com
Trying to play around with images on my product pages...well actually created a test page.
Unable to figure out a few things:
Where does one host a jquery file?
Do I need to have the jquery src for both jquery.min.js (many use the one hosted by google, if I am understanding any of this correctly) and jquery.elevatezoom.js?
If I end up not liking the zoom is this still an appropriate way to have a large image with small thumbnails beneath (perhaps I will explore how to click on the big image to open a full-screen version).
Should all my pictures be the same size? Right now I have square format photos and rectangle...it might end up looking horrible.
Do I put any code into CSS or just the layout and the specific page I want the images to take place?
Will these images replace the ones I upload through bigcartel's system?
There is already a jquery entry in the layout...do I just add to the end of this same section the additional src?
This is what I added to layout:
<script src="http://s000.tinyupload.com/index.php?file_id=24823496361920795072" type="text/javascript"></script>
This is my test page:
<img id="zoom_01" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg"/>
$("#img_01").elevateZoom();
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></head>
<img id="product_zoom" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg" class="fade_in">
Thanks again for all the help and honestly probably biting off more than I can chew. I just wanted to play around with it and see if it would work/was something I liked, but seems like I have gone down a rabbit hole into a whole other world, way above my rudimentary html skillset.
Here is where I first saw the jquery stuff:
Can I integrate an Internal zoom on my products in my big cartel store?
The best place to host your javascript files is on a server that you have control over -but if you don't have any webspace, you can easily host files with a service like Dropbox or Google Drive.
The Luna theme you're using already loads jQuery in the <head> portion of your Layout, so you don't need to include that script again (and you'll get errors in your browser's javascript console if you try).
Since you're using a separate image zooming library that has a bunch of custom CSS, you'll probably want to have your CSS file hosted on a separate server as well. It's a good idea to put any files you're including in the Layout section, following the same format as the existing theme files.
It looks like the javascript file you're hosting on tinyupload.com is just bringing up a download page instead of actually loading the javascript content into the page, so you'll definitely need to change how that's loaded. Otherwise the HTML code you're using looks like it should work.
I have an ASP website that gets data from SQL queries and puts them into divs and then, superimposes the divs over an image. The only problem is that when people try to save the image, they do not get the data or the divs with the image.
Is there anyway I can combine the divs and the image into one single picture using ASP or even ASP.NET? This way when people try to save the images, they get the original image and also the data that is put on top of the image as well.
I have been trying to use the
Response.ContentType = "image/gif"
tag in a separate page and tried to call that page as an image but that's not working when you have HTML combined with the ASP. Can anyone please help.
Youc can use html2canvas library to take "screenshots" of entire pages.
Update:
Apparently it is possibe server-side as well (using ASP.NET tho) by using WebBrowswer control (yes it can be used in ASP.NET as well). Take a look
(I have limited coding experience)
I have a template file for a website and currently the image gallery for the site opens in a new page, I would like instead for the image gallery to not open additional pages/tabs and instead contain images in rows of five with one large main image under the rows all within the same page, I would like the main image when scrolled over with the mouse it zooms in on the picture Also when you click on the smaller additional images (in rows of five) it will change the main bigger image to the image that was clicked and allow the zoom in feature as well.
What are the tags I need to place in the template file (in the link below) and where do I put the tags?
Shown below is the current tags in the template
This is the picture gallery tags in the template file of the site:
<!-- picture gallery -->
<script type="text/javascript">myThumbs = ##CST_ITEM_IMAGE_ARRAY_T##;myPix = ##CST_ITEM_IMAGE_ARRAY_M##;</script>
Here is a link to the template file and a pdf of what I am trying to accomplish
http://sdrv.ms/UCHk8z
Here is what the current image gallery looks like now that needs to be changed to not open a new window
http://www.ebay.com/itm/4-Behringer-B208D-Active-800-Watt-2-Way-PA-Speaker-Systems-8-Woofer-/390478326914?pt=US_Pro_Audio_Speakers_Monitors&hash=item5aea526c82
I am not proficient with programming I understand some things but not how it all flows together, I only know basic links and tags so thank you everyone for your help, I greatly appreciate all the responses. I have been Google searching everything to no success.
According to my understanding of your question I think you require something like Thumbnail gallery , if so refer the below url
http://www.queness.com/post/3141/10-image-galleries-jquery-script-with-thumbnail-filmstrip
so I have choose one ( http://www.robertnyman.com/picture-slides/) to use for your purpose right so by that 80% of work is done just download the demo of that and is it will be easily understandable, in your case you can see 3 links in demos click on the one you like and download it and use it
so you have downloaded the file using the picture gallery link, so you will get a zip file which consists of gallery and _Macosx don't bother about the Macosx.
Now go into the gallery file in that there will be a index.html,css and required js, copy them where you require and if you see the index html there will be a div which consists of Picture slider container class div, complete the copy the div and paste it where you require.... Thats it :D
Note: Make sure you give the correct paths to the images, thumbnails, css and js
Hope this helps